WordPressで画像を横並びにする方法｜初心者でも崩れず簡単に配置できる手順

はじめに

WordPressで記事や固定ページを作っていると、「画像を2枚並べたい」「商品画像を3つ横並びにしたい」「プロフィール画像と文章を左右に配置したい」と感じる場面がよくあります。

結論から言うと、WordPressで画像を横並びにするなら、初心者はブロックエディターの「ギャラリーブロック」「カラムブロック」「メディアとテキストブロック」を使うのが簡単です。HTMLやCSSを使わなくても、管理画面の操作だけで画像をきれいに並べられます。

この記事では、ワードプレスで画像を横並びにする基本から、崩れにくい配置方法、スマホ表示での注意点、HTML・CSSを使った方法までわかりやすく解説します。

1. WordPressで画像を横並びにする前に知っておきたい基本

1-1. 画像を横並びにしたい場面とは

WordPressで画像を横並びにしたい場面は、主に次のようなケースです。

商品画像を比較して見せたいとき、ビフォーアフター画像を並べたいとき、旅行写真や施工事例を複数枚見せたいとき、プロフィール画像と説明文を並べたいとき、バナー画像を2つ横に配置したいときなどです。

画像を横並びにすると、縦に長くなりすぎるページをすっきり見せられます。また、複数の画像を同時に比較しやすくなるため、読者にとっても見やすいレイアウトになります。

ただし、画像を無理に横並びにすると、スマホで小さく表示されたり、余白が詰まったり、レイアウトが崩れたりすることがあります。横並びにする目的に合わせて、適切なブロックを選ぶことが大切です。

1-2. 初心者はブロックエディターを使うのが最も簡単

WordPressで画像を横並びにする方法はいくつかありますが、初心者におすすめなのはブロックエディターを使う方法です。

WordPressのブロックエディターでは、文章、画像、ギャラリー、カラムなどを「ブロック」として追加し、ページ内に配置できます。公式ドキュメントでも、ブロックエディターではメディアを含むページや投稿を作成し、ブロックでレイアウトを調整できると説明されています。

特に画像の横並びでは、次の3つのブロックを使うと簡単です。

ギャラリーブロックは、複数の画像をまとめて横並びにしたいときに便利です。カラムブロックは、画像ごとにリンクや文章を細かく設定したいときに向いています。メディアとテキストブロックは、画像と文章を左右に並べたいときに使いやすいブロックです。

1-3. 横並びにできる主な方法の比較

WordPressで画像を横並びにする主な方法は、次のとおりです。

単純に写真を2枚、3枚と並べたいだけなら、ギャラリーブロックが最も簡単です。一方で、画像ごとに違うリンクを設定したい、画像の下に説明文を入れたい、バナーを横並びにしたい場合は、カラムブロックのほうが扱いやすくなります。

1-4. 画像だけを並べる場合と画像＋文字を並べる場合の違い

画像だけを横並びにしたい場合は、ギャラリーブロックまたはカラムブロックを使います。

たとえば、写真を2枚並べる、商品画像を3つ並べる、施工事例を一覧のように見せる場合は、画像だけを横並びにする方法で十分です。

一方、画像と文章を横並びにしたい場合は、メディアとテキストブロックやカラムブロックを使います。

たとえば、左に人物写真、右にプロフィール文を入れる場合や、左にサービス画像、右に説明文とボタンを配置する場合は、画像だけでなく文章とのバランスも考える必要があります。

つまり、ワードプレスで画像を横並びにするときは、まず「画像だけを並べたいのか」「画像と文字をセットで並べたいのか」を決めると、使うべきブロックを選びやすくなります。

2. 一番簡単：ギャラリーブロックで画像を横並びにする方法

2-1. ギャラリーブロックを追加する手順

WordPressで複数の画像を横並びにしたい場合、最も簡単なのがギャラリーブロックです。

投稿または固定ページの編集画面を開き、画像を入れたい位置で「＋」ボタンをクリックします。ブロック検索欄に「ギャラリー」と入力し、「ギャラリー」ブロックを選択します。

ギャラリーブロックは、複数の写真を追加して自動的にギャラリーとして配置でき、列数や画像サイズも調整できるブロックです。

