【WordPress】画像を横並びに表示！スマホサイトで表の画像が右側にはみ出る時の対処法

WordPressで2枚の画像を横並びに表示したいときは、表（テーブル）を使うのが便利です。

しかしこの方法では、スマホでサイトを見た時に画面の横幅から右側にはみ出してしまうと思います。

今回はその対処法を紹介します。

これで画面の横幅が変わっても縦横比を固定したまま自動的に画像をリサイズしてくれます。

横幅ぴったりの表に画像を組み込む方法

まずはこちらをご覧ください。

PCとスマホで見比べてもらうと分かるんですが、横幅のサイズが違っても画像がリサイズされて横幅いっぱいぴったりに表示されていると思います。

スマホの画面向きを横にしてもジャストサイズに調整されるので試してみてください。

これでスマホで表示した際も、画面右際に並べた画像がはみ出さなくなります。

こちらがが今回使ったコード。

<table style="width: 100%; text-align: center;" cellpadding="1">
<tbody>
<tr style="width: 100%;">
<td style="padding: 1px; width: 50%;"><img class="size-full wp-image-1571 aligncenter" style="width: 100%;" src="画像のパス" alt="画像1" /></td>
<td style="padding: 1px; width: 50%;"><img class="size-full wp-image-1570 aligncenter" style="width: 100%;" src="画像のパス" alt="画像2" /></td>
</tr>
</tbody>
</table>

WordPressに備わっている機能で表を作り、画像を埋め込んだ後にちょっとCSSを付け加えてみました。

実際に使う際はこのコードをコピペし、「画像のパス」と「alt」の値を変えるだけでOKです。（altには簡単な画像の説明のようなものが入ります）

逆に、表を作ってからCSSを同じように追記してもらっても構いません。

また、WordPressは右上にある「ビジュアル」「テキスト」タブから2種類の編集方法が選べますが、直接HTMLコードを記述する際は「テキスト」の編集画面から記述する必要があります。

この点だけ注意してください。

最後に

並べる画像が多すぎると、スマホで見た際画像が小さくなりすぎるので2～３枚が限界かと思います。

WordPressで表に画像を組み込んだ際、レイアウト崩れが気になる人はぜひ使ってみてください。