株式会社火燵(こたつ)は、成果や売上にこだわる方のための動画マーケティング会社です。動画コンサルティング・動画制作・WEBマーケティング・動画制作内製化支援ならお任せください。

WordPressで複数の画像を並べて掲載する方法【初心者向け/WordPressの使い方】

その他

みなさまこんにちは。弊社でもウェブサイト制作によく使用しているCMS、WordPressの使い方を何回かに分けてお伝えしております。

今回は、WordPressで複数の画像を掲載する方法をお伝えいたします。

ギャラリーブロックアイコン

複数画像を掲載したいときは、「ギャラリー」ブロックを使用します。

プラスボタンから「ギャラリー」ブロック選択
エディタ画面の「ブロックを追加」から「ギャラリー」ブロック選択
左上のプラスボタンからメニューを開いて「ギャラリー」ブロックを選択
画面左上プラスボタンからメニューを開き「ギャラリー」ブロック選択

アップロード

新しい画像をアップして掲載するなら、「アップロード」を選択しましょう。

  1. 「アップロード」をクリックすると、ファイルの選択画面が表示されます。
    ギャラリーの「アップロード」クリック後の画像選択画面
  2. アップする画像を複数選択し、「開く」をクリックします。
    画像を複数選択
  3. 挿入されました。
    ギャラリー挿入完了

早くて手間がかからないのは、掲載する画像ファイルを複数選択して、エディタにドロップする方法です。

フォルダから直接画像ファイルをWordPressにアップ(アニメーション)

自動的に「ギャラリー」ブロックに変わるので便利です。

メディアライブラリ

すでにWordPressへアップした画像を掲載するなら、「メディアライブラリ」から複数選択します。

メディアライブラリから画像を選択

画像の右上にチェックが入っているのが、選択した画像です。

右上のチェックをクリックで画像の選択を外す

間違えたときは、チェックマークをクリックすれば選択が外れます。

メディアライブラリの代替テキストとキャプションの入力エリア

それぞれの画像には、代替テキストとキャプション(画像の下に表示する説明文)を入力しましょう。キャプションは必要に応じてで構いません。

「ギャラリーを作成」をクリック

選択できたら、右下の「ギャラリーを作成」をクリックしましょう。

選択した画像の確認画面に移動しました。

ギャラリーの編集画面

ここでも画像の代替テキストキャプションを確認できますので、漏れやミスがないか確認しておきましょう。
削除したいなら、画像の右上にある×ボタンをクリックします。
もし追加したい画像があれば「ギャラリーに追加」をクリックして、画像を選択するか、新しい画像をアップロードします。

画像の並びは掲載順です。変えたい時はドロップ&ドラッグで移動できます。

ギャラリーの画像追加と削除、掲載順変更(アニメーション)

完了したら画面右下の「ギャラリーを挿入」をクリックで完了です。

メディアライブラリから画像をギャラリーとして複数挿入する方法(アニメーション)
メディアライブラリからギャラリーを追加

ちなみに、GIFやPNGのアニメーションも入れられます。

アニメーション画像もギャラリーで挿入可能(アニメーション)

「画像」ブロックを追加済みなら、下記の手順で「ギャラリー」ブロックに変換できます。

画像ブロックの追加方法については、こちらのページをご参照ください。
  1. ブロックツールバーの左端にある「画像:ブロックタイプまたはスタイルを変更」アイコンをクリックします。
  2. ギャラリー」を選択します。
    画像ブロックをギャラリーブロックに変換
  3. 変換されました。
    画像ブロックから変換されたギャラリーブロック
画像ブロックをギャラリーブロックに変換(アニメーション)
画像ブロックをギャラリーブロックに変換

複数の「画像」ブロックを選択して、「ギャラリー」ブロックに変換することも可能です。
複数の画像ブロックを選択した後、先程の変換方法と同じく、「画像:ブロックタイプまたはスタイルを変更」アイコンから行います。

複数の画像ブロックをギャラリーブロックに変換(アニメーション)

ギャラリーを挿入できたところで、調整していきましょう。

配置変更メニュー

