wordpressで画像を横並び表示にする簡単な方法。プラグインいらず。

この２つの画像、横並びにできないかな？

という人のために長年wordpressでブログ記事を書いてきたブログ管理人シエン（@85uruta）が、画像を横に並べる方法を紹介します。

この記事を読んでいただくと、

プラグインなしで画像を横並びにする方法
横に並んだ画像の間に余白を作る方法

などが分かりますよ。

ブログを更新していると、画像を横に並べたいなっていうときがあるでしょう。

とくに、スマホの画面をキャプチャすると縦に長くなるので画像を横に並べて表示させたくなる時があります。

（ちなみにスマホで撮影した写真・画像を使ってＰＣからブログ更新するならgoogleフォトを使うと圧倒的に便利です。）

縦に長くて横幅が狭い画像で、さらに二つの画像を比較したいときは、画像を横に並べたほうが閲覧者に分かりやすくなりますよね。

以下はwordpressの場合です。他の無料ブログなどでもHTMLがカスタマイズできるならOKでしょう。

cssのdisplay:inline-blockで画像を並べることができる
横並びになった画像や写真の間に余白を作るには
スマートフォンの画面でも画像を横並びにする簡単な方法
各種スマホの画面サイズで、どのように表示されるか確認する方法

cssのdisplay:inline-blockで画像を並べることができる

簡単に画像を横並びにするには、

<div style=”display:inline-block;”>
【画像のhtmlタグ】【画像のhtmlタグ】
</div>

というふうにするだけでOKです。

このタグで画像部分を囲むだけで複数の画像が横並びになります。

横に並びきらない場合は、自動で縦に並びます。

wordpressの場合、投稿画面の「コードエディター」のほうで
< div style=”display:inline-block;”>
【画像のhtmlタグ】【画像のhtmlタグ】
< /div>
を記述するようにします。

wordpressの投稿画面の「コードエディター」は、

右上にある縦に「・」が３つ並んだところ

をクリックすると出てくるメニューにあります。

ここですね。

気を付けたいのが、
<div style=”display:inline-block;”>
【画像のhtmlタグ】
【画像のhtmlタグ】
< /div>
というふうに二つの画像のHTMLタグを改行してしまうと、画像が横並びになりません。

縦に並んだままになってしまいます。

なぜかというと、
wordpressの投稿画面の「テキスト」で
<img src=”○○○”>
<img src=”○○○”>
というふうに入力した状態になると自動的に<br />が挿入されて改行されてしまうからです。 <img src=”○○○”>【ここに自動で<br />が挿入される】
<img src=”○○○”>

ですので、
<img src=”○○○”><img src=”○○○”>
というふうに改行しないようにして記述しないといけません。

（2020年6月6日追記）
wordpressのバージョンアップによりコードエディター内で改行しても<br>は入らなくなったようです。