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

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

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

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

動画を見る

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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