こんにちは！まさ(@Masao_Sasaki_ae)です！
「記事中に挿入した画像何枚かが横ならびで表示されている・・・。」
みなさんはこんな経験ありませんか？
編集中はうまく縦並びになっているのに、公開・更新をしてみるとなぜか横ならびに・・・
編集中の記事↓
公開後の記事↓
小さい画像を連続して並べると横幅いっぱいまで並べられてしまうので、今回はそれを解消して縦並びしていく方法をご紹介します！
サムネでネタバレしていたかもですが、結論から言うと<img>タグの間に<br>タグを挟むだけです。笑
これから解説していくので、まだわからなくても大丈夫です！（笑）
横ならびになる画像を縦にする方法
編集画面をテキストエディタに切り替えて画像と画像の間に<br>を追加します。
冒頭の画像を参考に手順を説明します。
編集画面のビジュアルエディタでは、参考画像に収まっていませんが画像が3枚縦に並んでいる状態です。
この部分のテキストエディタを見てみると以下のようになっています。
<img class=”wp-image-825 size-medium” src=”https://aff-blog.com/wp-content/uploads/2020/05/IMG_5169-139×300.jpg” alt=”” width=”139″ height=”300″ />
<img class=”wp-image-829 size-medium” src=”https://aff-blog.com/wp-content/uploads/2020/05/IMG_5170-139×300.jpg” alt=”” width=”139″ height=”300″ />
<img class=”alignnone size-medium wp-image-826″ src=”https://aff-blog.com/wp-content/uploads/2020/05/IMG_5171-139×300.jpg” alt=”” width=”139″ height=”300″ />
各段落の頭に <img ~~~ /> とあり、それ以降は人によって違うと思いますが、これが画像ファイルを意味していて、それが3つあるので、画像が3枚あるという解釈です。
この3つの <img ~~~ /> の間に<br>を挿入するだけです。
つまり上記のコードだとこうなります。
<img class=”wp-image-825 size-medium” src=”https://aff-blog.com/wp-content/uploads/2020/05/IMG_5169-139×300.jpg” alt=”” width=”139″ height=”300″ />
<br>
<img class=”wp-image-829 size-medium” src=”https://aff-blog.com/wp-content/uploads/2020/05/IMG_5170-139×300.jpg” alt=”” width=”139″ height=”300″ />
<br>
<img class=”alignnone size-medium wp-image-826″ src=”https://aff-blog.com/wp-content/uploads/2020/05/IMG_5171-139×300.jpg” alt=”” width=”139″ height=”300″ />
ちょっと2枚目の画像がほぼ見切れていてわかりづらいんですが、確かに縦方向に並んでいます（笑）
ちなみに<br>の挿入場所は <img ~~~ /> と <img ~~~ /> の間ならどこでも大丈夫です。
大事なのは、連続する2枚の画像の間に入れるということです！
2枚の連続する画像なら<br>は１個、3枚の連続する画像なら<br>は２個必要ということですね！
場合によっては1枚目は単独、2枚目3枚目は横ならびにしたいというなら、1枚目と2枚目の間だけ<br>を入れて、2枚目と3枚目の間はそのままにすることで可能となります。
注意点として、<br>は必ずテキストエディタの方で追加します！
そもそもテキストエディタでないとコードが表示されていませんが、ビジュアルエディタの方で画像の間に<br>を入れても意味がありません。
もう一つのやり方としては、画像を大きいサイズ、もしくはフルサイズに変更することで、縦向きに並ぶようになります。
しかし、これは一時凌ぎにすぎないですし、見た目は縦並びになるかもしれませんが、裏側では横ならびのままです。
画像サイズもケースバイケースだと思いますので、小さい画像でも縦向きにできるようにしておけば、ある意味画像の配置は自由自在となります。
この先は余談になるので、もっと詳しく知りたい方はどうぞ！笑
画像がなぜ横に並んでしまうのか？
WordPressの編集画面ではビジュアルエディタとテキストエディタがあるのですが、ビジュアルエディタについてはその名の通り、HTMLコーディングみたいな難しい技術がなくても、誰でも直感的に記事を書けるようにしたものです。
対してテキストエディタはHTMLテキストがそのまま書かれているので、文字をちょっと装飾したり、画像サイズを変更したり、YouTubeやTwitterを埋めたりする時に使用されます。
そして、先ほどお話しした <img ~~~ /> はimgタグと呼ばれるものです。
タグは他に、見出しを表す<h1>~<h6>hタグ、リンクを入れる時の<a ~~~ />aタグ、文字を装飾するのに使われる<span>、リストを作る時の<ul><li>などがあります。
これらはHTMLタグと呼ばれるもので、上に挙げた以外にまだまだあります。
一口にHTMLタグと言っても、中身は「ブロック要素」「インライン要素」の2種類に分けられます。
また「インライン要素」の中には「空要素」と呼ばれる特殊なHTMLタグも存在します。
ちなみに今回の<br>タグはインライン要素の空要素です。
まだ分からなくても大丈夫です（笑）
まずは「ブロック要素」と「インライン要素」のうちのブロック要素から説明していきます。
ブロック要素
- <h1>~<h6>
- <p>
- <ul>
- <li>
- <div>（WordPressのテキストエディタではあまり見かけません。）
これらのHTMLタグはブロック要素と呼ばれるものです。
ブロック要素は記述した順番で縦に並ぶ特徴があります。
例えば
<h2>タイトル</h2>
<p>本文</p>
と記述すると
タイトル
本文
という風に表示されますが、記述方法が横ならびに
<h2>タイトル</h2><p>本文</p>
となっても、結果は
タイトル
本文
という感じに同じになります。（基本的にブロック要素を横に並べるような書き方はされません。）
続いてもう一方のインライン要素についても見ていきます。
インライン要素
- <a>
- <span>
- <strong>
これらはインライン要素と呼ばれ、記述した順で全て横ならびに表示されます。
文字に意味を持たせたり装飾やリンクを繋げる時に用いられます。
例えばインライン要素を縦並びに記述したとしても
<a href=”#”>リンク</a>
<a href=”#”>リンク</a>
<a href=”#”>リンク</a>
結果としては、
リンクリンクリンク
と言った感じに表示がされます。
次に説明する空要素もインライン要素に含まれます。
空要素
- <img>
- <br>
- <input>
空要素はインライン要素に含まれます。
なので、もうお気づきかもしれませんが、今回の<img>はインライン要素（空要素）になるので、縦に記述しても横に並んで表示されてしまうということになります。
上記<a>タグと同じ解釈で、
<img>
<img>
<img>
と縦並びに記述しても、インライン要素なので結果としては
[画像][画像][画像]
と、横に並んでしまうことになります。
そこで、メインの部分でお伝えした<br>タグを挟むという方法になります。
この<br>というのは「改行」を意味するタグなので、<img>と<img>の間に<br>（改行）を挟むことで縦に並んで表示されるという仕組みです。
ちなみに空要素と、その他の要素の違いは終了タグというタグが必要がどうかというところにあります。
- <h1>が開始タグなら、終了タグは</h1>
- <div>→</div>
- <a>→</a>
- <strong>→</strong>
と言う感じで、開始タグと終了タグを使って本文を挟む形になるのですが、空要素に関しては開始タグのみで終了タグは不要と言うことになります。
つまり<br>タグは空要素なので終了タグは必要ないと言うことになります。
まとめ
冒頭では
“結論から言うと<img>タグの間に<br>タグを挟むだけです。”
と言う風に結論付けましたが意味はわかっていただけましたでしょうか？
私自身、最近HTMLやCSSの勉強をするようになって、初めて今回のような気づきを得ることができました。
これからも勉強していく過程でこのような小技やWordPressのカスタマイズなど、気付いたら随時発信していこうと思います^^
この記事が参考になりましたら、記事のシェアやTwitterのフォローをしていただけると嬉しいです。
