ギャラリー セクション

カスタマイズ可能なレイアウトで画像のギ⁠ャラリ⁠ーを表示します⁠。

最終更新日 2025年2月01日

ブロ⁠ック セクシ⁠ョンに画像ブロ⁠ックを複数追加する代わりに⁠、ギ⁠ャラリ⁠ー セクシ⁠ョンをペ⁠ージに追加して画像のセ⁠ットを印象的なレイアウトで表示します⁠。

ギ⁠ャラリ⁠ー セクシ⁠ョンは⁠、簡単な説明とともに画像を紹介するのに最適です⁠。ボタン付きのテキストを大量に表示する場合など⁠、他の種類のコンテンツと同様の方法で表示する必要がある場合は⁠、自動レイアウト セクシ⁠ョンを使用してください⁠。これらのセクシ⁠ョンの違いについては⁠、「⁠自動レイアウトとギ⁠ャラリ⁠ー セクシ⁠ョン⁠」をご参照ください⁠。

この機能へのアクセス

このガイドはバ⁠ージ⁠ョン7⁠.1用です⁠。バ⁠ージ⁠ョン7⁠.0で同様の効果を得るには⁠、ギ⁠ャラリ⁠ー ペ⁠ージまたはギ⁠ャラリ⁠ー ブロ⁠ックを使用します⁠。

動画を見る

ギ⁠ャラリ⁠ー セクシ⁠ョンを追加する

ギ⁠ャラリ⁠ー セクシ⁠ョンを含む新しいペ⁠ージを作成する方法は以下の通りです⁠。

  1. [⁠ペ⁠ージ⁠] パネルを開き⁠、[⁠+⁠] をクリ⁠ックします⁠。
  2. メニ⁠ュ⁠ーで [⁠ペ⁠ージ レイアウト⁠] をクリ⁠ックし⁠、[⁠ギ⁠ャラリ⁠ー⁠] をクリ⁠ックしてレイアウトを選択します⁠。これは後で変更できます⁠。
  3. ペ⁠ージ タイトルを追加し⁠、Enterを押します⁠。
  4. ペ⁠ージの [⁠編集⁠] をクリ⁠ックします⁠。
  5. 画像アイコンをクリ⁠ックして画像を追加および編集します⁠。
  6. 鉛筆アイコンをクリ⁠ックして⁠、ギ⁠ャラリ⁠ー セクシ⁠ョンのスタイルを設定します⁠。
  7. [⁠保存⁠] をクリ⁠ックして変更を保存し⁠、そのまま編集を続けるか⁠、[⁠終了⁠] をクリ⁠ックしてから [⁠保存⁠] をクリ⁠ックしてエデ⁠ィタ⁠ーを閉じ⁠、変更した内容を公開します⁠。

サイトの既存のペ⁠ージにギ⁠ャラリ⁠ー セクシ⁠ョンを追加することもできます⁠。

  1. ペ⁠ージ上で [⁠編集⁠] をクリ⁠ックします⁠。
  2. 既存のセクシ⁠ョンの上または下にある [⁠セクシ⁠ョンを追加⁠] をクリ⁠ックします⁠。
  3. [⁠画像⁠] をクリ⁠ックし⁠、右上隅にiバ⁠ッジが付いたレイアウトを選択します⁠。

ギ⁠ャラリ⁠ー セクシ⁠ョンがペ⁠ージの最初のセクシ⁠ョンである場合⁠、サイト ヘ⁠ッダ⁠ーの表示に影響する可能性があります⁠。詳細については⁠、「⁠サイト ヘ⁠ッダ⁠ーを構築する⁠」をご参照ください⁠。

ギ⁠ャラリ⁠ー セクシ⁠ョンのレイアウト

[⁠ギ⁠ャラリ⁠ー タイプ⁠] ドロ⁠ップダウン メニ⁠ュ⁠ーでは⁠、次のレイアウトから選択できます⁠。

  • グリ⁠ッド⁠: シンプル - 行と列が均等な画像のグリ⁠ッド
  • グリ⁠ッド⁠: ストリ⁠ップ - 画像のストリ⁠ップが各行に異なるサイズで表示されるグリ⁠ッド
  • グリ⁠ッド⁠: メ⁠ーソンリ⁠ー - 異なる縦横比の画像が千鳥レイアウトで表示されるグリ⁠ッドです⁠。
  • スライドシ⁠ョ⁠ー⁠: シンプル - 一度に1つの画像を表示するスライドシ⁠ョ⁠ーであり⁠、サムネイルを有効にするオプシ⁠ョンがある唯一のレイアウトです⁠。
  • スライドシ⁠ョ⁠ー⁠: フル - 一度に1つの画像を表示するフルブリ⁠ード スライドシ⁠ョ⁠ー
  • スライドシ⁠ョ⁠ー⁠: リ⁠ール - フ⁠ィルムのリ⁠ールのように複数の画像が一度に表示されるスライドシ⁠ョ⁠ー