追加後は、「アップロード」または「メディアライブラリ」から画像を選びます。すでにWordPressにアップロード済みの画像を使う場合は、メディアライブラリから選択すると簡単です。

2-2. 横並びにしたい画像を複数選択する

ギャラリーブロックを追加したら、横並びにしたい画像を複数選択します。

メディアライブラリを開き、並べたい画像にチェックを入れます。2枚だけ横並びにしたい場合は2枚、3枚並べたい場合は3枚を選択します。選択後、「ギャラリーを作成」または「挿入」をクリックすると、編集画面に画像がまとめて表示されます。

この時点で、WordPress側が自動的に画像を整列してくれます。画像を1枚ずつ手作業で横に並べる必要がないため、初心者でも失敗しにくい方法です。

2-3. カラム数を変更して2列・3列・4列にする

ギャラリーブロックでは、右側の設定パネルからカラム数を変更できます。

2枚の画像を横並びにしたい場合は、カラム数を「2」にします。3枚なら「3」、4枚なら「4」に設定します。カラム数を変更すると、画像の横並び数が変わります。

ただし、画面幅やテーマの設定によっては、指定したカラム数どおりに表示されない場合もあります。特にスマホでは、読みやすさを優先して縦並びや少ない列数になることがあります。

パソコンでは3列、スマホでは1列のように切り替わることは、レスポンシブ対応として一般的です。横並びにならないからといって、必ずしも不具合とは限りません。

2-4. 画像サイズや余白を調整する

ギャラリー画像をきれいに見せるには、画像サイズと余白の調整が重要です。

画像サイズがバラバラだと、横並びにしたときに高さが揃わず、見た目が不安定になります。できるだけ同じ縦横比の画像を使い、必要に応じて事前にトリミングしておきましょう。

ギャラリーブロックの設定では、画像サイズを「サムネイル」「中」「大」「フルサイズ」などから選べる場合があります。表示速度を考えると、必要以上に大きな画像を使うのは避けたほうがよいです。

また、画像同士の余白が狭すぎると窮屈に見えます。テーマやブロック設定で余白を調整できる場合は、少し余白を入れると読みやすくなります。

2-5. キャプションやリンクを設定する方法

ギャラリーブロックでは、画像ごとにキャプションを入れることもできます。

画像の下に短い説明文を入れることで、読者に内容が伝わりやすくなります。たとえば、旅行写真なら場所名、商品画像なら商品名、施工事例なら作業内容を入れるとわかりやすくなります。

また、画像のリンク先を設定できる場合もあります。画像をクリックしたときに拡大表示したい場合はメディアファイルへのリンク、別ページに誘導したい場合はカスタムURLを設定します。

ただし、ギャラリーブロックではテーマやWordPressの設定によって、リンク設定の自由度が異なる場合があります。画像ごとに細かく別々のリンクを設定したい場合は、カラムブロックを使うほうが管理しやすいです。

3. 自由に配置したい場合：カラムブロックで画像を横並びにする方法

3-1. カラムブロックを追加する手順

画像を自由に横並びにしたい場合は、カラムブロックを使います。

投稿または固定ページの編集画面で「＋」ボタンをクリックし、ブロック検索欄に「カラム」と入力します。「カラム」ブロックを選択すると、2カラムや3カラムなどのレイアウトを選べます。

カラムブロックは、画像だけでなく、文章、ボタン、見出しなども一緒に配置できるため、ギャラリーよりも自由度が高い方法です。

3-2. 2カラム・3カラムのレイアウトを選ぶ

カラムブロックを追加すると、最初にレイアウトを選択できます。

画像を2枚横並びにしたい場合は、2カラムを選びます。画像を3枚横並びにしたい場合は、3カラムを選びます。WordPressのカラムブロックでは、カラム数を設定でき、公式ドキュメントでは1〜6列まで設定できると説明されています。

ただし、初心者が使う場合は2カラムまたは3カラムを基本にするのがおすすめです。4列以上にすると、1枚あたりの表示幅が小さくなり、特にスマホやタブレットで見づらくなることがあります。

3-3. 各カラムに画像ブロックを入れる

カラムを作成したら、それぞれのカラム内に画像ブロックを入れます。

左側のカラムをクリックして「＋」ボタンを押し、「画像」ブロックを追加します。画像をアップロードするか、メディアライブラリから選択します。同じように、右側のカラムにも画像ブロックを追加します。

