Bloggerブログで記事中の複数の画像を横並びやグリッドデザインで配置する方法

Bloggerで写真や絵などの画像を一つの記事に何枚も投稿する場合に縦並びだけではなくて横並びやグリッドデザイン（縦横を均等に表示する／タイル張り）を望んだりもする。複数の投稿画像のレイアウトを変える機能は付いてないので、自分で考えてブログの複数の投稿画像のデザイン変更するしかない。サイト作成でCSSのGrid Layout：displayのgridを使うとコンテンツの横並びやグリッドデザインは手軽にできるけれども実際にやってみるとBloggerブログの投稿画像でも大丈夫だと確認できたからソースコードと共に方法を明らかにしておきたい。

Bloggerの投稿画像の横並びやグリッドデザインについて
CSSのGrid Layoutの画像向けの一般的な使い方
横並びの2×0のサンプル
グリッドデザインの2×2のサンプル
グリッドデザインの2×1のサンプル
グリッドデザインの縦横に細分化したサンプル
縦横比の異なる画像を一列に組み合わせたレイアウト

Bloggerの投稿画像の横並びやグリッドデザインについて2020年9月にBloggerの管理画面が刷新されて投稿画像の出方が変わったので、Bloggerで投稿画像を横並びで表示する方法で、投稿画像の横並びについて新しい方法を中心に纏め直した。本稿の以下でははCSSのグリッドレイアウトの一般的な使い方と投稿画像の配置の幾つかのパターンを取り上げている。CSSのGrid Layoutの画像向けの一般的な使い方 Grid Layoutの四列と二行の格子

複数の画像の全てを一つの領域タグのdivにidかclassを付けて囲ってCSSで「display:grid」を指定すると横並びやグリッドデザインが可能になる。実際にどのように配置するかはレイアウトの縦横の数と隙間と位置合わせで基本的に完了する。サイト作成では画面幅でデザインが変わり易いからコンテンツの表示については横幅に注意すると良いと思うし、レイアウトはCSSのGrid Layoutでもサイトの横幅にコンテンツを合わせるのが中心になるだろう。横並びやグリッドデザインのための主な要素

grid-template-columns

列の数の指定：横並びの枚数を決める

grid-template-rows

行の数の指定：縦並びの枚数を決める

gap

列と行の隙間の指定：画像同士の余白を決める

column-gap

列の隙間の指定

row-gap

行の隙間の指定

justify-items

コンテンツの左右の位置合わせ：サイズの違う画像位置を主に横方向で揃える

align-items

コンテンツの上下の位置合わせ：サイズの違う画像位置を主に縦方向で揃える

grid-column

レイアウトの列の個別の大きさ（セル）や位置取りの指定

grid-row

レイアウトの行の個別の大きさ（セル）や位置取りの指定

値についてはCSS Grid Layout を極める！（基礎編）・（場面別編）などに載っている。displayのgridは他にも様々な指定が可能だけれども複数の画像の横並びやグリッドデザインの一般的な使い方としては多くても八つくらい覚えておけば殆どの場合で綺麗に纏められる。横並びの2×0のサンプル

HTML<div class="sidebyside"> Bloggerの位置合わせなしの画像コード（赤） Bloggerの位置合わせなしの画像コード（青） </div>CSS.sidebyside {display:grid;gap:0.5em;grid-template-columns:1fr 1fr;}横並びの数を決めるgrid-template-columnsの単位は「1fr」で一枚なので、二枚ならば半角スペース（）で区切ってサンプルのように二つ、三つならば同じような仕方で「1fr 1fr 1fr」と「1fr」を増やして行く。横並びの比率を変える場合はgrid-template-columnsのそれぞれの単位の数字で合わせる。

左と右が1:2の比率ならば「grid-template-columns:1fr 2fr」のように記載する。グリッドデザインの2×2のサンプル

