WordPressで画像を横並びにする5つの方法【ブロック・HTML・プラグイン対応】(2026年版)

WordPressで画像を横並びにする方法は、大きく5つあります。用途と作業の手軽さで選ぶと迷いません。一番手軽なのは標準のギャラリーブロック、自由度が必要ならカラムブロック、ピクセル単位でこだわるならHTML/CSS、テーマの装飾を活かしたいなら専用ブロック、それでも足りなければプラグインです。

この記事では、それぞれの方法の手順と落とし穴、レスポンシブ対応、Cocoon・SWELLでの注意点、iPhoneで撮った写真を横並びに使うときのリサイズのコツまでまとめました。古いクラシックエディタ前提の解説が多いなか、2026年のブロックエディタを正面から扱います。

なぜWordPressの画像横並びは意外と難しいのか

WordPressに画像を入れて改行すると、デフォルトでは縦に積み上がります。これはHTMLの <p> や <figure> がブロック要素として縦並びになるからです。横並びにするには、(1) 専用のブロックを使う、(2) flexやgridで親要素のレイアウトを変える、のどちらかが必要になります。

さらに厄介なのが、テーマごとに既存CSSが介入してくる点です。SWELLやCocoonのような国産テーマは独自のスタイルでギャラリーを上書きするので、「他のサイトで動いたCSSがコピペで効かない」が普通に起こります。

アップロード自体が詰まる場合は別の問題です。手順以前の話は WordPressで画像がアップロードできない原因8つと対処法 を先に読むと早いです。

方法1: ギャラリーブロック (推奨、最も簡単)

結論から言うと、迷ったらこれです。2〜10枚を横並びにするだけなら、ギャラリーブロックが最速・最安定です。

手順

1. 投稿編集画面で「+」ボタンをクリック
2. 「ギャラリー」を選択
3. 横並びにしたい画像を選んで挿入
4. 右サイドバーの「カラム数」を2〜4で調整 (デフォルトは3)
5. 「画像のクロップ」をオンにすると縦写真と横写真も揃って並ぶ

ギャラリーブロックの強み

• レスポンシブ対応が自動 — スマホで自動的に縦並びに切り替わる (テーマ依存だが、ほとんどの主要テーマで動く)
• 余白とカラム数をブロック設定から数値で変えられる
• クリック時のライトボックス連携がプラグインなしで動くテーマが多い

ギャラリーブロックの弱み

• カラム数は最大8まで。それ以上は不可
• 各画像の幅を個別に指定できない (全て均等)
• テキストや動画を混ぜることはできない (画像専用)

方法2: カラムブロック (任意の幅で並べる)

「2枚並べて左を大きく、右を小さく」のように比率を変えたい時はカラムブロックです。画像以外も入れられるので、画像とテキストを横並びにしたい場合にも使えます。

手順

1. 「+」ボタン → 「カラム」
2. レイアウトを選択 (2カラム均等・50:50、または2カラム不均等・67:33など)
3. 各カラムの「+」をクリックして画像ブロックを挿入
4. サイドバーで各カラムの「幅 (パーセント)」を直接編集

カラムブロックが向いているケース

• 左に画像、右にテキスト (商品紹介、Before/After)
• 3カラムに動画・画像・テキストを混在
• 「2:1」など均等でない比率で並べたい

カラムブロックの注意点

モバイル表示時に縦並びに切り替わるブレークポイントはテーマ依存です。SWELLは768px以下で縦並び、Cocoonは600px前後と、テーマごとに差があるので実機で確認してください。「スマホでも横並びを維持」したい場合は、ブロック設定の「モバイルで縦に並べる」のチェックを外します (テーマによりオプション名が違います)。

方法3: HTML/CSS で flex / grid (上級者向け)

ピクセル単位で詰めたい、装飾を全部自分でやりたい、テーマの装飾を完全に避けたい — そういう時は HTML/CSS で書きます。ブロックエディタなら「カスタムHTML」ブロック、クラシックエディタなら「テキスト」モードに貼り付けます。

flexboxで横並び

<div class="image-row" style="display: flex; gap: 16px; flex-wrap: wrap;">
  <img src="/wp-content/uploads/2026/05/photo1.jpg" alt="写真1" style="width: 33%; height: auto;" />
  <img src="/wp-content/uploads/2026/05/photo2.jpg" alt="写真2" style="width: 33%; height: auto;" />
  <img src="/wp-content/uploads/2026/05/photo3.jpg" alt="写真3" style="width: 33%; height: auto;" />
