WordPressで写真を並べる方法｜ギャラリーの追加・順番変更・スマホ確認
複数の写真をギャラリーブロックに追加し、並び順と列数を調整する手順。写真一枚とギャラリー全体の選び分け、切り抜き、拡大表示、説明文まで公式画面で確認できます。
この記事でわかること
複数の写真をまとまった形で載せたいときは、WordPressの「ギャラリー」ブロックを使えます。 この記事では架空の教室紹介を例に、「入口」「教室内」「道具」の三枚を、この順に並べる作業を説明します。
自分で使用できる写真を用意し、パソコンのブロックエディターで作業します。本文の画像はWordPress.org公式の操作画面です。画像中の花などは操作説明用の公式サンプルで、読者が用意する写真ではありません。
1．写真を準備して、掲載するページを開く
まず掲載する三枚を一つのフォルダーにまとめます。ファイル名を「入口」「教室内」「道具」など区別できるものにすると選択しやすくなります。写真に人や個人情報が写っている場合は、掲載してよいものを選びます。
管理画面の「固定ページ」または「投稿」から、写真を入れたいページのタイトルを押します。管理画面の入口や固定ページの作成が不明な場合は、それぞれの手順から進めます。
ファイルが大きすぎる場合や代替テキストの書き方は、画像サイズと代替テキストの整え方で確認できます。公開時の見え方と読み込みやすさを両方見て調整します。
2．「＋」からギャラリーを追加する
写真を入れたい本文の位置で「＋」を押し、検索欄に「ギャラリー」と入力します。候補のギャラリーを選びます。空の段落に /gallery と入力して探す方法もあります。
英語画面では「Gallery」です。一枚用の「画像」ブロックと取り違えないようにします。追加すると、ファイルを選ぶための枠が表示されます。
| 画像内の表示 | 日本語の目印 | 選ぶ場面 |
|---|---|---|
| Upload | アップロード | パソコンにある写真を新しく載せる |
| Media Library | メディアライブラリ | すでにWordPressへ登録した写真を使う |
| Use attached images | 添付画像を使う項目 | この記事では使用しない。表示は版による |
新しく載せる場合は「アップロード」から写真を選択します。メディアライブラリを使う場合は、対象の写真を選び、画面に出るギャラリー作成・挿入のボタンで確定します。画像が本文に並べば次へ進めます。公式ギャラリーガイドで各項目を確認できます。
3．写真一枚を選ぶ操作と、全体を選ぶ操作を分ける
写真の順番を変えるときは一枚を選び、列数を変えるときは全体を選びます。ここを分けると「設定が見つからない」を減らせます。
画像の左端にある「Select parent block: Gallery」は、親のギャラリー全体を選ぶ操作です。写真をクリックしてツールバーを出し、この親ブロックのボタンを使うと全体の設定へ戻れます。
上部のリスト表示から「ギャラリー」を選ぶ方法もあります。一枚の画像しか選ばれていないときに、列数の項目を探し続けないようにします。
4．順番を「入口→教室内→道具」にする
動かしたい写真をクリックし、その写真のツールバーにある移動用の左右の矢印を使います。ドラッグで迷う場合は、一回ずつ矢印で動かすと変化を確かめやすくなります。
並べ替えたら、記事の上から読んだときに「場所へ入る→中を見る→使う物を見る」の順になっているか確認します。操作手順の写真なら、撮った順番ではなく、読み手が作業する順番にするのが一つの方法です。
写真を後から増やす場合は、ギャラリーの「追加」から選びます。
「Open Media Library」は登録済みの写真、「Upload」は新しい写真を選ぶ入口です。既存の写真を残したいのに「置換」へ進んでいないか、ボタン名を見て確認します。
5．全体を選んで列数と切り抜きを調整する
ギャラリー全体を選び、右上の設定ボタンから「ブロック」の設定を開きます。
| 画像内の表示 | 意味 | 確認すること |
|---|---|---|
| Columns | 列数 | まず少ない列数で写真が見える大きさを確かめる |
| Resolution | 画像の解像度 | 必要以上に粗くなっていないか |
| Crop images to fit | 画像をそろえて切り抜く設定 | 顔や看板の文字が切れていないか |
| Randomize order | 並び順をランダムにする設定 | 手順どおりに並べたい場合はオフか |
| Aspect ratio | 縦横比 | 横長・縦長の写真に合っているか |
切り抜きを使うと整って見える一方、元写真の端が見えなくなる場合があります。順番をそろえた説明写真なら、ランダム表示は使わず、公開側の順序も確認します。テーマや版により項目の有無・見た目は異なります。
6．必要なら写真を押して拡大できるようにする
リンク設定の「Enlarge on click」は、クリックで拡大する項目です。利用できる環境なら、細部を見てもらいたい写真に使えます。「添付ファイルのページ」「メディアファイル」は別の動きなので、名前だけで決めず、プレビューで一枚押して確認します。
画像の中に案内文を詰め込むと、スマホでは文字が小さくなります。写真の下には「教室入口。建物の右側から入ります」のようなキャプションを添え、重要な手順は本文にも書きます。代替テキストは写真の役割を伝える短い説明にします。
7．保存後はスマホ幅と実際のスマホで見る
変更を保存してプレビューを開き、最後に公開ページでも確認します。パソコンで三列だから、スマホでも同じ見え方になるとは限りません。
- 三枚とも表示され、意図した順番になっている。
- 写真の主役や説明に必要な文字が切れていない。
- キャプションが、どの写真の説明かわかる。
- 拡大する設定にした場合は押して拡大でき、閉じて本文へ戻れる。
- 写真が読み込まれるまで待ち続ける状態になっていない。
写真の登録段階で止まる場合は画像をアップロードできないときの確認、公開側だけ出ない場合は画像が表示されない原因の確認へ進めます。
公式資料確認日：2026年10月14日。写真の選び方・説明の順序・確認項目は編集部の提案です。掲載画像は公式参考画面の引用です。
出典・確認情報
確認日：2026-10-14 ／ 公式情報の要点と編集部の提案を整理しています。価格・機能・条件は変更される場合があります。
WordPress公式：ギャラリーブロックWordPress公式：ブロック操作WordPress公式：編集画面
