Bloggerで投稿画像を横並びで表示する方法

以前、CSSのグリッドレイアウトによる画像の横並びの方法を載せたけれどもBloggerの管理画面が2020年9月に刷新されて投稿画像の出方も少し変わったので、新しい方法を中心に載せ直したい。

テンプレートによるコーディングの違い

Bloggerの公式テーマを想定して投稿画像の横並びの方法を紹介するけれどもテンプレートのレイアウトヴァージョンによって変わるから注意しなくてはならない。

レイアウトヴァージョン３の公式テーマ

Contempo／コンテンポ
Soho／ソーホー
Emporio／エンポリオ
Notable／ノータブル
Essential／エッセンシャル

レイアウトヴァージョン２の公式テーマ

Simple／シンプル
Dynamic Views／動的ビュー
Picture Window／画像ウィンドウ
Awesome Inc.／オーサムインク
Watermark／ウォーターマーク
Ethereal／エスィリアル
Travel／旅行

※Bloggerのテンプレートのレイアウトヴァージョンは管理画面のテーマの「HTMLを編集」などから確認できるソースコードの冒頭のhtmlタグに「b:layoutsVersion='3'」が付けば３、「b:version='2'」が付けば２になる。

投稿画像の横並びに影響するのはブログのテンプレートでメインカラムから投稿画像がはみ出さないように横幅（width）か最大の横幅（max-width）がメインカラムの範囲内に指定されているかどうかにある。

レイアウトヴァージョン３は指定されていてレイアウトヴァージョン２は指定されていない。

前者だと投稿画像の横並びは必要なデザインを追加するだけで済むけれども後者だと複数でもはみ出さないくらい小さな投稿画像でなければメインカラムに収めるために横幅を制限する指定も追加しなくてはならない。

Bloggerの公式テーマ以外のテンプレートでも投稿画像がメインカラムからはみ出さないようになっているかどうかで、レイアウトヴァージョン３か２のどちらかの方法が当て嵌まることになる。横並びの方法自体は同じなので、非公式のテーマの投稿画像の横幅の指定について分からない場合は不要でも投稿画像がはみ出さないようにする指定を追加すれば全てのテンプレートで同じ結果が得られるし、または試して必要な方を使うと良いと思う。

2020年9月以降に投稿された画像の横並び

Bloggerの投稿画像の横並びは投稿画面のタイトルの下のメニューの左端で切り替える「HTMLビュー」から投稿画像のソースコードを編集しなくてはならない。

投稿画像の横並びのソースコードの書き方

投稿画面で複数の画像を取り込んだらHTMLビューでそれらのソースコードを横並びのグリッドレイアウトを仕込んだdivタグ、すなわち<div style="display:grid;grid-template-columns:1fr 1fr;">と</div>で囲む。

二つの投稿画像の横並びのソースコードのサンプル

<div style="display:grid;grid-template-columns:1fr 1fr;gap:1em;"><div class="separator" style="clear: both;"><a href="https://1.bp.blogspot.com/-Zf87LsjfbqM/YHPr9dTkZ_I/AAAAAAAAeyQ/l2dRENNTe3Yc_jY8OGTCqSVYxlt_ibcVQCLcBGAsYHQ/s0/red-square.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="1600" data-original-width="1600" src="https://1.bp.blogspot.com/-jvLJ13lBdyU/YHHGfbazeSI/AAAAAAAAexw/pR84hnNQqq0sK4DpBvgVzk9_f05O4vc0gCPcBGAsYHg/s0/sketch1528098506773.png"/></a></div><div class="separator" style="clear: both;"><a href="https://1.bp.blogspot.com/-_0JQvIIR4zk/YHPsFonfZoI/AAAAAAAAeyU/gZTuAQ_R2YsOmSaUFFOqgqCWR7C6CpWoQCLcBGAsYHQ/s0/blue-square.png" style="display: block; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="1600" data-original-width="1600" src="https://1.bp.blogspot.com/-_0JQvIIR4zk/YHPsFonfZoI/AAAAAAAAeyU/gZTuAQ_R2YsOmSaUFFOqgqCWR7C6CpWoQCLcBGAsYHQ/s0/blue-square.png"/></a></div></div>

※太字が追加して記載する部分。

投稿画像のソースコードは何もせず、全体を所定のstyle属性を持ったdivタグで囲むだけで、横並びが可能になる。

サンプルで指定したグリッドレイアウトの説明

divタグにグリッドレイアウトの値を入れたstyle属性を付けて投稿画像の横並びを行っている。

display:grid: グリッドレイアウトを使用する
grid-template-columns:1fr 1fr: 同じ比率で二列を使う
gap:.5em: 半文字分の隙間を空ける

一つ目の「display:grid」はグリッドレイアウトに必須だから削除してはならない。

二つ目の「grid-template-columns:1fr 1fr」は投稿画像の横並びの数を列の数として指定している。値の数が横並びの数に対応している。単位は「fr」がコンテンツが横幅に占める比率で、「1fr 1fr」だと二つがそれぞれの列に等しい占有率を持つ。三つならば「1fr 1fr 1fr」と三つの値で記載する。値の数だけスペースが取られてそこにコンテンツを配置して横並びにできる。

グリッドレイアウトの単位の「fr」は割合の「%」で捉えて二つならば「50% 50%」と指定しても同じ結果になる。