3カラムの場合は、3つのカラムそれぞれに画像ブロックを入れます。これで、画像を横並びに配置できます。

ギャラリーブロックと違い、カラムブロックでは各画像を独立して編集できます。画像ごとにリンク、キャプション、サイズ、代替テキストなどを設定しやすいのがメリットです。

3-4. 画像ごとにサイズ・リンク・説明文を設定する

カラムブロックを使うと、画像ごとに個別の設定ができます。

たとえば、左の画像には商品Aのページへのリンク、右の画像には商品Bのページへのリンクを設定できます。画像の下に段落ブロックを追加すれば、それぞれの説明文も入れられます。

商品比較、サービス比較、バナーリンク、関連記事への誘導などでは、カラムブロックが非常に便利です。

画像ごとにリンクを設定する場合は、画像をクリックし、ツールバーのリンクアイコンからURLを入力します。外部サイトへリンクする場合は、必要に応じて新しいタブで開く設定も確認しましょう。

3-5. バナーや商品画像を横並びに配置するコツ

バナーや商品画像を横並びにするときは、画像のサイズをそろえることが大切です。

たとえば、横長バナーを2つ並べる場合、片方が横長で片方が正方形だと見た目が崩れやすくなります。事前に同じサイズで画像を作成しておくと、横並びにしたときにきれいに揃います。

商品画像の場合は、背景色や余白も揃えると統一感が出ます。画像の下に商品名、価格、ボタンを入れる場合は、各カラム内の構成も同じにすると見やすくなります。

また、カラムの幅を細かく変更しすぎると、スマホ表示で崩れやすくなる場合があります。初心者のうちは、均等幅の2カラムまたは3カラムを使うのがおすすめです。

4. 画像と文章を横並びにする方法

4-1. メディアとテキストブロックを使う方法

画像と文章を横並びにしたい場合は、「メディアとテキスト」ブロックが便利です。

投稿または固定ページの編集画面で「＋」ボタンをクリックし、「メディアとテキスト」と検索します。ブロックを追加すると、片側に画像、もう片側に文章を入れられるレイアウトが表示されます。

左に画像、右に文章を配置したり、逆に左に文章、右に画像を配置したりできます。プロフィール紹介、サービス説明、店舗紹介、講師紹介などに使いやすいブロックです。

4-2. カラムブロックで画像と文章を横並びにする方法

画像と文章を横並びにする方法として、カラムブロックを使う方法もあります。

2カラムを作成し、左のカラムに画像ブロック、右のカラムに見出しや段落ブロックを入れます。これにより、メディアとテキストブロックよりも自由にレイアウトを調整できます。

たとえば、右側に見出し、説明文、ボタン、リストを入れたい場合は、カラムブロックのほうが使いやすいです。

一方で、シンプルに画像と文章を左右に並べるだけなら、メディアとテキストブロックのほうが簡単です。

4-3. 左に画像・右に文章を配置する手順

左に画像、右に文章を配置する基本手順は次のとおりです。

まず、「メディアとテキスト」ブロックを追加します。左側のメディアエリアをクリックし、画像をアップロードまたは選択します。次に、右側のテキストエリアをクリックし、見出しや説明文を入力します。

画像と文章の位置を逆にしたい場合は、ブロックツールバーの配置変更ボタンを使って左右を入れ替えます。

プロフィールで使うなら、左に顔写真、右に名前・肩書き・紹介文を入れると自然です。サービス紹介で使うなら、左にサービス画像、右に特徴や申し込みボタンを入れると、読者が内容を理解しやすくなります。

4-4. スマホ表示で縦並びに切り替える設定

WordPressでは、パソコンでは画像と文章を横並びにし、スマホでは縦並びに切り替える設定が用意されています。

メディアとテキストブロックには、スマホ表示時にメディアとテキストを縦に積み重ねる設定があります。公式ドキュメントでも、モバイルでは左右並びのままだと小さく見えるため、縦に積み重ねる設定が有用だと説明されています。

カラムブロックでも、スマホではカラムを縦に積み重ねる設定が標準的に使われます。公式ドキュメントでは、カラムブロックの「Stack on mobile」が有効な場合、小さい画面では縦並びになると説明されています。

