サポートに戻る コンテンツとメディア ブロック ギャラリーブロック

ギャラリーブロック

複数の写真を同時に表示するには、ギャラリーブロックを使用します。ギャラリーブロックは、各画像の個別の画像ブロックを印象的に配置します。

動画チュートリアル

ギャラリーブロックを追加する

ギャラリーブロックを追加するには、「+」ブロック挿入アイコンをクリックし、「ギャラリー」を検索します。これをクリックしてブロックを投稿または固定ページに追加します。

💡

キーボードを使用して新しい行に「/gallery」と入力して Enter キーを押すことで、新しいギャラリーブロックをすばやく追加することもできます。

「/gallery」と入力してギャラリーブロックを挿入するプロセスを示す GIF。

ブロックを追加する手順についてはこちらを参照してください。

画像を追加する

ギャラリーブロックを追加する場合、2つの選択肢があります。アップロード画像を選択:

ギャラリーブロックに「アップロード」と「画像を選択」の2つのオプションが表示されます。

「アップロード」では、コンピューターから新規の画像または複数の画像をサイトにアップロードできます。

「画像を選択」では、以前アップロードされたメディアライブラリの画像から選択するか、Google フォトPexels の無料画像ライブラリ、または Openverse から選択できます。

既存のギャラリーに画像を追加する

以下の方法で作成済みのギャラリーに画像を追加できます。

ステップ1:ギャラリーブロックを選択します。ギャラリーブロックを選択する方法はいくつかあります。

ギャラリーブロックで画像をクリックしてから、画像の上にあるツールバーでギャラリー選択アイコンをクリックします。

または、エディターの左上でリスト表示をクリックし、アウトラインからギャラリーブロックを選択します。

ステップ2:ギャラリーブロックの上にあるツールバーで「追加」をクリックし、画像を追加します。

「追加」をクリックしたら、「メディアライブラリを開く」を選択して既にアップロードした画像を追加 (またはフリーメディアオプションにアクセス) するか、「アップロード」を選択して新しい画像をギャラリーにアップロードします。

ブロックツールバー

ブロックをクリックすると次のオプションのツールバーが表示されます。

ギャラリーが選択され、配置オプションが展開されます。
ギャラリーツールバーで幅広と全幅などテーマに応じてさまざまな配置ができます。

ギャラリーブロックのツールバーには以下のオプションがあります。

📌

ブロックの幅を幅広または全幅に変更するオプションが表示されず、お使いのテーマでこれらのオプションがサポートされている場合は、ブロックがグループブロックに追加されている可能性があります。グループブロックの詳細についてはこちらを参照してください。

ブロック設定

ブロックをクリックすると、右のサイドバーに追加のブロック設定が表示されます。サイドバーが表示されない場合、右上の ⚙️ (ギア / 歯車) アイコンをクリックして設定を表示させます。

ブロック設定は右側のサイドバーにあります。
ブロック設定

ギャラリーの画像をクリックすると、ギャラリー内の個別の画像ブロックが選択されます。「ギャラリーブロック」設定に戻るには、次のようないくつかの方法があります。

  1. 画像間の空白のスペースをクリックします。
  2. リスト表示を使用して「ギャラリーブロック」を選択します。
  3. 画面下部のパンくずリストからGalleryを選択します。
エディター画面の下部にパンくずリストが表示され、ギャラリーが矢印で示されます。

「ギャラリーブロック」には以下の設定があります。

カラム

ギャラリーブロックのカラム数を選択できます。

カラム数は1~8まで選択できます。画像と同じ数だけカラムを選択することができるため、4枚の画像を追加する場合は、最大4カラムまで選択できます。最大8カラムに達するまで、画像を追加するごとにこの数は増えていきます。

選択したカラム数に応じて、画像が最適な構成で自動的に配置されます。カラム数を変更しながら、好みの配置にします。

画像を切り抜く

ギャラリー画像を切り抜くかどうかを選択できます。このオプションは、サイズや形の異なる画像がある場合に役立ちます。

ギャラリー内の画像のサイズが多様な場合は、以下のように画像を切り抜くことで画像の外観を統一できます。画像を切り抜かずに同じサイズで画像を表示する場合は、同じサイズの画像ファイルをアップロードします。

画像の切り抜きを使用したギャラリー

画像の切り抜きを使用したギャラリーの例、すべての画像サイズが統一されている。

画像の切り抜きを使用しないギャラリー

画像の切り抜きを使用しないギャラリーの例、画像サイズにバラつきがある。
リンク設定

「ギャラリーブロック」設定には、ギャラリーのリンクに関するオプションが3つあります。

または、ギャラリー内の個別の画像を別のページにリンクできます。以下のステップで、画像をリンクできます。

  1. リンクする画像をクリックします。
  2. 表示されるツールバーで、鎖の輪のようなリンクアイコンをクリックします。リンクアイコンがハイライトされたツールバーの画像
  3. 鉛筆アイコンをクリックしてリンクを編集します。
  4. 画像のリンク先の URL を貼り付けるか、検索ボックスを使用してサイトの公開ページを選択します。
  5. キーボードの Enter キーを押して変更を確定します。

個別の画像のリンク作成の詳細については、「画像ブロックのガイド」をご覧ください。

ギャラリーの画像の順序を変更する

画像は、選択した順番でギャラリーに追加されます。選択するとき、各画像の横に数字が表示されます。この数字は、ギャラリーブロックに表示される画像の順序を示します。

ギャラリー内の画像の順序を変更する方法を示す GIF

ギャラリー画像の順序はギャラリーの作成後にも変更できます。ギャラリー画像をクリックし、左 / 右矢印を使用して画像の順序を変更します。

左 / 右矢印を使用してギャラリーブロックの画像の順序を変更する方法を示す GIF

または、画像をクリックしてツールバーからドラッグオプション (6つの点のようなアイコン) を選択して画像を移動します。

矢印で示された画像ツールバーのドラッグオプション。
ツールバーのドラッグオプションを使用して画像を移動します。

画像をコピー、複製、削除するには、ツールバー右上の3つの点をクリックし、希望のオプションを選択します。

画像ブロックが選択され、「...」をクリックして展開したその他のオプションのうち、「コピー」オプションがハイライトされた画像。
展開されたツールバー設定を使用して画像をコピー、複製、削除する。

画像キャプションを追加する

ギャラリーに画像を追加したら、画像をクリックして「キャプションを追加」エリアをクリックすると各画像にキャプションを付けることができます。

オレンジ色のボックスの中でキャプションボックスがハイライトされているギャラリーブロックの画像。

メディアライブラリの画像にキャプションを入力してから、ギャラリーブロックを追加した場合、ギャラリーブロックには入力したキャプションが表示されます。ただし、ギャラリーブロックを追加した後に、メディアライブラリの画像にキャプションを入力する場合、入力したキャプションはギャラリーブロックに表示されません。そのような場合は、ギャラリーブロックに手動でキャプションを入力するか、ギャラリーブロックを削除してから追加し直して、メディアライブラリのキャプションを適用します。

高度な設定

高度な設定のタブでブロックに CSS クラスを追加することで、カスタム CSS を記述してブロックを好きなようにスタイリングできます。

高度な設定のセクションでブロックに CSS クラスを追加できます。
高度な設定のセクションでブロックに CSS クラスを追加できます。

Copied to clipboard!