HTMLのみで画像を横並び2列にトリミングして配置する方法

Bloggerで画像をきれいに横並びに配置したいとき、標準機能だけでは少し工夫が必要です。スマホで撮った縦長の写真は何枚もブログに載せると画像だけでスクロールが必要で横並びしたくなりますよね。画像を表形式で並べたり、単に画像サイズを調整するだけでは、縦横比がばらばらになったり、1列に収まりきらなかったりと苦労することも多いと思います。そこで、HTMLのちょっとした工夫で、画像を簡単に2列で横並びにできる方法を紹介します！

HTMLで2列画像レイアウト

HTMLコードの例です。シンプルにdivタグのdisplay: flexを使って横並びにするので、CSSの知識がなくても試しやすい方法です。Bloggerにもそのまま貼り付けられるので、ぜひ一度試してみてくださいね。

試すときに修正するのは赤文字部分だけです。画像1と画像2に表示したい画像のURLを指定します。ほかのサイズ指定部についても解説します。

<div style="display: flex; justify-content: center; margin: auto; max-width: 320px;">
    <a href="画像1" style="width: 45%;margin: 1px;">
        <img src="画像1" style="height: 320px; object-fit: cover; width: 100%;" />
    </a>
    <a href="画像2" style="width: 45%;margin: 1px;">
        <img src="画像2" style="height: 320px; object-fit: cover; width: 100%;" />
    </a>
</div>

親要素の詳細な解説

• display: flex
  このdisplay: flexがポイントです。画像を囲むdivに指定することで、子要素が横並びに並ぶようになります。

• justify-content: center; margin: auto;
  これで全体を中央に配置し、親しみやすい見た目にしています。Bloggerのページ中央に画像が並ぶようになります。

object-fitで縦横比を整える

<img src="画像1" style="height: 320px; object-fit: cover; width: 100%;" />

まず、修正する必要はありませんが、画像の縦横比をきれいに整えるための工夫について説明します。object-fit: coverを使うことで、画像が枠いっぱいにトリミングされるので、高さや幅を指定しても崩れることがありません。画像が縦長や横長でも、中心に配置された状態で枠にぴったり収まります。横幅は100%でheight: 320pxで高さだけ変えてください。スマホの縦で撮った写真ならこのくらいで良いかと思います。

レスポンシブ対応のポイント（max-width/witdth）

<div style="display: flex; justify-content: center; margin: auto; max-width: 320px;">

親要素のmax-width: 320pxは、2枚の画像の合計が320pxまでになります。2つの画像がスマホ画面（576px程度を意識）でも見やすくなるように設定しています。固定値にすることでパソコンで見たときにも拡大しすぎないようにしています。画像によっては幅一杯使い100％でもよいかもしれません。

<a href="画像1" style="width: 45%;margin: 1px;">

画像1枚は画面幅の半分(50%)に余白分を意識して45%に設定しています。marginによって2つの画像の余白ができます。0pxもしくは削除で完全に画像がくっつきます。

まとめ

今回は、HTMLだけでBloggerの画像を簡単に横並び2列に配置する方法を紹介しました。display: flexやobject-fitなどを使えば、誰でも手軽にきれいなレイアウトが作れます。Bloggerの画像配置でお悩みの方は、ぜひこの方法を試してみてくださいね！