スマホでも無理に横並びを維持すると、画像や文字が小さくなりすぎることがあります。基本的には、スマホでは縦並びに切り替わる設定にしておくほうが読みやすくなります。

4-5. プロフィールやサービス紹介に使いやすい配置例

画像と文章の横並びは、プロフィールやサービス紹介で特に使いやすい配置です。

プロフィールの場合は、左に人物写真、右に名前、肩書き、経歴、SNSリンクを配置します。顔写真と説明文がセットで見えるため、読者に安心感を与えやすくなります。

サービス紹介の場合は、左にサービスのイメージ画像、右にサービス名、特徴、料金、申し込みボタンを配置します。画像で印象を伝え、文章で詳細を説明できるため、読みやすい構成になります。

また、お客様の声や導入事例でも、左に写真、右にコメントを配置すると見やすくなります。画像と文章を横並びにすることで、ページ全体にメリハリを出せます。

5. 画像が横並びにならない・崩れるときの原因と対処法

5-1. スマホで縦並びになるのは不具合ではない

WordPressで画像を横並びにしたのに、スマホで見ると縦並びになることがあります。

これは多くの場合、不具合ではありません。スマホの画面幅はパソコンより狭いため、横並びのままだと画像や文字が小さくなりすぎます。そのため、WordPressやテーマ側で自動的に縦並びに切り替えることがあります。

特にカラムブロックやメディアとテキストブロックでは、スマホ表示で縦並びにする設定が用意されています。読者にとって見やすい表示にするためのレスポンシブ対応だと考えましょう。

5-2. 画像サイズがバラバラで高さが揃わない場合

画像を横並びにしたときに高さが揃わない場合は、画像の縦横比がバラバラになっている可能性があります。

たとえば、1枚は横長、もう1枚は縦長、もう1枚は正方形という状態で横並びにすると、高さが不揃いになります。

対処法は、事前に画像サイズをそろえることです。横並びにする画像は、できるだけ同じ縦横比で作成しましょう。商品画像なら正方形、バナーなら同じ横長サイズ、写真ギャラリーなら同じ比率でトリミングしておくときれいに並びます。

WordPress上で調整するよりも、アップロード前に画像編集ツールでサイズを整えておくほうが、崩れにくくなります。

5-3. テーマやCSSの影響でレイアウトが崩れる場合

WordPressのテーマによっては、ブロックの余白、幅、画像サイズ、ギャラリーの表示方法に独自のCSSが適用されていることがあります。

そのため、別のテーマではきれいに横並びになるのに、現在のテーマでは崩れるということもあります。

まずは、プレビュー画面で表示を確認しましょう。編集画面では崩れて見えても、実際の公開ページでは正しく表示される場合があります。逆に、編集画面ではきれいでも、公開ページで崩れる場合もあります。

テーマが原因だと思われる場合は、テーマのカスタマイズ設定、追加CSS、ブロック設定を確認します。自分で追加したCSSがある場合は、一時的に無効化して表示を確認すると原因を見つけやすくなります。

5-4. 余白や幅の設定で横並びが崩れる場合

画像やカラムに大きな余白を設定していると、横並びに必要な幅が足りなくなり、途中で折り返されることがあります。

たとえば、2カラムのそれぞれに幅50%を設定し、さらに左右に大きな余白を入れると、合計幅が100%を超えてしまい、横並びが崩れる場合があります。

この場合は、余白を小さくする、カラム数を減らす、画像サイズを小さくするなどの調整が必要です。

初心者の場合は、幅を細かく手動設定するよりも、WordPress標準のカラム設定を使うほうが安全です。均等幅のカラムを使い、必要最小限の余白だけを入れると崩れにくくなります。

5-5. ブロックを入れ子にしすぎて表示が乱れる場合

カラムの中にグループブロックを入れ、その中にさらにカラムを入れるなど、ブロックを入れ子にしすぎると表示が乱れることがあります。

複雑な構造にすると、どのブロックに余白や幅が設定されているのかわかりにくくなります。また、スマホ表示で意図しない順番に並んでしまうこともあります。

画像を横並びにするだけなら、ギャラリーブロックまたはシンプルなカラムブロックで十分です。必要以上にブロックを重ねず、できるだけ単純な構造にすると管理しやすくなります。

