WordPressで画像を横並びにする方法｜クラシックエディタも対応

先日読者さんから以下の質問を頂きました。

ストークカスタマイズの記事とても参考になりました！ありがとうございます。

スマホで画像を2カラム表示する方法なのですが、サイトで3カラム表示もしたいのですがどうしてもできないので、カスタマイズ方法を教えていただけますと嬉しいです！

よろしくお願いいたします。

なるほど、スマホでも3カラムにしたいとのことですね。

実はこれ、WordPressの標準機能にあります。

クラシックエディタなら最大9カラム
ブロックエディタなら最大6カラム

まで横並びにできます。

WordPressの画像横並びはギャラリー作成またはカラムブロックから可能

クラシックエディタは、ギャラリー作成だけでパソコン、スマホどちらも最大9カラムまで画像を並べることができます。

ブロックエディタでは、ギャラリーだとスマホは2列までしか並ばない仕様になったため、別のやり方で最大6カラムまで並べることができます。

ここではそれぞれのやり方について解説しました。

どちらもCSSなど特別なカスタマイズは不要です。
WordPressに備わっている標準機能だけで作成できます。

カゲオ

2列並びでよければ、ブロックエディタもギャラリーブロックでOKだよ
その場合は、並べる数が偶数になるようにしよう

クラシックエディタのやり方

①メディアを追加をクリック
②ギャラリーを作成をクリック
③並べたい画像を選ぶ
④ギャラリーを作成をクリック

設定項目	内容
①キャプション名	画像の下にテキストを挿入できる
②-1：リンク先	メディアファイルを選択
②-2：カラム	1〜9カラムから選択
②-3：ランダム	チェックをするとページを リロードするたびに画像がランダムに並ぶ
②-4：サイズ	フルサイズを選択
③順序を逆にする	左右の画像を入れ替えてる ※.ドラッグ操作でも順番の入れ替え可能
④ギャラリーを挿入	選択した画像を投稿画面に挿入する

ブラウザにはこのように表示されます。

ブロックエディタのやり方

投稿画面で”/カラム“と入力し、カラムブロックを選択
3つ画像を並べるなら”33/33/33“、2つなら”50/50“を選択

一つ一つのブロックに”画像ブロック“を挿入する

それぞれの”メディアライブラリ“から並べる画像を選択

⑤”キャプション“を選択することで、画像の下にテキストを入れることも可能
※.ただしカラム表示だと画像とテキストのバランスが難しいため基本は非推奨

⑥”モバイルでは縦に並べる“をOFFにする

一応6カラム以上も設定可能ですが、推奨値より大きいと警告がでますので、最大でも6カラムまでが良いでしょう。

画像の横並びブロックを頻繁に使うなら同期パターンに登録しておこう

テーマにより、サイドバーの名称は異なりますが、ここでは当サイトテーマSWELLを前提に解説します。

①管理画面からパターンをクリック
②新規パターンを追加をクリック

③同期をOFFにする。
④生成をクリック

タイトルはショートカットで呼び出す際に使うため、わかりやすいものにしましょう。
ブロックエディタのやり方で解説したとおりに画像並びブロックを作成してください。
スマホでも同数の並びにするなら、モバイルでは縦に並べるをOFFにする。
公開をクリック。

投稿画面で”/3“と入力すると、先ほど作成した3カラムブロックを一発で呼び出せます。

画像をキレイに並べるコツ

画像サイズはすべて揃える

画像サイズがバラバラの例

正方形の画像を使う

スマホ表示も考慮すると”長方形“よりも”正方形“のほうがバランスは良いと思います。
というより、長方形だとかなり小さくなってしまうので。

以下の画像をスマホから確認してみてください。

✕ 長方形3カラム

◯ 正方形3カラム

画像拡大プラグインを導入

スマホで3カラム以上表示させるなら、画像を拡大できるようにしてあげると親切です。

こちらのプラグインEasy FancyBoxがおすすめです。

設定方法はこちらのサイトを参考にしてください

【画像をふわっと表示】Easy FancyBoxの使い方と設定方法

当サイトテーマSWELLでは、”画像拡大“が標準搭載されています。
※.上記画像はテーマ側の拡大設定です。

またプラグインでは、画像ごとに個別の設定はできませんが、SWELLでは可能です。
興味のある方はデモサイトをご覧ください。

→詳細はこちら

パソコンとスマホで並び数を変える方法

偶数でギャラリーを作成する

例えば、ギャラリーブロックを4カラムに設定すると、パソコンでは4カラム。
スマホでは、2カラム×2に自動調整されます。
6カラム：2カラム×3
8カラム：2カラム×4
と全部で3パターンあります。

デバイス切り替えを行う

デバイス切り替えとは、画面サイズにより”表示“と”非表示“を切り替えることを指します。
ここではブロックエディタを前提に解説しています。

子テーマのstyle.cssに以下を追記します。
管理画面の“外観”→”テーマファイルエディター“
style.cssのデフォルトコードの下に以下をコピペしてください。

あわせて読みたい

Cyberduckの使い方｜WordPressの子テーマを分かりやすく解説

@media(max-width:850px) {
.pc_only{
display: none;
}
}

@media(min-width:851px) {
.sp_only{
display: none;
}
}

画面サイズ850px以下では、パソコン用の画像を非表示に。
画面サイズ851px以上では、スマホ・タブレット用の画像を非表示に設定しています。
※.画面サイズ850pxとは、11インチタブレットの縦向きに当たります。

投稿画面に”パソコン用“と”スマホ・タブレット用“に並べたい画像を2つ用意します。

それぞれのブロックを選択肢し、右サイドバーの”高度な設定“の”追加CSSクラス“に以下を追記します。

パソコン用の画像：pc_only
スマホ・タブレット用の画像：sp_only

＼この画像はパソコン側にだけ表示されています／

＼この画像はスマホ・タブレット側のみ表示されています。／

上の画像をパソコンとスマホ両方から見てみてください。
表示内容が異なるはずです。

ちなみに、デバイス切り替え設定も当サイトテーマSWELLには、標準搭載されています。

右側のサイドバーから選択するだけで、スマホ・タブレット用｜パソコン用の”表示/非表示“を設定できます。

→詳細はこちら

結論：WordPressの画像横並びは標準機能でも十分対応可能

以上、WordPressの標準機能だけで画像を横並びにする方法を解説しました。

画像の横並びだけなら、今回紹介した方法で大抵は解決できるのではないかと思います。

ボタンなどの要素の横並びについては、以下の記事が参考になるかもしれません。

あわせて読みたい

HTMLとCSSで作る｜15種類のSNSアイコンボタン18選