Pacificテンプレート ファミリーのスタイルと機能を紹介します。
Pacificテンプレート ファミリー (Bryler、Charlotte、Horizon、Naomi、Pacific) は、テキスト オーバーレイとスクロールするフルブリード インデックス ページを使用して、すべてのコンテンツを1つの音声に結び付けます。
このガイドでは、Pacificファミリーの機能とデザイン オプションについて説明します。[サイト スタイル] 微調整オプション、および [サイト スタイル] パネルでこれらのオプションが表示されるセクションを太字で示しています。
サポートされているページ
Pacificでは、次のページ タイプがサポートされています。
ヘッダー
訪問者は、上部のヘッダーを使用してサイトを移動します。Pacificでは、ヘッダーにはサイトのタイトルまたはロゴ (ブランディング)とナビゲーション リンクが含まれます。
- ブランディング中心です。
- インデックス トップページには固定ナビゲーションを含めることができます。
[サイト ヘッダー] の微調整オプションで、ヘッダーのフォントと色のスタイルを設定します。
- ヘッダーの色を背景色に設定します。
- バナー画像を透過してヘッダーの後ろにバナーを表示します。
- [サイトのタイトルのフォント] 微調整オプションの [フォント サイズ] スライダーを使用して、サイトのタイトルのサイズを変更します。歪みを防ぐため、72ピクセル以上にはしないでください。
- [ロゴの幅] で、ロゴのサイズを変更します。
[サイト ナビゲーション] 微調整オプションでナビゲーションのリンクを設定します。ナビゲーションがページ上に表示されるか、[常にオーバーレイ ナビゲーションを使用] で [☰] アイコンの後ろに表示されるかを選択します。
- チェックを外すと、ナビゲーション リンクはブランディングの下に表示されるか、両側に分割されて表示されます。これは、ページ数とブラウザーの幅によって異なります。
- [リンクの色] を変更し、オーバーレイの背景を [背景色] で設定します。
- [☰] のオーバーレイでは、リンクのサイズがメニューに最適になるように自動的に変更されます。[リンク フォント: フォント サイズ] 微調整オプションはこれに影響しません。
バナー
バナーは、ページのトーンを決める視覚的エレメントを作り出します。バナーを作成するには、ページのアイキャッチ画像や動画を追加します。
- バナーは、アルバム、ブログ、イベント、ギャラリー (画像のみ)、商品、レイアウト ページに表示されます。
- 複数のバナーをインデックスに縦に積み重ねます。
- ページのタイトルと説明、およびサイト ヘッダーをバナーの上にオーバーレイできます。
- [ページのバナー] の [オーバーレイの色] 微調整オプションでカラー フィルターを追加します。[インデックス] セクションには個別のオーバーレイの色が設定されます。
バナーのテキスト
ページのタイトルと説明をバナーに表示できます。
- [ページのバナー] 微調整オプションでフォントのスタイルを設定します。[ページ タイトルを表示] ですべてのタイトルを非表示にします。
- ページの説明は、ページ設定から削除します。テキストを改行に置き換えると、バナーの高さに影響を与えずに削除できます。
- 検索結果に別のテキストを使用するには、SEOのタイトルと説明を追加します。
バナーの高さ
高さを変えるには、以下の方法があります。
- [ページのバナー] で [パディング] を変更します。
- 改行を追加して、ページの説明に高さを追加します。
バナーに関するその他のヘルプ
以下の点に留意してください。
- 接続速度とブラウザーのバージョンによっては、モバイルで動画バナーが表示されない場合があります。動画バナーを読み込めないときにモバイル用代替画像が表示されるように設定します。
- ギャラリー ページにアイキャッチ画像がない場合は、ギャラリーで変更を加えるたびに、最初の画像が自動的にバナーになります。ギャラリー ページにバナーを表示したくない場合は、ページ設定を開いてアイキャッチ画像を削除してください。
背景
[メイン コンテンツ] の [背景色] 微調整オプションを使用して、サイトの背景色を設定します。
- ヘッダー、フッター、プレフッターには独自の背景色があります。
- インデックス内のセクションに代替背景色を設定できます。
フッター
Pacificのサイト全体のフッターをブロックでカスタマイズします。フッターには、ナビゲーション リンク、連絡先情報、およびプレフッターと呼ばれる2つ目のコンテンツ エリアを含めることができます。
[フッター] 微調整オプションでフッター、連絡先情報、フッター ナビゲーション リンクのスタイルを設定します。
- 連絡先情報の表示とスタイルは、[サイト情報] 微調整オプションを使用してください。
- ビジネス情報の [所在地]、[連絡先メールアドレス]、および [連絡先電話番号] フィールドの情報を変更します。
ヒント: サイト情報の微調整オプションが表示されない場合は、サイトで別のテンプレートをプレビューしてから、プレビューをキャンセルしてください。
プレフッターはフッターの上に表示されます。
- サイト スタイルの [プレフッター] セクションで、背景とテキストの色のスタイルを設定します。
- プレフッターを表示するには、[コンテンツ: カスタム] を選択します。非表示にするには、[コンテンツ: 空] を選択します。
以下の点に留意してください。
- 一部のテンプレートのデモ コンテンツには、ソーシャル リンク ブロックが含まれています。ブロックを削除すると、ソーシャル アイコンが削除されます。
- フッターとプレフッター内のテキスト リンクには下線が付いています。
ブログ ページ
Pacificのブログ ページは、垂直に積み上げられた投稿のリストとして表示されます。
ランディング ページでは、次のようになります。
- ページ上部にカテゴリー フィルターを表示するカテゴリー ナビゲーションが追加されます。
- 抜粋のある投稿のタイトルの下に、投稿のアイキャッチ画像が表示されます。
- 抜粋には [続きを読む] のリンクが表示されます。
- 個々の投稿の完全な内容は、抜粋なしで投稿のタイトルの下に表示されます。
個々の投稿では、次のようになります。
- 個々の投稿には、コメントの下に前後の投稿へのナビゲーションが付きます。
- 単一列のテキスト ブロックが両側にはめ込まれます。これにより、レイアウトが変化し、投稿に視覚的な面白さが加わります。インデントの幅を変更するオプションはありません。
[ブログ] 微調整オプションでメタデータにスタイルを付けます。
- 日付、カテゴリー、投稿者名が投稿の上に表示されます。[メタの優先度] を使用して、これらのいずれかを投稿タイトルの上に移動します。
- 投稿者名を非表示にするには、[エントリー投稿者を非表示] を選択します。この微調整オプションは、[メタの優先度: 投稿者] が選択されている場合は使用できません。
- ソースURL、タグ、コメント、いいね、共有ボタンが投稿の下に表示されます。非表示にするには、[リスト エントリー フッターを非表示] をオンにします。
以下の [メイン コンテンツ] の微調整オプションでテキストのスタイルを設定します。
- [メタ] 微調整オプションでメタデータにスタイルを付けます。
- 投稿タイトルは [見出し1] 微調整オプションに従います。
- 本文テキストは、[テキストのフォント] と [テキストの色] 微調整オプションの設定に従います。
インデックス ページ
Pacificのインデックス ページでは、複数のページのコンテンツがスタック セクションに変換されるため、1か所で様々な画像や情報を強調することができます。
- コンテンツ セクションはレイアウト ページから作成されます。テキスト、ボタン、その他のブロックを追加するのに適しています。
- ギャラリーのインデックス セクションはギャラリー ページから作成され、グリッドまたはスライドショーで表示できます。
- アルバム セクションはアルバム ページから作成されます。
- ページのアイキャッチ画像は、コンテンツ セクションとアルバム セクションの背景として表示されます。
ギャラリーのインデックス セクション
サイト スタイルの [インデックス ギャラリー] セクションにあるスタイル ギャラリーのインデックス セクション。[デザイン] 微調整オプションですべてのギャラリーのインデックス セクションのレイアウトを設定します。
スライドショーのレイアウトでは、次のようになります。
- ギャラリーを [自動再生] するかどうかを選択し、[スライドショーの移行] を [フェード] または [スクロール] に設定します。
- ギャラリー コントロールを使用してナビゲーション エレメントを追加または非表示にします。
- 訪問者が [ギャラリーのオーバーレイ切り替え] でキャプションを有効または無効にできる目のアイコンを追加します。
- 画像のタイトルと説明は、画像の中央に配置されます。
グリッド レイアウトでは、次のようになります。
- [グリッドの最大列数] で表示する画像の水平方向の数を選択します。
- 画像のタイトルはカーソルを合わせると表示されます。画像の説明は表示されません。
ギャラリーに追加された動画では、次のようになります。
- モバイルのライトボックスで開きます。
- 自動再生が可能です。
セクションの背景
コンテンツ セクションとアルバム セクションでは、次のようになります。
- ページのアイキャッチ画像が背景として表示されます。
- アイキャッチ画像のないセクションには、サイトの背景色が表示されます。
- [インデックス] の [セクションの区切り] 微調整オプションを使用して、背景画像のないセクションが連続して2つある場合の処理を選択します。代替背景色を設定するか、境界線でセクションを分割できます。
ギャラリー インデックス セクションの場合
- スライドショー レイアウト - 画像はフルブリードで表示されます。
- グリッド レイアウト - [インデックス ギャラリー] の [ギャラリーのオーバーレイの色] 微調整オプションは、グリッド内の空のスペースに完全に不透明で表示されます。
色のオーバーレイ
画像や動画にカラー フィルターを追加できます。これにより、オーバーレイになっているコンテンツを目立たせることができます。
- コンテンツ セクションとアルバム セクション - [インデックス オーバーレイ] の [色] 微調整オプションを使用してください。
- ギャラリー インデックス セクション - [インデックス ギャラリー] の [ギャラリーのオーバーレイの色] 微調整オプションを使用してください。色は、タイトルまたは説明のある画像にのみ表示されます。グリッド レイアウトの場合、カーソルを合わせると色が表示されます。
セクションの高さ
コンテンツ セクションとアルバム セクションの高さを変更するには、次の微調整オプションでパディングを調整します。
- バナー画像のあるセクション - [インデックス オーバーレイ] の [ページ パディング] を使用します。
- バナー画像のないセクション - [インデックス] の [ページ パディング] を使用します。
- コンテンツ セクションの場合は、ページ コンテンツに追加の改行を追加して高さを追加することもできます。
ギャラリーのインデックス セクションの高さは、次の [インデックス ギャラリー] 微調整オプションで変更できます。
- スライドショーのレイアウト - [スライドショーの縦横比] を変更します。
- グリッド レイアウト - [グリッドの縦横比] と [グリッドの最大列数] を変更します。
ナビゲーション リンク
トップページとして設定されたインデックス ページで、次の設定ができます。
- インデックス ページの最初のセクションを越えて下にスクロールした場合に、ヘッダー ナビゲーションがブラウザー ウィンドウの上部に表示されるようにロックできます (固定ナビゲーション)。
- コンテンツおよびアルバム セクションへのリンクをナビゲーションに追加できます。リンクをクリックすると、ページがそのセクションまでスクロールします。
ナビゲーションをロックするには、サイト スタイルの [サイト ナビゲーション] セクションで [インデックス スクロール ナビゲーション: スクロール時に表示] を選択します。サイト ヘッダーの [背景色] でナビゲーションの背景色を設定します。
以下の点に留意してください。
- サイトのブランディングは表示されません。
- ロックされたナビゲーションを表示するには、インデックスに複数のセクションが必要です。
コンテンツ セクションとアルバム セクションのナビゲーション リンクを作成するには、[サイト ナビゲーション] の [トップページのインデックスのリンクを拡張] 微調整オプションを確認します。
- ギャラリー インデックス セクションはナビゲーションに表示されません。代わりにインデックス アンカー リンクを使用してリンクを作成してください。
インデックス ページに関するその他のヘルプ
- 編集用の注釈は空白のセクションには表示されないことがあります。白紙ページを編集するには、そのページをインデックスから移動し、コンテンツを追加してから元に戻します。
- 画像上のボタン、フォーム、引用ブロックの色を変更するには、[インデックスのオーバーレイ] 微調整オプションを使用します。
- 共有ボタンは常にアルバム セクションに表示されます。
カテゴリー ナビゲーション
訪問者はカテゴリー ナビゲーション リンクを使用して、投稿または商品カテゴリーごとにページをフィルタリングします。
サイト スタイルの [カテゴリー ナビゲーション] セクションにあるブログおよびストア ページの上部に、カテゴリー ナビゲーションを追加してスタイルを設定します。スタイルの変更は、サイト上のすべてのカテゴリー ナビゲーションに影響します。
ショッピング カート
顧客が商品をカートに追加すると、すべてのページの右上隅にショッピング カート ボタンが表示されます。ボタンのスタイルを設定するには、次の手順に従ってください。
- カート ボタンが表示されるように、少なくとも1つの商品をカートに追加します。
- [サイト ヘッダー] で、[[カート] ボタンの背景の色] および [[カート] ボタンのフォントの色] 微調整オプションを変更します。
モバイル
Squarespaceに組み込まれたレスポンシブ デザインを使用すると、どの端末でも見栄えがよくなるようにサイトが調整されます。
- ナビゲーションは左上隅に☰に折りたたまれて表示され、トップページに設定されているインデックス ページをスクロールしている間はロックされたままになります。
- サイトのタイトルまたはロゴは、最大50ピクセルの高さで上部中央に表示されます。
- ショッピング カート ボタンが右下隅に表示されます。
- モバイル用スタイルを無効にすることもできますが、推奨はしません。
- グリッド ギャラリーには、1行に2つの画像が表示されます。画像の枚数が奇数の場合、最終画像の横に空白ができます。
モバイルでは、見出しは次の最大サイズを超えると表示されません。
- 見出し1 - 34ピクセル
- 見出し2 - 26ピクセル
- 見出し3 - 20ピクセル
スマートフォンでは、次のようになります。
- フッターの上の一番下に [上に戻る] リンクが表示されます。
- インデックス ページのギャラリーには画像の説明は表示されません。
言語オプション
このファミリー内では、Charlotte、Naomi、およびPacificのテンプレートは以下の2つの言語オプションをサポートしています。
- 送信フォームや注文確認メッセージなど、サイトの組み込みテキストの言語を選択するオプション。
- フランス語、ドイツ語、イタリア語、ポルトガル語、またはスペイン語のテンプレートを使用して新しいサイトを開始するオプション。
Pacificに関するトラブルシューティング
このテンプレートでよく生じる問題について説明します。これらの一部は、バグまたは既知の問題です。Squarespaceバージョン7.0は引き続きサポートされていますが、Squarespaceでは最新のプラットフォームであるバージョン7.1に重点を置いているため、バグや問題の修正の優先順位は低くなっています。弊社の更新ツールを使用することで、バージョン7.0サイトをバージョン7.1に移行できます。
RSVPまたはレジストリ リンクを追加する
これらのリンクを追加する方法は以下の通りです。
- フォーム ブロックを使用して、レイアウト ページにRSVPボタンを作成します。このブロックは訪問者から情報を収集します。
- さまざまなレジストリ サイトへのクリックスルーURLを含む画像を使用して、グリッド ギャラリー ブロックを含むレイアウト ページにレジストリ リンクを作成します。
- これらの実際の表示例については、Naomiライブ プレビュー ページを参照してください。
インデックス ページのヘッダーとテキストを変更する
インデックス内の見出しとテキストの色とサイズをどのように調整するかは、ページの種類とバナー画像の有無によって異なります。サイト スタイルでスタイルを設定します。
背景画像を含むコンテンツおよびアルバム セクションの場合
- [メイン コンテンツ] セクションの微調整オプションを使用して、フォントとタイポグラフィを変更します。
- [インデックス オーバーレイ] セクションの微調整オプションを使用して色とサイズを調整します。
背景画像を含まないコンテンツおよびアルバム セクションの場合
- [メイン コンテンツ] セクションの微調整オプションを使用して、フォント、タイポグラフィ、色、サイズを変更します。
ギャラリー ページには、[インデックス ギャラリー] セクションを使用します。
インデックス付きのトリミングなしのバナーを作成する
テンプレートのページのバナーは、特にモバイル端末では、常に若干トリミングされます。
Pacificファミリーのインデックス ページでは、ヘッダーのバナーのようにトリミングされないような外観を作成できます。
- インデックス ページを追加します。
- ギャラリー ページをインデックスに追加します。
- ギャラリー ページに希望のバナー画像を追加します。トリミングに影響するため、複数の画像を追加しないでください。
- [画像のタイトル] フィールドと [説明] フィールドにテキストを追加します。このテキストは画像の上に表示されます。
- サイト スタイルで、[インデックス ギャラリー] までスクロールして、[デザイン: スライドショー] と [スライドショーの縦横比: 自動] を選択します。
- インデックス内の2ページ目として、バナーの下に表示するページ コンテンツを追加します。
以下のサイト スタイル微調整オプションを使用して、ギャラリー ページの画像の表示方法をさらに調整します。
- バナー画像上で透明化 - 画像の上にサイト ヘッダーを表示します。
- ギャラリーのオーバーレイの色 - 画像のカラー フィルターを調整します。
- [ギャラリーのタイトル] と [ギャラリーの説明] - ギャラリー画像テキストのフォントと色を調整します。
ページの表示例を次に示します。
インデックスではギャラリーの画像が通常よりも暗くなる
インデックス ページには、部分的に不透明なフィルターを使用してギャラリー インデックス セクションが表示されている可能性があります。
このオーバーレイの色を変更または削除するには、サイト スタイルの [インデックス ギャラリー] セクションにある [ギャラリーのオーバーレイの色] 微調整オプションを使用します。不透明度スライダーを使用して、透明度を変更します。
ギャラリーのオーバーレイの色が表示されない
ギャラリーのオーバーレイの色は、その画像の説明またはタイトルがある場合に表示されます。説明文やタイトルがない場合、オーバーレイの色は表示されません。
画像のタイトルや説明を追加する方法については、「ギャラリー ページを使用する」を参照してください。
プレフッターのスタイルの設定方法
プレフッターにコンテンツがない場合、サイト スタイルを開いたときにプレフッターは表示されません。表示する方法は以下の通りです。
- サイト スタイルはそのままにします。
- プレフッターにコンテンツを追加します。
- サイト スタイルを再度開いて、変更を続けます。
プレフッターが見つからない
サイト スタイルでプレフッターを [コンテンツ: 空] に設定した可能性があります。これにより、プレフッターが訪問者や編集から非表示になります。プレフッターを再表示する方法は以下の通りです。
- [サイト スタイル] パネルを開きます。
- [プレフッター] まで下にスクロールします。
- ドロップダウンを使用して、[コンテンツ] を [コンテンツ: カスタム] に設定します。
- 必要に応じて、背景、見出し、テキストの色の設定など、スタイルを変更します。
- パネルの上部の [保存] をクリックします。
境界線が表示されない
バナー画像のないセクション間の境界線が見えない場合
- インデックス ページでサイト スタイルを開きます。
- [インデックス] セクションで、[セクションの区切り: 境界線] にチェックを入れます。
- [境界線の色] 微調整オプションを変更します。透明度の変更が必要な場合があります。
インデックス ページが一番上までスクロールしない
インデックス ページをトップページに設定し、ナビゲーションのインデックス ページのリンクをクリックすると、各インデックス ページ セクションの上部に移動します。一番上のセクションのリンクを使用すると、サイトの最上部に移動します。
- インデックス ページに移動します。
- [サイト スタイル] パネルを開きます。
- [サイト ヘッダー] セクションで、バナー画像の [透明] にチェックを入れます。
これにより、インデックスの上部セクションを含むサイトのタイトルとバナー上のナビゲーションが表示されます。インデックスの上部セクションのリンク (Pacificデモ サイトの [ ホーム] リンクなど) をクリックすると、サイトの上部に移動します。
それでもインデックス ページが一番上までスクロールしない場合は、インデックスの最初のページがアルバム ページではなく、レイアウト ページであることを確認してください。ギャラリーとアルバム ページは、インデックス ページのナビゲーションに表示されません。
インデックス ページに代替背景色が表示される
インデックス ページにバナー画像がない複数のセクションでは、代替背景色が表示されることがあります。
この機能を無効にするには、サイト スタイルの [インデックス] セクションで [セクションの区切り: 境界線] 微調整オプションを選択します。これにより、連続する2つのセクション間に境界線が追加され、代わりにバナー画像が表示されなくなります。
メイン ナビゲーション リンクの代わりにナビゲーション アイコンが表示される
この機能を無効にするには、サイト スタイルの [サイト ナビゲーション] セクションで [常にオーバーレイ ナビゲーションを使用] をオフにします。ナビゲーションが再びテキストとして表示されます。
モバイル端末などの特定の狭いブラウザーでは、ナビゲーションを無効にしている場合でも、ナビゲーションは常に☰で折りたたまれます。これはテンプレートのデザインの一部です。
ナビゲーション リンクがない
まず、ナビゲーションに必要なページが [ページ] パネルのメイン ナビゲーション セクションにあることを確認します。
次に、[サイト スタイル] パネルを開きます。[サイト ナビゲーション] セクションまで下にスクロールし、トラブルシューティングのヒントを試してください。
- インデックス ページがトップページに設定されている場合は、[トップページのインデックスのリンクを拡張] にチェックが入っていることを確認します。
- ナビゲーションが左上隅にメニュー アイコンとして表示されている場合は、[常にオーバーレイ ナビゲーションを使用する] のチェックを外します。
- リンクの色が透明でないことを確認します。
ギャラリー インデックス セクションは、ナビゲーションにリンクが作成されません。代わりに、ギャラリー インデックス セクションのすぐ上にコンテンツ セクションを追加して紹介するか、インデックス アンカー リンクを追加してください。
サイトのタイトルの後ろにナビゲーション メニューを表示する
これは、サイト スタイルの [トップページのインデックスのリンクを拡張] を初めてオフにしたときに発生する可能性があります。変更を保存し、ページを更新します。ナビゲーションはサイトのタイトルの下に表示されます。
読み込み後にサイトのタイトルがサイズ変更される
これは、サイトのタイトルが大きすぎてコンテナーに収まらない場合に発生します。この問題を解決するには、次の手順を実行します。
- サイト スタイルの [サイト ヘッダー] セクションで [サイトのタイトルのフォント] 微調整オプションをクリックして、フォント サイズが72ピクセル以下になるようにします。
- [サイトのタイトル コンテナーの幅] 微調整オプションを使用して、サイトのタイトルに合わせてコンテナーのサイズを変更します。
最適なデザインを実現するには、サイトのタイトルのサイズを72ピクセル以下に制限してください。それより大きいと、コンテナーの幅がどんなに広くても、サイトのタイトルに歪みが生じます。