5-6. WordPress更新後にギャラリー表示が崩れた場合

WordPress本体、テーマ、プラグインの更新後にギャラリー表示が崩れることもあります。

この場合は、まずキャッシュを削除して表示を確認します。キャッシュ系プラグインやブラウザキャッシュが古いCSSを読み込んでいると、表示が崩れて見えることがあります。

次に、テーマやプラグインを一つずつ確認します。直前に更新したテーマやプラグインが原因になっている可能性があります。

また、ブロックエディターの仕様変更やテーマ側の対応状況によって表示が変わることもあります。重要なページで画像を横並びにしている場合は、更新後に必ず表示確認を行いましょう。

6. 画像をきれいに横並びに見せるコツ

6-1. 画像の縦横比をそろえる

画像をきれいに横並びに見せる最大のコツは、縦横比をそろえることです。

横並びにする画像の形がバラバラだと、どれだけブロック設定を調整しても見た目が不安定になります。正方形なら正方形、横長なら横長で統一しましょう。

特に商品一覧やサービス一覧では、画像の縦横比がそろっているだけで、ページ全体が整って見えます。

6-2. 横並びにする画像枚数は2〜3枚を基本にする

初心者は、横並びにする画像枚数を2〜3枚にするのがおすすめです。

4枚以上を横並びにすると、1枚あたりの横幅が狭くなり、画像の内容が見えにくくなります。パソコンでは問題なく見えても、タブレットやスマホでは窮屈に感じることがあります。

写真ギャラリーのように多くの画像を見せたい場合でも、1行あたり2〜3枚を基本にすると、見やすく整ったレイアウトになります。

6-3. 画像の容量を軽くして表示速度を落とさない

画像を複数枚横並びにすると、ページ全体の画像枚数が増えます。画像容量が大きいままだと、ページの読み込み速度が遅くなる可能性があります。

アップロード前に画像を圧縮し、必要以上に大きなサイズの画像を使わないようにしましょう。横幅数千ピクセルの画像をそのまま使うのではなく、表示サイズに合わせてリサイズしておくと安心です。

表示速度は読者の離脱にも関わるため、見た目だけでなく画像容量にも注意しましょう。

6-4. 余白を適度に入れて見やすくする

画像を横並びにするときは、画像同士の間に適度な余白を入れることが大切です。

余白がまったくないと、画像同士が詰まって見えます。一方で、余白が広すぎると、横並びの一体感がなくなります。

カラムブロックやギャラリーブロックの設定、テーマの余白設定を確認しながら、自然に見える間隔に調整しましょう。迷った場合は、まずWordPress標準の余白設定のまま使い、必要に応じて微調整するのがおすすめです。

6-5. スマホ表示を必ずプレビューで確認する

WordPressで画像を横並びにしたら、必ずスマホ表示をプレビューで確認しましょう。

編集画面ではきれいに横並びになっていても、スマホでは縦並びになったり、画像が小さく表示されたりすることがあります。これはレスポンシブ対応として自然な動作ですが、実際に読みにくくなっていないか確認することが大切です。

特に、画像の下に説明文やボタンを入れている場合は、スマホでの順番や余白も確認しましょう。

6-6. クリック導線を考えてリンクを設定する

横並びにした画像にリンクを設定する場合は、読者が迷わない導線を意識しましょう。

商品画像をクリックしたら商品ページへ、バナー画像をクリックしたら申し込みページへ、プロフィール画像をクリックしたら詳しい紹介ページへ移動するように設定すると自然です。

ただし、すべての画像にリンクを付ければよいわけではありません。クリックできる画像とクリックできない画像が混在していると、読者が混乱することがあります。

リンクを設定する場合は、画像の下に「詳しく見る」「商品ページへ」などのテキストやボタンを入れると、よりわかりやすくなります。

7. 旧エディターやHTML・CSSで画像を横並びにする方法

7-1. クラシックエディターで画像を横並びにする方法

旧エディターであるクラシックエディターを使っている場合も、画像を横並びにすることはできます。

クラシックエディターでは、画像を挿入したあと、配置を「左」「中央」「右」などに設定できます。ただし、画像を複数枚きれいに横並びにするには、HTMLやCSSの調整が必要になる場合があります。