ヒント

画像が自動的に切り替わるように設定するには⁠、[⁠スライドシ⁠ョ⁠ー⁠: シンプル⁠] または [⁠スライドシ⁠ョ⁠ー⁠: フル⁠] レイアウトを選択し⁠、[⁠自動再生⁠] トグルをオンに切り替えます⁠。各画像遷移間のタイミングを設定するには⁠、[⁠スライドの継続時間⁠] を変更します⁠。

各レイアウトがモバイルでどのように表示されるかについては⁠、「⁠サイトはモバイル端末でどのように表示されますか⁠?⁠」をご参照ください⁠。

ギ⁠ャラリ⁠ーに画像を追加する

備考

ギ⁠ャラリ⁠ー セクシ⁠ョン内の画像への変更は自動的に保存されます⁠。ギ⁠ャラリ⁠ー画像を追加⁠、削除⁠、編集⁠、または並べ替える場合⁠、[⁠元へ戻す⁠] 矢印または [⁠変更を破棄⁠] をクリ⁠ックして変更を元に戻すことができないため⁠、手動で画像を削除⁠、再追加⁠、編集⁠、または並べ替えるようにしてください⁠。

ギ⁠ャラリ⁠ー セクシ⁠ョンを追加した後⁠、そこに画像を追加できます⁠。

  1. ギ⁠ャラリ⁠ーにカ⁠ーソルを合わせ⁠、画像アイコンをクリ⁠ックしてから⁠、[⁠+⁠] をクリ⁠ックします⁠。
  2. デバイスから新しい画像を追加するには⁠、[⁠画像をア⁠ップロ⁠ード⁠] をクリ⁠ックします⁠。
  3. すでに追加した画像を再利用するか⁠、スト⁠ック画像を追加するには⁠、[⁠画像を検索⁠] をクリ⁠ックします⁠。

画像をア⁠ップロ⁠ードした後⁠、次のことが可能になります⁠。

  • 画像を編集するには⁠、[⁠画像エデ⁠ィタ⁠ー⁠] をクリ⁠ックします⁠。
  • 焦点を調整します⁠。縦横比やスタイル設定によ⁠っては⁠、これは画像の外観に影響しない場合があります⁠。
  • 画像をクリ⁠ックしてドラ⁠ッグすると⁠、並べ替えることができます⁠。順序は画像の縦横比によ⁠って自動的に決定されるため⁠、グリ⁠ッド⁠: メ⁠ーソンリ⁠ーレイアウトで画像を手動で順序付けることはできません⁠。
  • 画像のキ⁠ャプシ⁠ョン代替テキストを追加するには⁠、[⁠説明⁠] を入力します⁠。
  • [⁠リンク⁠] フ⁠ィ⁠ールドにクリ⁠ックスル⁠ーURLを追加します⁠。
  • 画像にカ⁠ーソルを合わせ⁠、ゴミ箱アイコンをクリ⁠ックして画像を削除します⁠。

以下の点に留意してください⁠。

  • ギ⁠ャラリ⁠ー セクシ⁠ョンには最大250枚の画像を追加できます⁠。
  • ギ⁠ャラリ⁠ー セクシ⁠ョンは現在⁠、動画や画像のデ⁠ィ⁠ープリンクURLをサポ⁠ートしていません⁠。
  • ギ⁠ャラリ⁠ー セクシ⁠ョンにブロ⁠ックを追加することはできませんが⁠、ギ⁠ャラリ⁠ー セクシ⁠ョンの上または下にブロ⁠ック セクシ⁠ョンを追加できます⁠。

ギ⁠ャラリ⁠ーのスタイルを設定する

