微調整オプションを使用してバージョン7.0のギャラリー ページのエレメントを調整し、サイトをカスタマイズします。

[サイト スタイル] パネルでは、画像サイズの調整、デザインの変更、ギャラリー ページのカスタマイズができます。

このガイドはバージョン7.0用です。バージョン7.1では、代わりにギャラリー セクションを使用してください。

テンプレートごとのギャラリー ページの表示

各テンプレートのギャラリー ページは、既定で次の表示スタイルのいずれかになります。

• スライドショー - 一度に1つの画像または動画を表示します。訪問者がクリックすると次のスライドに進むように設定することも、ギャラリーを自動再生するように設定することもできます。スライドショーの自動再生は、カーソルを合わせると一時停止します。
• グリッド - コンテンツをグリッドで表示します。サイト スタイルの縦横比、パディング、行ごとのサムネイルの数を調整します。
• スタック - コンテンツを1列に表示し、各画像または動画の間に1ピクセルのパディングを付けます。
• カルーセル - コンテンツを横一列に表示します。訪問者がクリックすると次のスライドに進むように設定することも、ギャラリーを自動再生するように設定することもできます。

ギャラリー ページのスタイルはテンプレートによっても異なります。ほとんどのテンプレートで、グリッドまたはスライドショーとして表示する標準のギャラリー ページが使用されています。その他のテンプレートには、独自の機能やスタイル微調整オプション、レイアウトを備えたテンプレート独自のギャラリー ページがあります。

以下のテンプレート ファミリーは、標準のギャラリー ページを使用しています。

• Adirondack
• Aviator
• Bedford
• Brine
• Farro
• Five
• Galapagos
• Native
• Pacific
• Skye
• York - ギャラリー ページに似た独自のプロジェクト ページもサポートしています。

以下のテンプレート ファミリーには、独自のギャラリー ページがあります。詳細については、テンプレート ガイドを参照してください。

• Avenue - スライドショー
• Flatiron - スタック
• Forte - ライトボックスのスライドショー付きのカルーセル。
• Ishimoto - カルーセル
• Momentum - スライドショー、グリッド表示オプション付き
• Montauk - スタック
• Supply - スタック
• Tremont - スタック、メーソンリー、または水平グリッド レイアウト
• Wells - スライドショーまたはグリッド
• Wexley - グリッド、ライトボックス スライドショー付き

インデックス内のギャラリー ページ

ギャラリー ページは、以下のテンプレート ファミリーのインデックスに追加できます。一部のギャラリーは、インデックスから開くと特殊な形式で表示されます。詳細については、テンプレート ガイドを参照してください。

• Avenue - インデックスから開くとスタックされます。
• Brine - ギャラリー インデックス セクションはグリッドまたはスライドショーとして表示されます。
• Flatiron - インデックスから開いたときにナビゲーション エレメントが表示されます。
• Forte
• Momentum
• Montauk - インデックスから開いたときにナビゲーション エレメントが表示されます。バナーは表示されません。
• Pacific - ギャラリー インデックス セクションはグリッドまたはスライドショーとして表示されます。
• Supply
• Tremont - インデックスのランディング ページのスライドショーが下部に表示されます。
• York

標準のギャラリー ページのスタイルを設定する

標準のギャラリー ページを使用するテンプレートの場合は、このセクションの手順に従ってください。独自のギャラリー ページを持つテンプレートについては、テンプレート ガイドを参照してください。

レイアウトを選択する

標準のギャラリー ページは2つのレイアウトをサポートしています。レイアウト スタイルを設定する方法は以下の通りです。

1. ギャラリー ページを開きます。
2. [Webサイト] パネルに戻り、[デザイン]、[サイト スタイル] の順にクリックします。
3. [ギャラリー用スタイル] まで下にスクロールします。
4. [ギャラリー デザイン] の微調整オプションを使用して、[スライドショー] または [グリッド] を選択します。

