Brineテンプレート ファミリーのスタイルと機能を紹介します。
Brineファミリーのテンプレートを使用すると、あらゆるブランドや企業に最適な、プロフェッショナルなWebプレゼンスを構築できます。ヘッダー、フッター、コンテンツはめ込み、モバイル用スタイルをカスタマイズして、サイトを目立たせることができます。フルブリード バナーを任意のページに追加したり、インデックスにスタックしたりすることができます。オプションのパララックス スクロールを使用すると、バナーがページ コンテンツよりもゆっくりと移動するため、奥行きと没入感が生まれます。
このガイドでは、Brineファミリーの機能とデザイン オプションについて説明します。Brineのテンプレートのリストを参照してください。
[サイト スタイル] パネルでサイトのスタイルを設定します。このガイドでは、スタイル微調整オプションと、その微調整オプションがサイト スタイル パネルに表示されるセクションを太字で示しています。
サポートされているページ
Brineでは、次のページ タイプがサポートされています。
- アルバム ページ
- ブログ ページ - 標準グリッド/リスト
- カバー ページ
- イベント ページ
- ギャラリー ページ - 標準
- インデックス ページ - スタック
- レイアウト ページ
- ストア ページ - アドバンスト
ヘッダー
訪問者は、上部のヘッダーを使用してサイトを移動します。Brineでは、ヘッダーは上部と下部のセクションに分かれています。
- サイト スタイルの [ヘッダー: レイアウト] セクションで、サイトのタイトルやロゴ、ナビゲーション リンクなどのエレメントを上部および下部のヘッダーに追加します。
- 下部のヘッダーでは、背景画像と、独自のコンテンツを追加できるイントロダクション エリアがサポートされています。
ヘッダーのスタイルを設定する
以下の [ヘッダー: 上部] 微調整オプションで、上部のヘッダーのスタイルを設定します。
- [パディング] で高さを設定します。
- [背景] で色を設定します。
下部のヘッダーには、ページ バナーが背景画像または動画として表示されます。バナーがない場合、背景色はページと同じになります ([メイン] の [色] 微調整オプションを使用して設定)。
下部のヘッダーの高さを変更するには、次の手順に従います。
- すべてのページ - [ヘッダー:下部] の [パディング] と、[メイン] の [イントロ パディング] 微調整オプションを変更します。
- 個々のページ - イントロダクション エリアに余分な改行を追加して高さを調整します。
- インデックス ページ - 上部のインデックス セクションの高さを変更します。
ヘッダー エレメントを追加してスタイルを設定する
- サイト タイトルまたはロゴ (「ブランディング」)
- タグライン
- ナビゲーション リンク
- 組み込みのソーシャル アイコン
- 検索バー
- ショッピング カート
- サインイン/マイ アカウント リンク
サイト スタイルの [ヘッダー: レイアウト] セクションで、各エレメントを表示する場所と非表示にする場所を選択します。たとえば、[ブランディング ポジション: 中央上] を選択して、上部のヘッダーの中央にサイトのタイトルまたはロゴを追加します。
各 [ヘッダー] セクションの微調整オプションを使用して、各エレメントのスタイルを設定します。たとえば、[ヘッダー: メイン ナビゲーション] に移動して、リンクのフォントと色を選択します。
- バナーの上に表示されるように、下部のヘッダーのエレメントには [(オーバーレイ)] の色を設定します。
- [ヘッダー: 上部] と [ヘッダー: 下部] の [レイアウト] 微調整オプションで、同じエリア (たとえば、[中央下]) のエレメントをスタックするかどうかを選択します。
- モバイルで見栄えが良くなるように、個別のモバイル用スタイルを設定します。
ヘッダーに関するその他のヘルプ
以下の点に留意してください。
- 最良の結果を得るには、各エレメントをヘッダーの異なるエリアに配置します。十分なスペースがないと、エレメントが重なって表示されることがあります。
- 影響を受けるエレメントがサイトに追加されるまで、一部の微調整オプションは表示されません。
- 上部のヘッダーにエレメントがない場合、ヘッダーは表示されません。
- その他のヒントについては、「サイト ヘッダーを作成する」をご覧ください。
ナビゲーション リンク
Brineには3つのナビゲーション エリアがあります。
メイン ナビゲーション リンクとセカンダリ ナビゲーション リンクの特徴は次のとおりです。
- 上部または下部のヘッダーに表示できます。
- [ヘッダー: メイン ナビゲーション] と [ヘッダー: セカンダリ ナビゲーション] のスタイル微調整オプションでスタイルが設定されます。たとえば、メインまたはセカンダリ ナビゲーション リンクのスタイルをボタンとして設定するには、[スタイル: ボタン] を選択します。
フッター ナビゲーション リンクの特徴は次のとおりです。
- サイトのフッターに表示されます。
- [フッター: ナビゲーション] 微調整オプションでスタイルが設定されます。
バナー
バナーは、ページのトーンを決める視覚的エレメントを作り出します。バナーを作成するには、ページのアイキャッチ画像や動画を追加します。
Brineにおいて、バナーは次のようになります。
- レイアウト ページとコレクション ページに表示されます。
- 下部のヘッダーの背景になります。
- [デザイン: 制限] レイアウトを除き、フルブリードで表示されます。
- パララックス スクロールを使用すると、ページの他の部分よりもゆっくりとスクロールさせることができます。
- コレクション アイテム (ブログ投稿、商品アイテム、個々のイベントなど) では表示されません。
インデックスでは、複数のバナーをスタックすることができます。
バナーのスタイルを設定する
次のオプションを使用して、バナーのスタイルを設定することができます。
- [メイン: オーバーレイ] の [オーバーレイの色] 微調整オプションでカラー フィルターを追加します。
- イントロダクション エリアにテキストやいいね！ボタン ブロックなどの他のブロックを追加します。
- イントロダクション エリアを編集し、改行を追加することで、高さを変更することができます。
- [サイト:読み込み中] の [パララックスを有効化] 微調整オプションで、バナーをページの他の部分よりもゆっくりとスクロールさせるかどうかを選択します。
- サイト スタイルでは、[(オーバーレイ)] 微調整オプションで、テキストやナビゲーション リンクなど、バナー画像上に表示されるエレメントに影響を与えます。
切り抜きと中心設定
- パララックス スクロールが有効になっている場合は、[サイト:読み込み] の [パララックス スマート クロップ] 微調整オプションを使用して、バナーが切り抜かれる量を最小限にします。
- 画像が予期しない方法で切り取られる場合は、切り抜きに関するトラブルシューティングのヒントをご覧ください。
- 焦点を変更して、バナー画像の中心設定の方法を選択します。スクロール中に画像が常に表示されるようにするには、画像の中心近くに焦点を設定します。
バナーに関するその他のヘルプ
以下の点に留意してください。
- バナー画像が存在しない場合は、ギャラリー ページの最初の画像が自動的にバナー画像になります。これはページ設定で置換または削除できます。
- スライドショー ギャラリーを含むインデックスを使用すると、スライドショー ページのようなバナーを作成することができます。
- 一般的なヘルプについては、「バナー画像を追加する」を参照してください。
イントロダクション エリア
下部のヘッダーのイントロダクション エリアは、テキスト、画像、その他のコンテンツを使用して編集できるページ固有のヘッダー エリアです。この方法は、個々のページの上部をカスタマイズするのに最適です。
イントロダクション エリアは、ページ バナーの上に表示され、コンテンツはめ込みの後に表示され、バナーがないレイアウト ページとインデックス ページを除くすべてのページで使用できます。
イントロダクション エリアを編集するには、次の手順に従います。
- ページ コンテンツの上のエリアにカーソルを合わせ、[編集] をクリックします。
- ブロックを使用してテキストやその他のコンテンツを追加します。
サイトの編集中、イントロダクション エリアに余分なパディングが表示されることがあります。イントロダクション エリアの間隔が実際のサイトでどのように表示されるかを確認するには、変更を保存し、ページをプレビュー モードで表示してください。
フッター
訪問者が必要な情報を見つけられるように、サイト全体のフッターをカスタマイズすることができます。Brineのフッターには次のものが含まれています。
- 独自のコンテンツでカスタマイズできる3つのブロック エリア。
- ビジネスに関する情報を表示するエリア。
- フッター ナビゲーション リンク
- 2つのレイアウト オプション ([フッター] の [レイアウト] 微調整オプションを使用)。
[フッター] 微調整オプションでフォントや色を設定します。フッターを非表示にするには、[フッターを表示] のチェックを外します。
レイアウト: 列
ブロック エリア、ビジネスに関する情報、ナビゲーションが水平に表示され、上下にブロック エリアが表示されます。フッターにおいて、ドロップダウンとインデックス ページはドロップダウン メニューではなく列を構築します。インデックス ページとドロップダウンのタイトルはリンクではなくヘッダーとして表示され、その下にサブページのリンクが表示されます。
レイアウト: スタック
ビジネスに関する情報とナビゲーションが垂直にスタックされ、上、中間、下にブロック エリアが表示されます。ドロップダウン ページとインデックス ページのタイトルは表示されず、そのサブページ リンクが水平方向に表示されます。
ブログ ページ
Brineテンプレート ファミリーでは、標準のグリッド/リスト ブログ ページが使用されます。このタイプのブログの独自の機能とスタイル オプションの詳細については、「バージョン7.0の標準的なグリッド/リスト ブログ ページ」を参照してください。
インデックス ページ
Brineのインデックス ページでは、複数のページのコンテンツがスタック セクションに変換されるため、1か所で様々な画像や情報を強調することができます。
- コンテンツ セクションは、テキスト、ボタン、その他のブロックを表示するのに最適です。
- ギャラリー インデックス セクションでは、画像がグリッドまたはスライドショー形式で表示されます。
コンテンツ セクション
コンテンツ セクションはレイアウト ページから作成されます。コンテンツ セクションを追加した後、ブロックを使用してカスタマイズします。
一部またはすべてのセクションの最小高さを設定するには、[インデックス: ページ] の [最小高さを適用] を使用します。
- これは、最初のセクションのみ、バナーがあるページ、またはすべてのページに対して設定できますが、どのページにも適用しないことを選択することもできます。
- [パディング] と [パディング (オーバーレイ ページ)] を使用して、すべてのセクションの高さを変更します。
- ページのコンテンツの高さが最小高さより大きい場合は、セクションがコンテンツに合わせて引き伸ばされます (パディングを含む)。
- 1つのセクションの高さを変更する場合は、ページのコンテンツに改行を追加してセクションを長くします。
ページのアイキャッチ画像を追加して、セクションに背景のバナー画像または動画を追加します。
- バナーはパララックス スクロールに対応しています。
- バナーがない場合、背景色はページと同じになります ([メイン] の [色] 微調整オプションを使用して設定)。
ギャラリー インデックス セクション
ギャラリー インデックス セクションはギャラリー ページから作成されます。ギャラリー インデックス セクションを追加した後、画像や動画を追加できます。
サイト スタイルの [インデックス: ギャラリー] セクションでは、次のことが可能です。
- [レイアウト] で、すべてのギャラリー インデックス セクションをスライドショーとして表示するか、グリッドとして表示するかを選択します。
- スペースを変更したり、フルブリード効果を作成したりするには、[サイドにスペースを適用] のチェックを外し、[スペース設定] 微調整オプションを使用します。
- [縦横比] で画像の形状を設定します。
- 上部のセクションがギャラリーの場合は、[最初のインデックス ギャラリーのオーバーレイ ヘッダー] を使用して、下部のヘッダーの後ろに表示するかどうかを選択します。
- [画像オーバーレイ] で画像にカラー フィルターを追加します。
- [ホバー スタイル] で画像にカーソルを合わせたときの動作を設定します。
ギャラリー インデックス セクションにはパララックス スクロールがありません。パララックスが有効になっている場合、ゆっくり動くコンテンツ セクションの上をスライドするように表示されます。
ギャラリー インデックス セクションの動画には、アイキャッチ画像が表示されます。動画にアイキャッチ画像がアップロードされていない場合、インデックスには線が引かれた黒いボックスが表示されます。これを修正するには、動画にアイキャッチ画像を追加します。
インデックス ナビゲーション
訪問者がインデックスを探索できるようにするには、次の手順に従います。
- [インデックス: スクロール インジケーター] 微調整オプションを使用して、最初のセクションに矢印、線、テキストを追加し、ユーザーが下方向にスクロールするように促します (コンテンツ セクションのみ)。
- [インデックス:ナビゲーション] の [スタイル] 微調整オプションを使用して、ナビゲーションの点または線を追加します。点または線をクリックすると、対応するセクションに移動します。
最初のセクションの下にスペースを追加する
サイトに境界線がある場合は、サイトに調和するスペースの線を最初のセクションの下に追加できます。
- 上部のセクションのタイプに応じて、[インデックス: ページ] の [最初のページの下の境界線を左右反転して複製] または [インデックス: ギャラリー] の [最初のギャラリーの下の境界線を左右反転して複製] 微調整オプションにチェックを入れます。
- 2番目のセクションは、バナーがないコンテンツ セクションである必要があります。
- スペースの色はページと同じです。最良の結果を実現するには、この色を境界線の色に合わせます。
インデックスに関するその他のヘルプ
以下の点に留意してください。
- インデックス ページにはイントロダクション エリアがなく、サブページのイントロダクション エリアは表示されません。
- ヘッダー ナビゲーションには、インデックス ページによって単一のリンクが作成されます。
- フッターには、インデックス ページによってすべてのサブページ リンクが表示されます。
- インデックスを使用して、スライドショー バナーまたはフル ページの背景画像を作成できます。
- 他のタイプのコンテンツの追加に関するヒントを参照してください。
- 詳細については、「インデックス ページを使用する」を参照してください。
構造とスタイル
サイトの外観を変更するには、これらのオプションを使用します。
Ajax読み込み
Ajaxは、ブログ ページなどコンテンツの多いページをより速く、より軽量にするための、サイト読み込みの特別な手法です。シームレスなブラウジングを実現するため、Ajax読み込みを有効にしておくことをおすすめします。
- Ajax読み込みを有効または無効にするには、[サイト: 読み込み] の下の [Ajax読み込み] 微調整オプションを行います。
- 他の [サイト: 読み込み] 微調整オプションで、ページの読み込み中に表示される読み込みバーのスタイルを設定したり、非表示にしたりします。
- 場合によっては、Ajaxがカスタム コード、アンカー リンク、分析と競合する場合があります。
- 詳細については、「Ajax読み込み」を参照してください。
境界線
ヘッダー、メイン コンテンツ エリア、フッターを囲むサイト全体のフレームを追加し、[サイト: 境界線] 微調整オプションでスタイルを設定します。カバー ページには境界線が表示されません。
フォント
次のサイト スタイル オプションを使用して、サイト上のフォントのスタイルを設定します。
- サイト フォント - [コンテンツ: フォント] および [コンテンツ: 色]
- バナー上のテキスト - すべての [(オーバーレイ)] 微調整オプション
- ギャラリー インデックス セクション - [インデックス: ギャラリー]
- ヘッダー エレメント - [ヘッダー] セクション内 (例: [ヘッダー: ブランディング])
- 商品ページ - [商品]
- ブログ ページ - [ブログ: タイポグラフィーと色]
テキスト リンクには下線が引かれます。
パララックス スクロール
パララックスは、背景の画像や動画がページのコンテンツよりもゆっくりと移動する特別なスクロール効果です。Brineのバナーはパララックス スクロールに対応しています。
共有ボタン
共有ボタンはほとんどのページに追加することができます。訪問者はこれらのボタンを使用してコンテンツをソーシャル プロフィールに共有します。
- ブログおよびストア ページ - 高度な共有ボタン
- アルバムおよびイベント ページ - クラシックな共有リンク
サイドバー
Brineではサイドバーがサポートされていません。代わりに、フッター、イントロダクション エリア、レイアウト ページに追加のコンテンツを追加します。
サイトの幅
[サイト] の次の微調整オプションで幅を設定することができます。
- [幅] でコンテンツ エリアの幅を設定します。
- [デザイン] で選択したレイアウトによって、コンテンツ エリアの表示方法が設定されます。
- サイトの境界線もレイアウトに影響します。
以下の例では、[幅] が880ピクセルに設定されています。コンテンツ エリアの背景色は、サイト スタイルの [メイン] セクションで設定されます。
デザイン: 全幅
コンテンツはブラウザーの幅から [サイド パディング] を引いた幅で表示されます。バナーはフルブリードで表示されます。
デザイン: 全体背景
コンテンツは [幅] から [サイド パディング] を引いた幅で表示されます。バナーはフルブリードで表示されます。
デザイン: 制限幅
コンテンツ エリアの外側は、[サイト] セクションの背景色で表示されます。バナーはコンテンツ エリアに表示されます。
コンテンツはめ込み
コンテンツはめ込みを使用すると、目を引くレイアウトを作成することができます。テキスト ブロックや引用ブロックなどの一部のブロックは、単一列に配置すると画像ブロックなどの他のページ コンテンツよりも狭く表示されます。
- これは、イントロダクション エリアやフッターなど、ブロックを追加できるすべてのエリアに影響します。
- [メイン] の [コンテンツはめ込み] で幅を設定します。
- はめ込みを削除するには、[コンテンツはめ込み] を0に設定します。
- さらに詳しいヘルプが必要な場合は、「コンテンツはめ込み」を参照してください。
背景色
サイトの背景色を設定するには、次の微調整オプションを使用します。
- メイン コンテンツ エリア - [メイン] の [色]
- サイド マージン - [サイト] の [背景]
- 枠線 - [サイト: 境界線] の [色]
- 上部のヘッダー - [ヘッダー: 上部] の [背景]
- 下部のヘッダー - メイン コンテンツ エリアと一致させるか、バナーを表示します。
- フッター - [フッター] の [背景色]
- インデックス セクション - メイン コンテンツ エリアと一致させるか、バナーを表示します。
- 透明なバナー画像の背後 - [メイン: オーバーレイ] の [オーバーレイの色] (この色が透明に設定されている場合でも)
ヒント: インデックスを使用すると、ページ全体に背景画像を表示することができます。
次の例は、様々な背景エリアを示しています。
モバイル
Squarespaceに組み込まれたレスポンシブ デザインを使用すると、どの端末でも見栄えがよくなるようにサイトが調整されます。Brineでは、モバイル端末や幅が狭いブラウザーでのサイトの表示方法をカスタマイズできます。
[モバイル] の [モバイル用分断点] 微調整オプションで、サイトがモバイル ビューに切り替わるブラウザーの幅を選択します。既定値は640ピクセルです。
ナビゲーション バー
モバイル ヘッダー エレメントは上部または下部のナビゲーション バーに表示されます。
- 上部または下部のバーを追加するには、ヘッダー エレメントをその中に移動します。たとえば、サイト スタイルの [モバイル: ブランディング] セクションに移動し、[位置: 左上] を選択して、上部のバーを追加します。
- [モバイル: 上部] で [モバイルの上部を固定] 微調整オプションで、上部のバーを上部に固定するか、ページと一緒に上方向にスクロールするかを選択します。
- 下部のバーは常に固定されています。
- [モバイル: 上部] と [モバイル: 下部] 微調整オプションで背景色を設定します。
ヘッダー エレメント
サイトのヘッダー エレメントはナビゲーション バーに表示され、個別のモバイル用スタイルが適用されます。
- サイト スタイルの各 [モバイル] セクションでスタイルを設定します。たとえば、[モバイル: ブランディング] 微調整オプションでサイトのタイトルやロゴのスタイルを設定します。
- ナビゲーションは☰アイコンに折りたたまれます。☰をタップすると、メインおよびセカンダリ ナビゲーションの両方が表示されます。
- ナビゲーションの背景色は、[モバイル メニュー: 全般] の [メニューの色] 微調整オプションで設定します。
- [モバイル メニュー: 全般] の [閉じるボタン] 微調整オプションで、ナビゲーション メニューを閉じるための [X] のスタイルを設定します。
- モバイルではソーシャル アイコンとタグラインが表示されません。
- 検索アイコンをタップすると、検索バーが表示されているオーバーレイが開きます。オーバーレイの背景はサイトの背景色に従います。
これらには別々のスタイルが設定されていますが、コンピューターとモバイルの両方で同じエレメントが表示されます。たとえば、次のように、可能なことと不可能なことがあります。
- 可能 - モバイル サイトのタイトルに別の色とフォントを指定する
- 可能 - モバイルでは検索バーを表示し、パソコンでは非表示にする
- 不可能 - パソコンではサイト タイトルを、モバイルではロゴを表示する
モバイルに関するその他のヘルプ
以下の点に留意してください。
- ストア ページにはモバイル用スタイル オプションがあります。
- モバイルではインデックス ナビゲーションが表示されません。
- パララックス スクロールはモバイルで機能します。
- 接続速度が遅い場合やブラウザーのバージョンが古い場合、動画バナーが読み込まれないことがあります。動画バナーを読み込めないときにモバイル用代替画像が表示されるように設定します。
- 長い見出しはハイフンで区切られ、次の行に分割されます。
- 一部のテンプレートとは異なり、モバイル用スタイルを無効にすることはできません。
- モバイル バナーと背景画像の切り抜きの問題については、トラブルシューティングのヒントをご覧ください。
- モバイル端末上でサイトがどのように動作するかについては、一般的なヒントを参照してください。
Brineファミリーのテンプレート
Brineファミリーのテンプレートはすべて、同じスタイル オプションと機能を備えています。Brineテンプレートは、バージョン7.0のテンプレート カタログで確認できます。
Brineファミリーには以下が含まれます。
- Aria
- Basil
- Blend
- Brine
- Burke
- Cacao
- Clay
- カスタム テンプレート (廃止)
- Ethan
- Fairfield
- Feed
- Foster
- Greenwich
- Hatch
- Heights
- Hunter
- Hyde
- Impact
- Jaunt
- Juke
- Keene
- Kin
- Lincoln (廃止)
- Maple
- Margot
- Marta
- Mentor
- Mercer
- Miller
- Mojave
- Moksha
- Motto
- Nueva
- Pedro
- Polaris
- Pursuit
- Rally
- Rover
- Royce
- Sofia
- Sonny
- Sonora
- Stella
- Thorne
- Vow
- Wav
- West
言語オプション
Brineは、次の2通りの言語オプションをサポートしています。