また、クラシックエディターはブロックエディターに比べて、レイアウト調整が直感的ではありません。現在のWordPressで新しく記事を作成するなら、基本的にはブロックエディターを使うほうが簡単です。

7-2. HTMLで画像を横並びにする基本コード

HTMLで画像を横並びにしたい場合は、次のようなコードを使います。

HTML
<div class="image-row">
  <img src="画像URL1" alt="画像1の説明">
  <img src="画像URL2" alt="画像2の説明">
  <img src="画像URL3" alt="画像3の説明">
</div>

このコードだけでは、テーマのCSSによって表示が変わる場合があります。横並びを安定させるには、次のようにCSSも組み合わせます。

CSS
.image-row {
  display: flex;
  gap: 16px;
}

.image-row img {
  width: 33.333%;
  height: auto;
}

このように設定すると、3枚の画像を横並びにできます。

7-3. CSSのflexboxで横並びにする方法

CSSで画像を横並びにする場合は、flexboxを使う方法が一般的です。

CSS
.image-row {
  display: flex;
  gap: 20px;
  justify-content: center;
}

display: flex;を指定すると、子要素である画像が横並びになります。gapを使うと、画像同士の間隔を設定できます。justify-content: center;を指定すると、横方向の配置を中央寄せにできます。

画像を2枚並べる場合は、次のように幅を設定します。

CSS
.image-row img {
  width: 50%;
  height: auto;
}

3枚並べる場合は、幅を約33.333%にします。

CSS
.image-row img {
  width: 33.333%;
  height: auto;
}

7-4. CSSで画像の幅・余白・折り返しを調整する

スマホ表示で画像を折り返したい場合は、flex-wrapを使います。

CSS
.image-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.image-row img {
  width: calc(33.333% - 11px);
  height: auto;
}

スマホでは1列にしたい場合は、メディアクエリを使います。

CSS
@media (max-width: 600px) {
  .image-row img {
    width: 100%;
  }
}

これにより、パソコンでは3枚横並び、スマホでは1枚ずつ縦並びに表示できます。

HTML・CSSを使うと自由度は高くなりますが、コードの書き方を間違えるとレイアウトが崩れることがあります。特にWordPressテーマのCSSと競合する場合があるため、初心者は慎重に扱いましょう。

7-5. 初心者はコード編集よりブロック機能を優先すべき理由

初心者がWordPressで画像を横並びにする場合、基本的にはコード編集よりブロック機能を優先するのがおすすめです。

理由は、ブロック機能なら管理画面上で見た目を確認しながら編集できるからです。ギャラリーブロックやカラムブロックを使えば、HTMLやCSSを書かなくても画像を横並びにできます。

一方、HTML・CSSで調整する方法は、テーマ変更やWordPress更新の影響を受ける場合があります。また、コードを間違えると記事全体の表示が崩れることもあります。

細かいデザイン調整が必要な場合を除き、まずはブロックエディターの標準機能で対応しましょう。

8. 目的別おすすめの横並び方法

8-1. 写真を複数枚並べたいならギャラリーブロック

旅行写真、イベント写真、施工事例、作品集など、複数の写真をまとめて見せたい場合はギャラリーブロックがおすすめです。

画像を複数選ぶだけで自動的に横並びにでき、列数も調整できます。初心者でも扱いやすく、写真一覧をすっきり見せたいときに向いています。

8-2. 画像ごとにリンクを変えたいならカラムブロック

画像ごとに違うリンクを設定したい場合は、カラムブロックがおすすめです。

たとえば、2つのバナーを横並びにして、それぞれ別のページへリンクさせたい場合に便利です。商品画像ごとに商品ページへ誘導したい場合にも使いやすい方法です。

画像の下に説明文やボタンを追加できるため、単なる画像一覧よりも訴求力のあるレイアウトを作れます。

8-3. 画像と文章を並べたいならメディアとテキストブロック

画像と文章を左右に並べたい場合は、メディアとテキストブロックがおすすめです。

左に画像、右に文章を配置するだけで、プロフィール紹介やサービス説明に使いやすいレイアウトが作れます。スマホでは縦並びに切り替えられるため、読みやすさも保ちやすいです。

シンプルに画像と文章を横並びにしたいなら、まずメディアとテキストブロックを試してみましょう。

