MENU

運営中のサブブログ

主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。

マンニメバナー画像

趣味の1つ漫画アニメについて書いています。
鬼滅のレビューはコメント600件以上きました。

カゲオ
サイト管理人
当ブログはWordPressが今より楽しく、便利になるをテーマに分かりやすい解説記事を心がけています。
サブブログ|デスク環境構築サイト運営中⇒見てみる

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

当ページのリンクには広告が含まれています。
WordPress画像を横並びにする方法

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

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

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

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

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

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

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

まで横並びにできます。

目次

管理人のデスク環境ブログも運営中です

在宅作業の参考になるアイテムがあるかもしれません。
デスク周りのアップデートを検討されている方はぜひ覗いてみてください。

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

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

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

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

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

カゲオ

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

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

WordPressクラシックエディタのギャラリー作成

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

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

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

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

WordPressカラムブロック呼び出し

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

WordPressカラムブロックに画像ブロックを挿入

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

WordPress画像ブロックをメディアライブラリから挿入

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

WordPress画像ブロックキャプション設定

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

WordPressカラムブロックモバイル設定

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

WordPressカラムブロック警告

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

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

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

WordPress同期パターン

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

WordPress同期パターンステータス設定

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

WordPressパターン同期作成方法

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

WordPress3カラム画像ブロック呼び出し

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

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

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

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

正方形の画像を使う

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

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

✕ 長方形3カラム

Contact Form7デザイン
Contact Form7エラーメッセージ設定
Contact Form7タグの使い方

◯ 正方形3カラム

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

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

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

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

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

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

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

ブロックエディタからのギャラリーは、スマホ表示だと強制的に2カラムになるため、偶数でギャラリーを並べるとパソコン、スマホどちらもバランス良く並びます。

ただしこの方法は、スマホ側は2列に固定されます。

WordPress画像の並びデバイス切り替え

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

デバイス切り替えを行う

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

WordPressのstyle.css設定

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

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

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

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

WordPress画像のデバイス制限

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

WordPress高度な設定追加CSS

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

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

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

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

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

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

SWELLデバイス制限

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

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

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

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

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

WordPress画像を横並びにする方法

この記事が気に入ったら
フォローしてね!

シェアしていただけると励みになります
  • URLをコピーしました!

記事への質問等はこちらからどうぞ

この記事へのコメント数 (4件)

  • はじめまして。
    スマホで画像を横並びに表示させる方法を知りたくて、ここにたどりつきました。

    このサイトの画像で表示されているように、
    パソコンでみてもスマホでみても、画像が5枚程度横に並べられる形にしたいのですが、
    いろいろ試しても、パソコンよりも、横の枚数が減ってしまいます。

    なにか方法を知っていますでしょうか?

    • りんこ様

      確認しました所、スマホでも5枚並んでいます。

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

  • 返答ありがとうございます。
    この記事に書いたある通りにやっても、
    スマホでは、横2枚になってしまいます。

    diverというテンプレートを使っているからなのでしょうか?

    • りんこ様

      送っていただいたページに関しては、私の環境(iPhone)で確認した所、5つ並んでおりました。
      またテーマによって、独自のコードが割当られている場合もありますので、その可能性もあります。

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

コメントフォーム

※日本語が含まれない内容は投稿できません。

目次