</div>

display: flex で横並び、gap: 16px で余白、flex-wrap: wrap で画面幅が足りない時に自動で折り返します。

CSS Gridで均等配置

<div class="image-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
  <img src="/wp-content/uploads/2026/05/a.jpg" alt="a" style="width: 100%; height: auto;" />
  <img src="/wp-content/uploads/2026/05/b.jpg" alt="b" style="width: 100%; height: auto;" />
  <img src="/wp-content/uploads/2026/05/c.jpg" alt="c" style="width: 100%; height: auto;" />
</div>

Gridは「3カラム」を repeat(3, 1fr) で書けるので、カラム数を変えたい時の編集が楽です。

スマホで縦並びに切り替える

<style>
.image-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.image-row img {
  width: calc((100% - 32px) / 3);
  height: auto;
}
@media (max-width: 768px) {
  .image-row img {
    width: 100%;
  }
}
</style>

レスポンシブを真面目にやるなら、メディアクエリで768px以下のときに width: 100% に切り替えるのが定番です。

HTML/CSS方式の落とし穴

• テーマが .wp-block-image や figure にCSSを当てている場合、自前のスタイルが効かないことがある
• WordPress 6.x以降のブロックエディタでは、カスタムHTMLが「サニタイズ」で属性を消されることがある (例: style 属性が一部削除)
• 追加CSSは「外観 → カスタマイズ → 追加CSS」に書いた方が再利用しやすい

方法4: テーマ機能・専用ブロックエディタ拡張

使っているテーマに横並び用のブロックが標準装備されている場合があります。標準ブロックより装飾性が高く、テーマの世界観に馴染むのが利点です。

SWELLの場合

SWELLには「カラム」のテーマ拡張版に加え、画像スライダーや FAQブロックなど多数の独自ブロックがあります。横並びレイアウトを多用するなら、SWELL標準のカラム拡張を使う方がレスポンシブ調整がきめ細かくできます。

Cocoonの場合

CocoonはBootstrap風の「2カラム」「3カラム」のショートコードを提供しています。クラシックエディタ時代から続く機能ですが、現在のブロックエディタでも「ショートコード」ブロック内で使えます。

SnowMonkey / Lightning / Astra

これらのテーマは Snow Monkey Blocks や VK Blocks といった独自ブロックパックを提供しています。「3カラム + 画像」や「メディアと文章」を一発で並べられるテンプレートが入っているので、毎回の組み立てが楽になります。

テーマ独自ブロックを使うときの注意

テーマを乗り換えると、独自ブロックは「廃止されたブロック」として警告が出ます。標準ギャラリーブロックは将来のテーマ移行コストが最小です。長く運用する記事ほど標準ブロックで書いた方が後が楽です。

方法5: WPプラグイン (Photo Gallery, Modula等)

標準ブロックでは物足りない、ライトボックスやMasonryレイアウトが欲しい — そういうときはプラグインを使います。

主要プラグインの比較

プラグイン	得意分野	料金
Modula	Masonry・カスタムグリッド・ホバーエフェクト	無料 / 有料 $39〜
Photo Gallery by 10Web	大量画像 (100枚以上) のページ運用	無料 / 有料 $60〜
FooGallery	SEO最適化と速度	無料 / 有料 $59〜
NextGEN Gallery	写真家向け、EXIF表示、スライドショー	無料 / 有料 $79〜

プラグイン導入時の注意

• 無料版でも10〜30枚程度なら十分動く
• 有料機能 (ライトボックスのカスタム・遅延読込・ウォーターマーク) を使わないなら、標準ギャラリーで十分
• プラグインを増やすほど競合リスクが上がる。アップロード失敗の原因にもなる

プラグイン競合でアップロードが落ちる時の切り分け方は WordPressで画像がアップロードできない原因8つと対処法 の原因5にまとめています。

レスポンシブ対応 (スマホで縦並びに切り替える)

PCで横並びにしたら、スマホで読みづらくなるのは典型的な失敗パターンです。2026年は閲覧の7割以上がスマホなので、レスポンシブを最初から仕込んでおきます。

ギャラリーブロックの場合

ほとんどのテーマで自動的にスマホ時のカラム数が1〜2に減ります。テーマによっては「モバイルでは1列」設定がブロック側にあるので、サイドバーの「モバイルレイアウト」を確認してください。