8-4. 細かくデザイン調整したいならHTML・CSS

余白、幅、折り返し、画像の高さ、ホバー効果などを細かく調整したい場合は、HTML・CSSを使う方法があります。

ただし、コード編集にはある程度の知識が必要です。WordPressテーマのCSSと競合することもあるため、初心者にはやや難しい方法です。

どうしても標準ブロックでは実現できないデザインがある場合のみ、HTML・CSSでの調整を検討しましょう。

8-5. 初心者におすすめの使い分け早見表

迷った場合は、まずギャラリーブロックを使いましょう。画像ごとに個別の設定をしたくなったらカラムブロック、画像と文章を並べたいときはメディアとテキストブロックを選ぶと失敗しにくくなります。

9. WordPressの画像横並びに関するよくある質問

9-1. 画像を2枚だけ横並びにできますか？

はい、できます。

最も簡単なのは、ギャラリーブロックで画像を2枚選び、カラム数を2に設定する方法です。画像ごとに別々のリンクや説明文を設定したい場合は、2カラムのカラムブロックを作成し、それぞれに画像ブロックを入れる方法がおすすめです。

9-2. 画像を3枚・4枚で横並びにできますか？

はい、3枚や4枚でも横並びにできます。

ギャラリーブロックを使えば、カラム数を3列や4列に設定できます。カラムブロックを使う場合も、3カラムや4カラムを作成して、それぞれに画像を入れれば横並びにできます。

ただし、4枚以上を横並びにすると1枚あたりの表示幅が小さくなるため、見やすさを考えると2〜3枚を基本にするのがおすすめです。

9-3. スマホでも横並びのまま表示できますか？

設定やCSSを調整すれば、スマホでも横並びのまま表示できる場合があります。

ただし、スマホで横並びのままにすると、画像が小さくなりすぎて見づらくなることがあります。特に画像と文章を横並びにしている場合、スマホでは縦並びにしたほうが読みやすいです。

基本的には、パソコンでは横並び、スマホでは縦並びになる設定をおすすめします。

9-4. 画像ごとに別々のリンクを設定できますか？

はい、できます。

画像ごとに別々のリンクを設定したい場合は、カラムブロックを使うのがおすすめです。各カラムに画像ブロックを入れ、それぞれの画像に個別のリンクを設定します。

ギャラリーブロックでもリンク設定ができる場合がありますが、画像ごとに細かく管理したい場合はカラムブロックのほうが扱いやすいです。

9-5. プラグインなしで画像を横並びにできますか？

はい、プラグインなしで画像を横並びにできます。

WordPress標準のギャラリーブロック、カラムブロック、メディアとテキストブロックを使えば、追加プラグインなしで画像を横並びにできます。

特別なスライダーや高度なデザインが必要な場合はプラグインを使う選択肢もありますが、通常の横並び配置であれば標準機能だけで十分です。

9-6. 横並びにした画像の高さをそろえるにはどうすればいいですか？

画像の高さをそろえるには、アップロード前に画像の縦横比をそろえるのが最も確実です。

WordPress上で無理に高さを調整するよりも、画像編集ツールで同じサイズにトリミングしてからアップロードしたほうがきれいに揃います。

商品画像なら正方形、バナーなら同じ横長サイズ、写真ギャラリーなら同じ比率で統一すると、横並びにしたときの見た目が安定します。

まとめ

WordPressで画像を横並びにする方法は、目的によって使い分けることが大切です。

複数の写真を簡単に横並びにしたいなら、ギャラリーブロックが最も手軽です。画像ごとにリンクや説明文を設定したい場合は、カラムブロックが向いています。画像と文章を左右に並べたい場合は、メディアとテキストブロックを使うと簡単です。

画像が横並びにならない場合でも、スマホで縦並びになるのは不具合ではなく、読みやすさを保つためのレスポンシブ対応であることが多いです。画像サイズ、縦横比、余白、テーマのCSSなどを確認すれば、多くのレイアウト崩れは改善できます。

初心者は、まずHTMLやCSSを使わず、WordPress標準のブロック機能で画像を横並びにする方法から試してみましょう。ギャラリーブロック、カラムブロック、メディアとテキストブロックを使い分ければ、プラグインなしでも見やすく整った画像レイアウトを作成できます。