投稿画像を列方向に配置するだけならば「grid-auto-row:column」を使うことができる。数は不問で、コンテンツを横並びにするためのマークアップになる、簡単だけれども投稿画像の数が増えると全て一列に詰められるしかなくてどんどん小さくなるから注意を要する。

四枚の画像に対して「grid-template-columns:1fr 1fr」で二枚の横並びを記載すると余りは行方向に配置されて小さくならずに半分ずつの縦並びになる。

スペースを指定しない「grid-auto-row:column」の場合は二枚の横並びを上下に分けて二つ記載すれば同じ結果になるけれども却って手間は増えることになる。

三つ目の「gap:.5em」はコンテンツの隙間を指定する。くっ付けるならば値を「0」にするか要素と共に削除しても投稿画像の横並びの有無には影響しない。

グリッドレイアウトのその他の指定については以前の画像の横並びの記事でもっと色んなパターンを取り上げている。

投稿画像の位置取りも確定して元のdivタグ（separaterのclassが付いたもの）やaタグのstyle属性（displayとpaddingとtext-alignが指定されたもの）は不要になるので、画像のimgタグとリンクのaタグを囲んでいる開始タグと終了タグの両方を併せて削除しても横並びに支障はない。

メインカラムに横並びの画像を収めるには

テンプレートによって画像の横幅がはみ出すので、横並びのソースコードに加えて画像のimgタグも修正しなくてはならない。

画像をメインカラムに収めるソースコードのサンプル

<div class="separator" style="clear: both;"><a href="https://1.bp.blogspot.com/-Zf87LsjfbqM/YHPr9dTkZ_I/AAAAAAAAeyQ/l2dRENNTe3Yc_jY8OGTCqSVYxlt_ibcVQCLcBGAsYHQ/s0/red-square.png" style="display: block; padding: 1em 0; text-align: center; "><img style="max-width:100%;" alt="" border="0" data-original-height="1600" data-original-width="1600" src="https://1.bp.blogspot.com/-Zf87LsjfbqM/YHPr9dTkZ_I/AAAAAAAAeyQ/l2dRENNTe3Yc_jY8OGTCqSVYxlt_ibcVQCLcBGAsYHQ/s0/red-square.png"/></a></div>

※太字が追加して記載する部分。

幾つかの方法があるけれどもグリッドレイアウトに合わせるならば画像のimgタグに個別に「style="max-width:100%"」を追加するのが良いと思う。全体に追加するdivタグでメインカラムの列が必要なだけ分割されるかぎり、そこに画像を一つずつ横幅一杯まで表示できるのが「style="max-width:100%"」なんだ。投稿画像が大きくてもはみ出さず、小さくても引き延ばされず、元のサイズをなるべく保ちながら横並びでメインカラムに収まるようになる。

その他に「style="width:100%"」ならば大きくてもはみ出さず、小さければスペースを埋めるように引き延ばされる。画像の横幅を直接的に指定する「width="100%"」を追加しても同じ結果になる。

何れのマークアップも横並びに使用する全ての画像に追加しなくてはならない。

2020年9月以前に投稿された画像の横並び

投稿画像の横並びの方法は今と基本的に同じだけれども昔の投稿画像のソースコードはリンクのaタグに「imageanchor="1"」が付いていた。

公式テーマのレイアウトヴァージョン２はそのままでも変わらないから今の方法が全て使えるけど、ただしレイアウトヴァージョン３だと影響を受けるかも知れないから注意を要する。

画像のソースコードの外側のdivタグがないとき――かつて画像を「元のサイズ」で取り込んだ場合に自動的にそうなっていた――複数の画像が続くとモバイルのスマホ／タブレットの表示にかぎり、一枚目と二枚目以降で外側の上の余白に差が付いて横並びの高さが合わなくなる。

グリッドレイアウトに必要ないので、aタグの「imageanchor="1"」を削除すれば今の方法を使える。

もしも残すならば修正するソースコードを連続する複数の画像の二枚目以降のリンクのaタグに新しく記載しなくてはならない。

<a style="margin-top:0;" href="https://1.bp.blogspot.com/-Zf87LsjfbqM/YHPr9dTkZ_I/AAAAAAAAeyQ/l2dRENNTe3Yc_jY8OGTCqSVYxlt_ibcVQCLcBGAsYHQ/s0/red-square.png" imageanchor="1"><img alt="" border="0" data-original-height="1600" data-original-width="1600" src="https://1.bp.blogspot.com/-Zf87LsjfbqM/YHPr9dTkZ_I/AAAAAAAAeyQ/l2dRENNTe3Yc_jY8OGTCqSVYxlt_ibcVQCLcBGAsYHQ/s0/red-square.png"/></a>

またはstyleタグでテンプレートや記事にデザインの変更を指定する場合は「body.item-view .post-body a[imageanchor="1"]+a[imageanchor="1"] {margin-top:0}」というマークアップになる。

画像の横並びはグリッドレイアウトだけではなくてフレックスボックスでも同じようにできる。追加するdivタグのstyle属性の中身は最少で「display:flex」だけで済んでしまう。すると「display:grid」に加えて「grid-template-columns:値」か「grid-auto-flow:column」の二つの指定が欠かせないグリッドレイアウトよりももっと簡単だ。

グリッドレイアウトの利点としては横並びの数を決められるので、併せて縦並びも考慮し易いし、列や行やそれぞれに配置する数を操作できるので、覚えると投稿画像の敷き詰めに幅広く使うことができる。