ヒント: これにより、サイトのすべてのギャラリー ページにレイアウトが設定されます。さまざまなレイアウトのギャラリーを作成するには、ギャラリー ブロックを使用します。

スライドショーのレイアウトのスタイルを設定する

スライドショー レイアウトでは、一度に1つの画像または動画が表示されます。以下の例のように、矢印やサムネイルなどのナビゲーション エレメントを含めることができ、自動再生するように設定することもできます。

[ギャラリー デザイン] を [スライドショー] に設定すると、[ギャラリー用スタイル] セクションに次の微調整オプションが表示されます。

ナビゲーションのスタイルを設定するまたは非表示にする

• ギャラリー ナビゲーション - ナビゲーションの種類 (サムネイル、箇条書き、数字、円、シンプル) を選択します。ナビゲーションを非表示にするには [なし] を選択します。
• ギャラリーの矢印のスタイル - スライドを順番に表示するための矢印のスタイルを設定します (角丸、長方形、円形、背景なし)。
• ギャラリーの矢印を表示 - オフにすると、ギャラリー表示の矢印が非表示になります。
• ギャラリー サムネイル サイズ - サムネイル画像のナビゲーションの高さを設定します。
• ギャラリーの矢印の背景
• ギャラリーの矢印の色
• ギャラリーの円の色

画像の形状を選択する

• ギャラリーの縦横比 - 縦横比 (幅:高さ) を設定します。[ギャラリー自動切り抜き] 微調整オプションと併用します。
• ギャラリー自動切り抜き - [ギャラリーの縦横比] 微調整オプションで設定された縦横比に画像を自動切り抜きします。

キャプションの表示方法を設定する

• ギャラリー情報オーバーレイ: 常に表示、ホバー時に表示、非表示 - 画像のタイトルとキャプションに使用される表示タイプです。
• ギャラリー情報の背景 - 画像のタイトルとキャプションの背景として使用される色です。

スライドショー内での画像の切り替え方法を選択する

• ギャラリーの移行: フェード、スクロール
• ギャラリーの自動再生 - ユーザーの操作なしでギャラリーの画像を自動的に循環させます。スライドショーの自動再生は、カーソルを合わせると一時停止します。
• ギャラリー ループ - ギャラリーの最後のスライドが表示された後、最初のスライドに戻って循環するよう設定します。
• ギャラリーの自動再生速度 (秒)

グリッド レイアウトのスタイルを設定する

[ギャラリー デザイン] を [グリッド] に設定すると、[ギャラリー用スタイル] セクションに次の微調整オプションが表示されます。

画像の形状とサイズを選択する

• 縦横比 - 画像の縦横比 (幅:高さ) を設定します。縦横比を [自動] に設定すると、画像はページ上に最適に収まるように再配置されます。アップロードされた順番とは異なる順番で表示される場合があります。
• グリッドの間隔 - グリッド内の個々の画像間のパディングを増やします。
• 列の最小幅 - グリッドの列幅を設定します。

ライトボックスのスタイルを設定する

• ライトボックスのスタイル: ダーク、ライト

キャプションのスタイルを設定する

画像のタイトルと説明のフォントのスタイルを設定する方法については、「画像キャプションのスタイリング」を参照してください。

キャプションの表示はテンプレートによって異なります。標準のギャラリー ページを使用するテンプレートの場合は以下のようになります。

• スライドショー - [ギャラリー情報オーバーレイ] 微調整オプションの設定内容に応じて、テキストを非表示にするか、画像にカーソルを合わせたときに表示するか、常に表示するかことができます。
• グリッド - ライトボックス ビューで画像にカーソルを合わせるとテキストが表示されます。
• 動画にテキストが表示されません。

これらのテンプレート ファミリー独自のギャラリー ページでは、画像のタイトルと説明は次のように表示されます。