カラムブロックの場合

デフォルトでは768px以下で縦並びになります。スマホでも横並びを維持したい場合 (アイコンを横3つ並べるなど) は、ブロック設定の「モバイルで縦に並べる」のチェックを外します。

HTML/CSSの場合

自前のメディアクエリで768pxまたは600pxを境にレイアウトを切り替えます。3カラム → 2カラム → 1カラムの3段切り替えが見やすいです。

@media (max-width: 1024px) {
  .image-row img { width: calc((100% - 16px) / 2); }
}
@media (max-width: 600px) {
  .image-row img { width: 100%; }
}

iPhoneから横並び画像を素早く用意する方法

横並びに使う画像は、(1) ファイルサイズが揃っていること、(2) 縦横比が同じであることの2点で見栄えが大きく変わります。iPhoneで撮影してすぐWordPressに上げたい場合、毎回PCに転送してリサイズするのは正直しんどいです。

SnapPress はiPhoneからWordPressに写真を一括アップロードするアプリです。横並びギャラリーに使う画像を準備する用途では、こんな使い方がはまります。

• 最大20枚を選択して一気にメディアライブラリへ — 横並びに使う4枚や6枚を一括送信
• 3段階の画質プリセットで自動リサイズ — 「中」を選べばWeb掲載向けの幅1200pxに自動調整。1枚あたりのファイルサイズも揃う
• HEIC → JPEG自動変換 — iPhone標準のHEIC形式をWordPressが受け取れる形式に自動変換
• WordPress REST APIで直接送信 — ブラウザ依存のプラグイン競合を避ける

HEICまわりの詳細は WordPressでHEICがアップロードできない時の対処法 と iPhoneのHEIC写真をWordPressに上げる方法 も合わせてどうぞ。

用途別・選び方の早見表

やりたいこと	おすすめの方法
とにかく2〜4枚を横並びに	方法1: ギャラリーブロック
左右で幅を変えたい (画像+テキスト)	方法2: カラムブロック
ピクセル単位で完全制御	方法3: HTML/CSS
テーマの装飾を活かす	方法4: テーマ独自ブロック
大量画像・Masonry・凝った装飾	方法5: プラグイン
iPhoneから写真を取り回したい	SnapPressで一括アップ → ギャラリーブロック

よくあるトラブル

並べたはずなのに縦に積み上がる

ブラウザキャッシュを疑ってください。Ctrl+Shift+R (Cmd+Shift+R) でハードリロードしてから確認します。テーマCSSが display: block で上書きしている場合は、開発者ツールで該当ルールを特定して、追加CSSで display: flex !important を当てます。

画像の高さがバラバラになる

縦写真と横写真が混ざっているのが原因です。ギャラリーブロックの「画像のクロップ」をオンにするか、アップロード前に同じ縦横比でトリミングしておきます。iPhoneでまとめて正方形クロップするなら標準「写真」アプリの編集機能で一括処理できます。

余白がきつすぎる / 狭すぎる

ギャラリーブロックは「ブロック → スタイル」で余白プリセットが選べます。微調整したい場合は追加CSSで .wp-block-gallery { gap: 12px; } のように上書きします。

横並びにすると画像が小さくなりすぎる

元画像が低解像度だと縮小表示で粗くなります。最低でも幅1200px以上の画像を用意してください。スマホで撮ったオリジナルなら問題ないですが、ネットで拾った画像を流用する場合は注意です。

SWELLのカラムブロックで余白が変

SWELLは独自CSSで .wp-block-columns のgap値を上書きしています。「外観 → カスタマイズ → 追加CSS」で .wp-block-columns { gap: 24px !important; } のように指定すると意図通りになります。

まとめ

横並びは「ギャラリーブロックで足りるならそれで終わり、足りなければカラム、それでも足りなければHTML/CSSかプラグイン」の順で選べば迷いません。複雑にするほど運用コストとテーマ移行コストが上がるので、迷ったらシンプルな方を選ぶのが2026年のWordPress運用の安全策です。

iPhoneから写真を取り回す段階で詰まっている方は、メディアライブラリの整理術を WordPressメディアライブラリの使い方完全ガイド でまとめています。アイキャッチも合わせて整える場合は WordPressアイキャッチ画像のサイズは1200×630pxが基本 もどうぞ。