HTML<div class="grid-layout"> Bloggerの位置合わせなしの画像コード（赤） Bloggerの位置合わせなしの画像コード（青） Bloggerの位置合わせなしの画像コード（黄） Bloggerの位置合わせなしの画像コード（緑） </div>CSS.grid-layout {display:grid;gap:0.5em;grid-template-columns:1fr 1fr;}レイアウトは画像の数が縦横で同じで、完全にタイル張りになる場合は横並びのCSSと変わらない。一列の余りは自動的に次の行に入って行く。グリッドデザインの2×1のサンプル

HTML<div class="grid-layout"> Bloggerの位置合わせなしの画像コード（赤） Bloggerの位置合わせなしの画像コード（青） <div class="grid-item"> Bloggerの位置合わせなしの画像コード（紫） </div> </div>CSS.grid-layout {display:grid;gap:0.5em;grid-template-columns:1fr 1fr;} .grid-item {grid-column:1/3;}上の二つの画像は「grid-template-columns:1fr 1fr」で普通に並べるけれども下の一つの画像を列のコンテンツの大きさと位置取りを決める「grid-column:1/3」で横幅一杯に広げながら三行目に追加している。grid-columnの値の入力はレイアウトの始まりの線と終わりの線を数えて半角スラッシュ（/）で分けて行う。列は左端を1として次の線へは一つずつ番号を増やす（2、3、4……）。反対側から数えても構わない。ただしその場合は右端を-1として次の線へは一つずつ番号を減らす（-2、-3、-4……）。grid-rowでも線の番号の捉え方は同じで、上端が1か、下端が-1かで数える。サンプルはレイアウトの二行目に画像を置くだけならば何もしなくて良いけれども「template-columns:1fr 1fr」によって全体が二列なので、一列目に収まってしまってもっと大きな画像を横幅一杯には広げられない。全体の二列分に当て嵌めるためには「grid-column:1/3」によってレイアウトの左端から右端までを使ってコンテンツを表示しなくてはならない。grid-columnとgrid-rowは列と行のコンテンツの大きさを変えるだけではなくて始まりの線を指定して位置取りを変えられもする。サンプルの2×1をgrid-rowで1×2へ入れ換える

HTML<div class="grid-layout"> Bloggerの位置合わせなしの画像コード（赤） <div class="grid-item-1"> Bloggerの位置合わせなしの画像コード（青） <div class="grid-item-2"> Bloggerの位置合わせなしの画像コード（紫） </div> </div>CSS.grid-layout {display:grid;gap:0.5em;grid-template-columns:1fr 1fr;} .grid-item-1 {grid-column:2/3;grid-row:1/2;} .grid-item-2 {grid-column:1/3;grid-row:1/2;opacity:0.6;}デザインによっては敢えて重ねても良いと思うし、重なる方を透過すれば両方が見えるようにもなる。grid-rowで入れ換えない1×2のレイアウト

HTML<div class="grid-layout"> <div class="grid-item"> Bloggerの位置合わせなしの画像コード（紫） </div> Bloggerの位置合わせなしの画像コード（赤） Bloggerの位置合わせなしの画像コード（青） </div>CSS.grid-layout {display:grid;gap:1em;grid-template-columns:1fr 1fr;} .grid-item {grid-column:1/3;}元々の2×1のレイアウトのソースコードのHTMLで画像部分を上二つと下一つで置き換えたのと等しい。CSSを変更しなくても1×2のレイアウトが取れる。最初からレイアウトが決まっていればHTMLでコンテンツを順番通りに記載するのが易しいと思う。displayのgridのデフォルトのコンテンツの読み込みは左上から横へ行って下へ行く。横へ又行って下へ又行って同じように繰り返しながら右下へ向かうので、HTMLでコンテンツを記載する順番を合わせるとCSSのgrid-columnやgrid-rowで位置取りを入れ換えずに済む。グリッドデザインの縦横に細分化したサンプル

