WordPress Cocoonで画像を2枚横並びに表示する方法｜ギャラリー設定で簡単に実現！

WordPressのCocoonテーマで画像を2枚横に並べたいけど、スマホ表示で崩れてしまう…

そんな悩みを解決する方法を、ギャラリーブロックを使ってわかりやすく解説します。

手順は簡単なのですが、使用頻度が少ないので忘れがちです。

画像を2枚横並びにしたい理由

画像を必ず2枚横並びにする方法を確立したかった理由は、単純に、記事の下書き段階の想定と完成後の見た目が異なるのが嫌だったからです。

方法1：カラムブロック（不採用）

ブロックのカラムを使う方法です。

PC・タブレットでは2つ横に並んでくれるので問題ありません。

しかし、スマホでは縦になってしまっています。

PC・タブレット表示

スマホ表示

PC・スマホの両方で画像を２つ並べたいので、この方法は不採用としました。

方法2：ギャラリーブロック（採用）

ブロックのギャラリーを使うと、PC・タブレット、スマホのすべてで横に並んで表示されます。

また、画面右側「ギャラリー設定」の「カラム」欄で、数字を1-8に変えることにより、横に並ぶ画像の数を変更することができます。

カラム数2の表示

カラムが2の場合の見え方は、PC・タブレットとスマホで相違はありません。

PC・タブレット表示

スマホ表示

カラム数3の表示

カラムが3以上になると、見え方は次のように変わってきます。

見え方を統一させるのであれば、カラムは2までにしておいた方が良さそうです。

PC・タブレット表示

スマホ表示

カラム数8（最大）の表示

PC・タブレット表示

スマホ表示

まとめとおすすめ設定

このように、WordPressのCocoonテーマでは、画像を横並びに表示するにはギャラリーブロックのカラム設定が便利です。

また、スマホでも画像が崩れずに表示されるには、カラム数を2に設定するのがおすすめです。

操作自体はとても簡単なのですが、細かい設定を忘れがちな機能です。