スキップしてメイン コンテンツに移動

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

Bloggerで写真や絵などの画像を一つの記事に何枚も投稿する場合に縦並びだけではなくて横並びやグリッドデザイン(縦横を均等に表示する/タイル張り)を望んだりもする。複数の投稿画像のレイアウトを変える機能は付いてないので、自分で考えてブログの複数の投稿画像のデザイン変更するしかない。

サイト作成でcssのGrid Layout:displayのgridを使うとコンテンツの横並びやグリッドデザインは手軽にできるけれども実際にやってみるとBloggerブログの投稿画像でも大丈夫だと確認できたからソースコードと共に方法を明らかにしておきたい。

Bloggerの投稿画像の横並びやグリッドデザインの前提条件

Bloggerの投稿画像のレイアウト選択の画面
投稿画像のレイアウト選択 via Blogger

何れの公式テーマでも共通して必要なのは投稿画像を選択する際の位置合わせで「なし」を選ぶ。さもないと画像に位置合わせのデザインが付いた領域タグのdivが付いて来て複数で改行するようになってしまう。横並びやグリッドデザインに不要なので、デザインを変えるにも非常に難しくならざるを得ない。

旧テーマだと投稿画像の位置合わせを外しておくだけでも複数枚を合わせて記事の横幅よりも小さければ横並びは可能で、さらに行毎に分けさえすればグリッドデザインも可能だと思う。

他のデザインが特に干渉しないようなので、cssのGrid Layoutを新しく取り入れても反映し易いんだ。

厄介なのが新テーマで投稿画像の位置合わせを外すだけでは付けた場合と同じようにやはり複数枚は縦並びにしかならない。調べると画像に付けられるオリジナルサイズへのリンクタグのaに付けられた「imageanchor="1"」というデザインの属性が影響している。それも削除して外せば記事幅よりも小さいかぎりで複数枚の横並びやグリッドデザインを行うのは容易い。

しかし「imageanchor="1"」がないと他のデザインが変わってしまい兼ねないので――主に画像リンクの余白などを指定していて画像そのものの表示に大きな影響はないかも知れない――残したままでも大丈夫な方法が見付かったので、使いたいと思う。

個別の記事中にcssのGrid Layoutを取り入れる記述について

個別の記事が対象ならばそれぞれの投稿の「html」(入力欄の左上のスイッチで切り替える)にデザインタグのstyleでcssのソースコードを追加するのが簡単だろう。

<style>
cssのソースコード
</style>

投稿の「html」のどこかに記述しておくとデザインが当該の記事だけに反映して他の記事を含めてブログ全体には影響しない。

またはブログ全体に反映させるならばテーマの「html編集」からテンプレートのstyle内にcssのソースコードを記述する。

その場合、IDかクラスを付けておいて複数の投稿画像にかぎってそうしたdivで囲って反映させられる。ただし横並びやグリッドデザインを使わない記事でも同様のcssのソースコードが読み込まれる分だけ無駄になってしまう。

Bloggerの投稿画像にdisplayのgridを的確に反映させる

公式テーマのテンプレートによって投稿画像にcssのGrid Layoutを取り入れてもデザインが微妙に崩れてしまう。大きく分けて新旧の公式テーマでBloggerブログの投稿画像のデフォルトのデザインが違う。どちらのテンプレートでも横並びやグリッドデザインを可能にするdisplayのgridを的確に反映させるめには予めソースコードを修正しなくてはならない。

新テーマ

  • Contempo
  • Soho
  • Emporio
  • Notable

旧テーマ

  • シンプル
  • 動的ビュー
  • 画像ウィンドウ
  • Awesomely Inc.
  • ウォーターマーク
  • エスィリアル
  • 旅行

新テーマでのソースコードの修正点

画像リンクの「imageanchor="1"」によって先頭の画像が幾らかずれてしまうので、当該のcssでdivの他に「body.item-view .post-body a[imageanchor="1"]+a[imageanchor="1"] {margin-top:0}」を必ず追加する。さもなければ画像リンクを外すか、リンクタグの「imageanchor="1"」を削除しても横並びやグリッドデザインには影響しなくなる。

旧テーマでのソースコードの修正点

投稿画像がデフォルトで大き過ぎると記事からはみ出すから投稿画像の大きさを記事の横幅以内にぴったり合わせるために当該のcssでdivの他に「.post-body img {padding:0;max-width:100%}」を追加する。これ自体は投稿画像を記事の横幅にぴったり合わせるソースコードなので、大き過ぎる「元のサイズ」を多用したりする場合には「html編集」やカスタマイズの上級者向けの「cssを追加」で全記事に反映させておいても良いかも知れない。ただし「padding:0」の部分は他のサイズの画像(小・中・大・特大)で内側の余白がなくなってしまうから必要ならば削除して横並びやグリッドデザインの投稿の「html」だけに追加したり、適宜、使い分けるべきだ。

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の位置合わせなしの画像コード(赤)
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-row:1/2;}

注意点があってhtmlの画像の順番をcssで変更する場合には移動先にgrid-columnやgrid-rowで位置取りが同じところにかけられているとhtmlの順番で後から記載された方が重なってしまう。

避けるためには移動先の画像の位置取りを外すか、入れ換えるのと同時に反対側へ変更しなくてはならない。

赤の正方形
青の正方形
紫の横長の長方形

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. 縦幅の比率をかけて共通項を出す
  2. 共通項にそれぞれの横幅をかける
  3. 個々の横幅が列の比率に等しい

画像が二枚の場合は大きな方を小さな方で割って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の入力値に使えるくらい等しいから比較的に易しい。

参考:グリッドレイアウトの基本的な概念 5分で完璧に分かる!CSS Gridの基本的な使い方を解説 CSS Grid Layout について

コメント

些細な日常の人気の投稿

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策

ジョナサン・モフェットのドラムの8ビートの切れ味の鋭いグルーヴ

Imgurで画像URLと埋め込みコードを取得する方法