HTML<div class="grid-layout"> Bloggerの位置合わせなしの画像コード（赤） <div class="grid-item-1"> Bloggerの位置合わせなしの画像コード（桃） </div> Bloggerの位置合わせなしの画像コード（青） <div class="grid-item-2"> Bloggerの位置合わせなしの画像コード（紫） </div> </div>CSS.grid-layout {display:grid;grid-template-columns:1fr 1.125fr;} .grid-item-1 {grid-column:2/3;grid-row:1/3;} .grid-item-2 {grid-column:1/3;}CSSのGrid Layoutに画像を配置する場合、サイズは自動的に収まるけれども縦横比が異なるとレイアウトに合わせるのは難しい。サンプルは一列目の二つの正方形と二列目の一つの長方形の縦幅を同じに仮定して横の比率を「grid-template-columns:1fr 1.25fr」としてぴったり収められた。縦横のサイズ、二つの正方形が3200×1600、一つの長方形が1600×900で、先ずは後者の縦幅を前者の3200と同じに二倍で仮定すると横幅は1800になるので、これを二つの正方形の横幅の1600で割ると1.125倍になっていると分かる。パズルのようだし、複数の画像を部分的にずらしながら纏めるならばもっと大変だろうけど、とにかく配置する画像の縦横比が合わないと縦横に細分化したレイアウトははみ出すか、引っ込んだりして最終的に崩れてしまう。gapを使って隙間を付けるとその分だけ縦幅が伸びてしまうから部分的にずれてレイアウトとして纏めるのはやはり大変にならざるを得ない。縦横比の異なる画像を一列に組み合わせたレイアウト

HTML<div class="sidebyside"> Bloggerの位置合わせなしの画像コード（茶） Bloggerの位置合わせなしの画像コード（橙） </div>CSS.sidebyside {display:grid;gap:0.5em;grid-template-columns:81fr 256fr;}画像比が違っても縦横に分割しなければ比較的に易しい。計算しなくてはならないけれどもそれぞれの縦幅を同じに仮定して横幅の比率を「grid-template-columns」に入力する。複数の画像の列の比率の計算式行の長さ／画像の縦幅が同じならば列の比率は列の長さ／画像の横幅に含まれる。

縦幅の比率をかけて共通項を出す

共通項にそれぞれの横幅をかける

個々の横幅が列の比率に等しい

画像が二枚の場合は大きな方を小さな方で割って1以上と1との列の単純な比率が出せる（小さな方を大きな方で割って1未満と1でも構わない）けれども割り切れなければ計算式の答えの共通項の縦幅での二つの横幅自体が列の単純な比率にもなっている。画像が三枚以上の場合でも列の比率の計算式は変わらないけど、ただし単純な比率を出すのがもうちょっと大変だろう。対象の共通項からの横幅が増えるほどに全てを相応しく割り切れる数字があるかどうか――数学的にいうと最大公約数から求められるので、複雑ならば素因数分解／高精度計算サイトが是非とも必要になる――を探すのに時間がかかる。サンプルの縦長と横長の二つの画像の縦横のサイズは1600×900と900×1600で、縦横比は16:9と9:16なんだ。これ自体を縮尺された最小の長さと捉えて縦幅を同じに仮定すれば互いにかけて144が共通項になる。144の縦幅のとき、横の長さはどのくらいか。それぞれに横の比率と同じ数をかけて九倍と十六倍なのを縦の比率で割ると81と256になると分かる。大きな方を小さな方で割れば前者を1として後者に入力する1以上の数値が出せるし、grid-template-columnsのfrの値として単純に使えるけど、割り切れないようだからサンプルはそのままで入力してレイアウトを纏めている。列の比率の計算式は各画像の縦横を入れ換えればgrid-template-rowsのための行の比率も出せる。横並びやグリッドデザインで縦横比が異なる画像をぴったり合わせるには列や行の比率を計算する手間がかかるからなるべく揃っているのが望ましいけど、しかしたとえ縦横比が異なっても画像の長さが縦幅か横幅のどちらか一つでも揃っていれば残りの長さの横幅か縦幅にレイアウトに必要な比率はもう既に含まれているので、計算せずにfrの入力値に使えるくらい等しいから比較的に易しい。

参考サイト

コメント