右寄せ・中央揃え・左寄せに配置を変えられます。

配置変更の様子(アニメーション)

掲載順や差し替えは、挿入後も調節できます。

ギャラリーの掲載順番変更・差し替え・削除・追加

掲載順は、個別の画像をクリックした時、左上に現れる左右の三角矢印で変えられます。
画像の差し替えは右上のペンマークで、削除はその右の×マークです。
画像の追加は一番下の「アップロード」もしくは「メディアライブラリ」から行いましょう。

ギャラリーの編集方法(アニメーション)
ギャラリーの編集方法

メディアライブラリから画像を選択して追加できます。ですが、追加時に他のギャラリー画像が消え、追加した画像だけになる現象が時々起きます(2021年8月現在)。

ギャラリーに画像追加を失敗した例(アニメーション)
ギャラリーの画像追加の失敗例

それを防ぐには、下記の手順で画像を追加しましょう。

  1. 一度、左メニューから「ギャラリーを編集」を選択しておくのをオススメします。
    「ギャラリーに追加」から「ギャラリーを編集」を選択
  2. 左メニューから「ギャラリーを追加」をクリックします。
    「ギャラリーを編集」から「ギャラリーに追加」を選択
  3. 画像を追加しましょう。
    ギャラリーに画像を追加
画像のキャプションとギャラリー全体のキャプション

画像のキャプションも文言を変更できます。
文字装飾もできますが、文字サイズは調節できません。

一番下には、個別の画像のキャプションとは別に、ギャラリーの説明文を入れられます。こちらも、文字装飾のみできます。

テキストの装飾方法

注意していただきたいのは、挿入後の画面では代替テキストを記入できない点です。
画像をドロップして挿入した後、そのまま記事をアップすると、代替テキストが空のままになります。
必ず「メディアライブラリ」から、代替テキストが入っているか確認しておきましょう。

メディアライブラリの代替テキストとキャプションの入力エリア

では、右のメニューバーでいろいろ設定していきます。

ギャラリー設定 カラム数調整

横に何個ずつ画像を配置するか設定します。

ギャラリー設定のカラム数変更(アニメーション)

スマートフォンの場合、テーマや掲載する画像サイズによっては、3カラム以上に設定しても、2列や1列で表示されることがあります。

ウィンドウ幅をスマホサイズに狭める(アニメーション)
画像の切り抜き

サイズや比率が違う画像を並べると、アンバランスになってしまいます。

サイズや比率の違う画像を並べたギャラリー

「画像の切り抜き」は自動的に画像を切り抜いたり、拡大や縮小したりして、タイル状に並ぶよう調整します。

ギャラリー設定の画像の切り抜きオン

ただし写真によっては、変なところが切り抜かれる場合があります。

ギャラリーの画像切り抜きで一部の写真がずれたり収まっていない(アニメーション)
一部画像の切り抜き部分が、被写体からずれたり収まっていない

ギャラリーで掲載する画像の縦横比は、掲載する前に編集して合わせておいたほうが良いでしょう。

リンク先設定

リンク先も設定できますが、画像別にはできません。
URLやサイト内のページの指定もできません。
「添付ファイルのページ」か「メディアファイル」のみです。ちなみに「新規タブで開く」の設定もできません。

リンク先プルダウンメニューオープン
添付ファイルのページ
画像ファイルの説明ページに移動します
メディアファイル
画像単体を開きます
画像サイズ選択ドロップダウンメニュー

画像サイズも選択できますが、自由に変更はできません。

画像サイズ変更プルダウンメニューオープン
  • サムネイル
  • フルサイズ

上記4つのみです。下に行くほど大きなサイズになります。

画像の横にテキストなどを並べたり、画像の上にテキストを被せたり、画像以外の複数ブロックを並べたりする方法もあります。こちらの記事をご覧ください。


以上、複数画像の掲載ができる「ギャラリー」ブロックを解説しました。

その他のブロックについての解説は、WordPressレクチャーからご覧ください。

WordPressレクチャーシリーズ一覧

「その他」の関連記事


新着記事