Blogger で画像を並べる

 Blogger  の「画像の挿入」では，画像は横に並べることができません．そこで，横に並べるテクニックを示します．

画像を横に並べる方法

Blogger で，以下のように画像を並べる方法を示します．

Blogger では，上のように画像を横に並べる手順は，以下のようにします．

1. Blogger のエディターの「HTML ビュー」で以下を記述します．例えば，二枚の画像を横に並べる場合は，

   <div style="display:grid; gap:5px; grid-template-columns:1fr 1fr;">
       
   <!--- ここに画像を挿入する -->
   
   </div>

   とします．「grid-template-columns:1fr 1fr;」で，サイズ 1:1 の二つの画像が並びます．fr は fraction の略です．「grid-template-columns:1fr 1fr 3fr;」とすると，サイズ 1:1:3 になります．「grid-template-columns:200px 300px;」とすることもできますし，px と fr  を組み合わせることもできます．
2. この状態 (HTMLビュー) で，画像を入れる場所にカーソルを移動させます．そして，画像を挿入します．複数の画像を一気に挿入します．
3. 画像を挿入した後は，画像の幅 (width) の調整を行います．調整する部分は，<img alt=… width="xxx" />の部分です．この img タグはかなり長く，その最後の部分です．
4. 必要に応じて，キャプションを追加します．キャプションの追加はエディターの「作成ビュー」で行います．

画像を結合する方法

画像の表示枠を結合することもできます．以下の例は，二行目を結合し，横長にしています．

紅葉のはじまり

並木道

昭和記念公園

このように画像を結合するには，gird-row と grid-column を使います．使い方は，下図の通りです．キャプションがない場合は，<div> に書きます．キャプションを入れると<table>に記載します．

さらに，CSS に「grid-area: 左上行/左上列/右下行/右下列;」を書きます．上の写真では「grid-area: 2/1/3/3」で下の写真では「grid-area: 3/3/4/7」です．

grid-row と grid-column を使ったセルの結合．この例は3行7列のセルがあり，その3行目の3列目から6列目までを結合しまます．