この記事ではワードプレスで記事の中に画像を横並びに表示させる方法を紹介します。ブロックエディターとクラシックエディター両方でやってみますよ。
- ブロックエディターで画像を横並びにする方法
- クラシックエディターで画像を横並びにする方法
画像を横並びにするのに困ったら参考にしてみてください。
ブロックエディターで画像を横並びにする
まずはブロックエディターを使っている場合の画像横並び方法です。ブロックエディターはこういうやつですね。
ブロックエディター
最近ワードプレスを始めたなら大体の人はブロックエディターなんじゃないかなと思います。
ギャラリーを使って画像を横並びにする
ギャラリーを使えば簡単に画像を横並びにすることができます。
ギャラリーが表示されたら、アップロードしてからでもメディアライブラリからでも画像を挿入できます。
ちなみにここに直接画像をドラッグ&ドロップしてもアップロードされて表示されます。表示するとこんな感じですね。
画像の下の部分をクリックするとキャプションを入れることができます。
ちなみに2枚を横並びにするとこんな感じで大きさも調整されます。
ギャラリーを使えば画像を選択するだけで横並びにできるからかなり楽です。ブロックエディターを使っていて横並びにしたい時には活用していくといいですね。
カラムを使って画像を横並びにする
ギャラリーを使って4枚以上の画像とかを並べたい時とかは並べられないんじゃないかなと思います。
ただカラムを使うことで多くの画像をおしゃれに並べることができます。
絡むを選択したら分割の割合を選ぶことができるんだけど、50/50にしてみます。
すると2つ+ボタンが表示されるので、それぞれにギャラリーを設定して画像を入れてみましょう。
3枚ずつ入れるとこんな感じになりました。
カラムの分割パターンを変えると色々変わったレイアウトになって面白いです。
好みのレイアウトになるように色々試してみてください。
クラシックエディターで画像を横並びにする
クラシックエディターで画像を横並びにする場合です。ちなみにクラシックエディターっていうのはこういうやつです。
クラシックエディター
メディアを追加から複数枚追加する
メディアを追加から画像を複数選んで追加します。
画像のサイズは中、配置はなしにしておきます。
これでやってみるとこんな感じで画像が横並びになります。
- サイズは中にする（画像サイズにもよる）
- 配置はなしにする
クラシックエディターの場合はブロックエディターのギャラリーのように自動でサイズを調整してくれるっていうわけじゃないからちょっとやりづらいですよね。
この記事はクラシックエディターで書いているんだけど、ブロックエディターのギャラリーかなり便利だなあ・・・と思います。
HTMLを編集してサイズを調整する
画像を挿入してサイズが気に入らなかったら、テキストからHTMLを編集することでサイズを調整できます。
imgタグのwidthとheightが大きさだから、この値を調整すれば好きなサイズにすることができますよ。
まとめ
ワードプレスで画像を横並びにする方法を見てみたけど、まとめるとこんな感じです。
- ブロックエディターならギャラリーを使う（カラムを使う手もある）
- クラシックエディターならメディアを追加から「配置なし」で挿入する
画像を横並びにして見栄えの良い記事にしてしまいましょう。