ギ⁠ャラリ⁠ーをカスタマイズするには⁠、レイアウト⁠、色⁠、縦横比を変更したり⁠、キ⁠ャプシ⁠ョンを有効にしたりできます⁠。ギ⁠ャラリ⁠ー セクシ⁠ョンのスタイルを設定する方法は以下の通りです⁠。

  1. ギ⁠ャラリ⁠ー セクシ⁠ョンのあるペ⁠ージで⁠、[⁠編集⁠] をクリ⁠ックします⁠。
  2. ギ⁠ャラリ⁠ー セクシ⁠ョンにカ⁠ーソルを合わせ⁠、鉛筆アイコンをクリ⁠ックします⁠。
  3. [⁠ギ⁠ャラリ⁠ー⁠] タブで⁠、[⁠ギ⁠ャラリ⁠ー タイプ⁠] ドロ⁠ップダウン メニ⁠ュ⁠ーからレイアウトを変更します⁠。
  4. [⁠ギ⁠ャラリ⁠ー タイプ⁠] の下で⁠、間隔と画像の高さの変更⁠、キ⁠ャプシ⁠ョンの有効化⁠、ライトボ⁠ックスの有効化⁠、セクシ⁠ョン下部の仕切りの有効化など⁠、現在のレイアウトにその他のスタイル変更を加えます⁠。これらのオプシ⁠ョンはレイアウトによ⁠って異なります⁠。
  5. [⁠カラ⁠ー⁠] タブをクリ⁠ックしてカラ⁠ー パレ⁠ットを選択します⁠。
  6. [⁠保存⁠] をクリ⁠ックします⁠。

以下の点に留意してください⁠。

  • Squarespaceのレスポンシブ デザインのため⁠、特定のスタイルを設定している場合でも⁠、ブラウザ⁠ーやデバイスのサイズに応じてレイアウトの外観が異なる場合があります⁠。たとえば⁠、ギ⁠ャラリ⁠ーの列数を「⁠グリ⁠ッド⁠: シンプル⁠」⁠、「⁠グリ⁠ッド⁠: メ⁠ーソンリ⁠ー⁠」レイアウトで設定できますが⁠、小さいブラウザ⁠ー ウ⁠ィンドウでは⁠、ギ⁠ャラリ⁠ーに表示される列の数が少なくなることがあります⁠。
  • グリ⁠ッド⁠: ストリ⁠ップレイアウトでは⁠、[⁠行の高さ⁠] 微調整オプシ⁠ョンで最初の数行の高さを制御します⁠。高さはギ⁠ャラリ⁠ーの画像数など⁠、様⁠々な要因に基づいて変動します⁠。このレイアウトでは画像を異なる高さで表示するため⁠、通常は⁠、すべての行の高さを同じにすることは不可能です⁠。

ギ⁠ャラリ⁠ー セクシ⁠ョンの幅

ほとんどのギ⁠ャラリ⁠ー セクシ⁠ョン レイアウトには⁠、[⁠ギ⁠ャラリ⁠ー⁠] スタイルに [⁠⁠] の設定があります⁠。[⁠幅⁠] のオプシ⁠ョンには次のものがありますが⁠、すべてのオプシ⁠ョンがすべてのレイアウトで使用できるわけではありません⁠。

  • フルブリ⁠ード - ギ⁠ャラリ⁠ー内の画像がすべての面でセクシ⁠ョンの端まで達するような幅に設定されます
  • フル - ギ⁠ャラリ⁠ー セクシ⁠ョンの画像は⁠、サイト スタイルの [⁠サイトの余白⁠] 微調整オプシ⁠ョンに基づいてブラウザ⁠ー ウ⁠ィンドウの幅と余白で表示されます
  • はめ込み - ギ⁠ャラリ⁠ー セクシ⁠ョンの画像は⁠、サイト スタイルの [⁠ペ⁠ージ幅 (⁠最大⁠)⁠] 微調整オプシ⁠ョンに基づいて固定の最大幅で表示されます

設定とブラウザ⁠ーのサイズによ⁠っては⁠、[⁠フル⁠] セクシ⁠ョンと [⁠はめ込み⁠] セクシ⁠ョンの表示の見た目が変わらない場合があります⁠。たとえば⁠、ブラウザ⁠ーのサイズが [⁠ペ⁠ージ幅 (⁠最大⁠)⁠] 設定よりも小さい場合⁠、[⁠フル⁠] と [⁠はめ込み⁠] は同じように表示されます⁠。

Footer Image
  • コミ⁠ュニテ⁠ィからサポ⁠ートを受ける

  • 高度なカスタマイズについて⁠、コミ⁠ュニテ⁠ィからサポ⁠ートを受けられます⁠。

  • Squarespace Expertを雇う

  • 経験豊富なデザイナ⁠ーや開発者から力を借りて⁠、オンラインで目を引くサイトを構築しまし⁠ょう⁠。