こんにちは！今日はWordPressのブロックエディター（Gutenberg）で、画像を複数枚並べて表示する方法についてお話しします。
クラシックエディターを使っていた頃は、画像をポンポン並べられたのに、ブロックエディターに変わってから「あれ？画像が一枚ずつしか入らない…」って困ったことありませんか？私も最初は「これどうやるんだろう？」って結構悩みました（笑）。でも大丈夫です！ちゃんと方法があるんですよ。
この記事のポイント
- 画像ﾌﾞﾛｯｸでは1枚ずつしか入らないが、ｷﾞｬﾗﾘｰﾌﾞﾛｯｸなら複数枚OK
- ギャラリーブロックの使い方は思ったより簡単
- 横並び枚数やサイズも自由に調整できる
まずはこれ！ギャラリーブロックを使えば解決します
結論から言っちゃいますね。画像を横並びや複数表示させたいなら、「ギャラリー」ブロックを使いましょう！
これだけで問題解決です。画像ブロックは基本的に1枚の画像専用なんですよね。だから複数枚入れたいときは、最初からギャラリーブロックを選べばOKってわけです。
私も最初は「なんで画像ブロックに2枚目が追加できないんだ！」ってイライラしてましたけど、よく考えたら用途によってブロックが分かれてるだけだったんですよね。
なぜギャラリーブロックなのか？
画像ブロックとギャラリーブロックの違い
WordPressのブロックエディターには、画像関連のブロックが複数あります。ちょっと整理してみましょう。
画像ブロックは、1枚の画像をしっかり見せたいときに使います。商品写真とか、メインビジュアルとか。サイズ調整やキャプション（説明文）も付けられて便利なんですけど、あくまで「1枚専用」なんです。
一方、ギャラリーブロックは複数の画像をまとめて表示するためのもの。旅行の写真とか、商品のバリエーションとか、ビフォーアフターとか。そういう「複数枚見せたい！」ってときに使うブロックなんですね。
ギャラリーブロックの便利なところ
ギャラリーブロックって、ただ画像を並べるだけじゃないんです。こんなこともできちゃいます。
- 横に何枚並べるか自由に設定できる
- 画像同士の間隔（余白）も調整可能
- 全部の画像を同じサイズに揃えられる
- 各画像にキャプションも付けられる
正直、めんどくさいときは全部デフォルト設定で使うこともあります（笑）。でも細かく調整したいときにちゃんと対応できるのが嬉しいポイントですよね。
ギャラリーブロックの使い方を解説！
では実際の手順を見ていきましょう。思ってるより簡単ですよ！
ステップ1：ギャラリーブロックを追加する
まず、記事編集画面で「+」マークをクリックします。そこから「ギャラリー」を探してクリック。検索ボックスに「ギャラリー」って打ち込めば、すぐ見つかります。
もし見つけにくかったら「すべて表示」を押してから、「メディア」カテゴリーを見てみてください。そこにありますから！
ステップ2：画像をアップロードまたは選択
ギャラリーブロックを追加すると、3つの選択肢が出てきます。
- アップロード：パソコンから新しく画像を入れる
- メディアライブラリ：すでにWordPressに入ってる画像から選ぶ
- URLから挿入：ﾈｯﾄ上の画像のｱﾄﾞﾚｽを入力する（あんまり使わないかも）
メディアライブラリから選ぶ場合は、複数の画像を一気に選べます。どうやらクリックした順に並べられるようですね。
選んだら「ギャラリーを作成」ボタンを押すだけです！
ステップ3：並び方や設定を調整する
画像を入れたら、右側のサイドバーで細かい設定ができます。
カラム数っていうのが、横に何枚並べるかの設定です。2にすれば2枚並び、3にすれば3枚並び。ここを変えるだけで印象がガラッと変わりますよ。
スマホで見たときのことを考えると、2〜3枚くらいがちょうどいい感じですかね。あんまり多くすると、スマホだと画像が小さくなりすぎちゃうので。
メリット・デメリットを正直に言うと
メリット
1. 見た目がスッキリまとまる
複数の画像がキレイに整列するので、プロっぽい仕上がりになります。バラバラに画像ブロックを並べるより、断然見やすいです。
2. 管理がラク
ギャラリーブロック1つで複数画像を管理できるので、後から編集するときも便利。「あの画像どこだっけ？」って探し回らなくて済みます。
3. レスポンシブ対応が自動
スマホやタブレットで見たときに、自動的にいい感じのサイズに調整してくれます。これ地味に助かるんですよね。
デメリット
1. 画像ごとの細かい設定はしにくい
1枚1枚に違う装飾をしたいときは、ちょっと不便かもしれません。ギャラリー全体での設定になっちゃうので。
2. 最初は慣れが必要
画像ブロックに慣れてると「なんか違う…」って感じるかも。でも2〜3回使えば、すぐ慣れますよ。私も最初は戸惑いましたけど、今じゃ当たり前のように使ってます。
3. 画像サイズがバラバラだと微妙
元の画像の縦横比がバラバラだと、並べたときにちょっと不揃いに見えることも。気になる人は、事前に画像サイズを揃えておくといいかもしれません（でも私はそこまでやらないことも多いです、正直）。
実際の使い方例を紹介
例1：商品紹介で使う場合
たとえば「この商品にはこんな色があります！」って紹介したいとき。赤、青、黄色の3色展開なら、3枚の商品画像を横並びにすると分かりやすいですよね。
この場合、カラム数を「3」に設定。それぞれの画像にキャプションで「レッド」「ブルー」「イエロー」って書いておけば完璧です。
例2：ビフォーアフターを見せる
「こんなに変わりました！」っていうの、説得力ありますよね。before・afterの画像を2枚並べて表示。カラム数は「2」で、左右にスッキリ配置。
これだけで「おお！」って思ってもらえる記事になります。
例3：手順を画像で説明
料理のレシピとか、何かの作り方を説明するとき。工程ごとの写真を4枚並べたりすると、すごく分かりやすくなります。
文章だけで「次に〇〇して…」って説明するより、画像で見せた方が圧倒的に伝わりますからね。
ギャラリーを使うときのコツ
- DELキーをうまく使う
間違って1つだけしかアップしなかった場合、画像をクリックしてDELキーを押すとやり直すことができます。 - CTRLキーを有効活用する
アップロードで画像をアップする際には、CTRLキーを押しながら選択していくと、複数枚一気にアップすることができます。 - 入れ替えはD&Dで
ギャラリー化した後の画像の入れ替えは、ドラッグ＆ドロップ（D&D）で行うことができます。
最後に
WordPressのブロックエディターで画像を複数枚並べるなら、ギャラリーブロックを使えば簡単に解決します！
最初は「えっ、画像ブロックじゃダメなの？」って戸惑うかもしれませんけど、慣れちゃえばこっちの方が便利だって気づくはずです。私も今ではギャラリーブロックなしでは記事が書けないくらい愛用してます（笑）。
横並びの枚数や間隔も自由に調整できるので、あなたの記事に合った見せ方ができますよ。ぜひ一度試してみてください！
「思ったより簡単じゃん！」って思ってもらえたら嬉しいです。それでは、良いブログライフを〜！
ではでは、参考までに
コメント