テンプレート ファミリー	備考
Avenue	テキストは、ギャラリー ページがインデックスの一部である場合にのみ表示されます。
Flatiron	テキストは表示されません。
Forte	テキストは常に表示されます。
Ishimoto	テキストは非表示にしたり、常に表示したりすることができます。
Momentum	「i」アイコンをクリックすると常にテキストが表示されます。
Montauk	テキストは常に表示されます。
Supply	カーソルを合わせたときに [+] アイコンをクリックすると、オーバーレイ内の画像のテキストが表示されます。 動画にテキストが表示されません。
Tremont	[キャプション表示: ホバー時] または [常時] から選択します。右下隅にある円形のアイコンの上にカーソルを置くと、キャプションが表示されます。 スタック レイアウトでは、画像の下にキャプションを表示できます。この微調整オプションを有効にするには、[キャプション表示: 常時] を選択します。
Wells	テキストは常に表示されます。
Wexley	画像のタイトルはカーソルを合わせると表示されます。タイトルを表示または非表示にするには、[サムネイルのホバーを有効にする] 微調整オプションを使用します。 画像のタイトルはライトボックスやモバイルには表示されません。画像の説明は表示されません。
York	Yorkには標準のギャラリー ページがあります。 プロジェクト ページの場合、テキストは方向に応じて画像の横または下に表示されます。

特別なリンクを追加する

一部のギャラリー ページでは、画像へのリンク、または画像からのリンク方法をサポートしています。

• ディープリンクURLは、各画像に割り当てられるカスタマイズ可能なURLで、訪問者をギャラリー ページ内の任意の画像に直接誘導できます。
• クリックスルーURLは、画像を外部ページ、内部ページ、またはファイルへのリンクに変換します。

ヒント: クリックスルーURLではライトボックスが無効になります。Adirondackでは、スライドショー ビューでのディープリンクURLとクリックスルーURLのみがサポートされます。

キーボード ナビゲーション

ほとんどのテンプレートで、キーボードの矢印を使用した画像間の移動に対応しています。キーボード ナビゲーションが機能する前に、ページをクリックする必要がある場合があります。

標準のギャラリー ページはスライドショー レイアウトのキーボード ナビゲーションをサポートしていますが、グリッド レイアウトからライトボックスで画像を開く場合はサポートされません。

独自のギャラリー ページはすべて、キーボード ナビゲーション (スライドショー、カルーセル、ライトボックス ビュー) をサポートしています。

ギャラリーを自動再生する

一部のテンプレートでは画像間が自動的に切り替えられるため、視聴者はクリックして次の画像に移動する必要がありません。

テンプレートに自動再生機能がある場合は、このオプションはサイト スタイルにあります。たとえば、標準のギャラリー ページを使用するテンプレートでは、[ギャラリーの自動再生] 微調整オプションを確認してください。

注: ギャラリーに動画が含まれている場合、自動スクロールが機能すると、動画が最後まで再生されません。動画が途切れるのを防ぐには、アイキャッチ画像をアップロードして画像オーバーレイを有効にしてください。

モバイルでの表示

すべてのSquarespaceテンプレートには、ギャラリー ページがどのデバイスでも見栄えがよくなるように、レスポンシブ デザインが組み込まれています。モバイル端末でギャラリー ページをプレビューするには、端末別プレビューを使用します。

詳細については、「サイトはモバイル端末でどのように表示されますか？」をご覧ください。

他のスタイル オプション

テンプレートのギャラリー ページに表示されているものとは異なる外観にするには、いくつかある以下の方法を試してみてください。

• レイアウト ページでギャラリー ブロックを使用すると、デザインの柔軟性が高まります。これを設定するには、次の手順に従います。
• レイアウト ページの概要ブロックを使用すると、特定のギャラリー コンテンツをフィルターしてより柔軟にデザインできます。
• ギャラリー ページのデザインが異なる新しいテンプレートに切り替えます。

ギャラリー ページと、ギャラリー ブロックを備えたレイアウト ページを組み合わせて使用することにより、異なる表示スタイルで複数のギャラリーを作成することもできます。