WordPressで画像を横並びにする方法｜カラムで2枚並べる手順とスマホ表示

WordPressで「画像を2枚横並びにしたい」と思っても、どのブロックを使えばいいのか分かりにくいことがあります。

実際にWordPressのブロックエディターで試したところ、標準のカラムブロックを使えば、画像2枚を簡単に横並びにできました。

ただし、PCで横並びにできても、初期設定のままではスマホで縦並びになります。設定を変更すればスマホでも横並びにできますが、画像が小さくなるため読みやすさの確認も必要です。

この記事では、50/50の2カラムを使って画像を横並びにする手順から、PCとスマホで実際に確認した表示の違いまで、WordPressの実画面を使って紹介します。

目次

• WordPressで画像を横並びにするならカラムブロックが簡単
• カラムブロックで画像2枚を横並びにする方法
• スマホでは初期設定で画像が縦並びになる
• スマホでも画像を横並びにする方法
• カラム作業を減らしたいならAIを使う方法もある
• 画像を横並びにするときの注意点
• まとめ｜WordPressの画像横並びはカラムで簡単にできる

WordPressで画像を横並びにするならカラムブロックが簡単

WordPressで画像2枚を横並びにするなら、標準のカラムブロックを使う方法が分かりやすいです。

今回はプラグインやCSSを追加せず、ブロックエディターから「カラム」を選び、50/50の2列にそれぞれ画像を入れる方法を使います。

操作そのものは難しくありませんが、PCとスマホでは初期状態の表示が異なります。まずはPCで画像2枚を横並びにする手順から進めます。

カラムブロックで画像2枚を横並びにする方法

ここからは、WordPressのブロックエディターで画像2枚を50/50のカラムに入れて横並びにする手順を、実際の画面に沿って進めます。

カラムブロックを追加する

まず、画像を横並びにしたい場所で「＋」をクリックして、ブロックを追加します。

ブロックの検索欄に「カラム」と入力し、表示されたカラムブロックを選択します。

50/50の2カラムを選ぶ

カラムブロックを追加するとレイアウト候補が表示されるので、今回は50/50の2カラムを選択します。

これで左右が同じ幅の2列になり、それぞれに画像を入れられる状態になります。

左右のカラムに画像を入れる

左側のカラムに画像ブロックを追加して1枚目を入れ、同じように右側のカラムにも画像ブロックを追加して2枚目を入れます。

今回は左右それぞれに1枚ずつ画像を入れました。特別なCSSなどを追加する必要はありません。

PCで2枚が横並びになったことを確認する

2枚の画像を入れると、PCでは左右に横並びで表示されました。

ここまでで、WordPressで画像2枚を横並びにする基本操作は完了です。

ただし、PCで横並びになっていても、スマホでは同じ表示になるとは限りません。次にスマホで実際にどう表示されるか確認します。

スマホでは初期設定で画像が縦並びになる

PCでは2枚の画像を横並びにできましたが、スマホでは初期設定のままだと縦並びになります。

カラムブロックを選択すると、設定欄に「モバイルでは縦に並べる」という項目があります。今回確認した環境では、この設定は初期状態でONになっていました。

実際にスマホ表示を確認すると、2枚の画像は横並びではなく、1枚ずつ縦に並んで表示されました。

この表示なら1枚あたりの画像を大きく見せやすいため、画像内に文字が多い場合などは、そのまま縦並びにした方が読みやすいこともあります。

一方で、PCと同じようにスマホでも2枚を横並びにしたい場合は、設定を変更できます。

スマホでも画像を横並びにする方法

スマホでも画像2枚を横並びにしたい場合は、カラムブロックの「モバイルでは縦に並べる」をOFFにします。

設定を変更したあとにスマホ表示を確認すると、今回の検証では2枚の画像が横並びになりました。

これで、PCだけでなくスマホでも横並び表示にできます。

ただし、スマホはPCより表示幅が狭いため、横並びにすると1枚あたりの画像が小さくなります。設定を変更したあとは、必ずスマホプレビューで読みやすさも確認してください。

ブロックエディターの操作そのものが難しいと感じる場合は、必要な操作だけに絞って使う方法もあります。

カラム作業を減らしたいならAIを使う方法もある

今回はWordPressで画像を横並びにする手動の方法を紹介しましたが、AIに任せる方法もあります。

ChatGPTなら、指示次第でカラムを含むWordPress用のHTMLを作成できます。Value AI Writerでは、実際の検証で2枚が横並びに見える1枚の画像を作成でき、WordPressへ投稿することも可能です。

ChatGPTには無料版があり、Value AI Writerも無料で試せるので、実際に使って自分に合う方法を選んでみてください。

ChatGPTを使ってWordPressの記事作成や修正を時短する方法は、こちらの記事で詳しく紹介しています。

画像を横並びにするときの注意点

画像を横並びにできても、すべての場面で横並びが見やすいとは限りません。

「横並びにできるか」だけで判断せず、PCとスマホの両方で実際の表示を確認し、画像の内容に合った並べ方を選ぶのがおすすめです。

特に文字入りの図解や説明画像では、横並びにしたことで文字が小さくなっていないか確認してください。

まとめ｜WordPressの画像横並びはカラムで簡単にできる

WordPressで画像2枚を横並びにしたい場合は、標準のカラムブロックを使えば簡単に設定できます。

WordPressの操作を一つずつ覚えるのが負担なら、ChatGPTなどのAIを使って作業を減らす方法もあります。手動とAIの両方を試し、自分が続けやすい方法を選んでください。