Brineテンプレート ファミリー

Brineテンプレ⁠ート フ⁠ァミリ⁠ーのスタイルと機能を紹介します⁠。

最終更新日 2024年10月23日

Brineフ⁠ァミリ⁠ーのテンプレ⁠ートを使用すると⁠、あらゆるブランドや企業に最適な⁠、プロフ⁠ェ⁠ッシ⁠ョナルなWebプレゼンスを構築できます⁠。ヘ⁠ッダ⁠ー⁠、フ⁠ッタ⁠ー⁠、コンテンツはめ込み⁠、モバイル用スタイルをカスタマイズして⁠、サイトを目立たせることができます⁠。フルブリ⁠ード バナ⁠ーを任意のペ⁠ージに追加したり⁠、インデ⁠ックスにスタ⁠ックしたりすることができます⁠。オプシ⁠ョンのパララ⁠ックス スクロ⁠ールを使用すると⁠、バナ⁠ーがペ⁠ージ コンテンツよりもゆ⁠っくりと移動するため⁠、奥行きと没入感が生まれます⁠。

このガイドでは⁠、Brineフ⁠ァミリ⁠ーの機能とデザイン オプシ⁠ョンについて説明します⁠。Brineのテンプレ⁠ートのリストを参照してください⁠。

[⁠サイト スタイル⁠] パネルでサイトのスタイルを設定します⁠。このガイドでは⁠、スタイル微調整オプシ⁠ョンと⁠、その微調整オプシ⁠ョンがサイト スタイル パネルに表示されるセクシ⁠ョンを太字で示しています⁠。

サポ⁠ートされているペ⁠ージ

Brineでは⁠、次のペ⁠ージ タイプがサポ⁠ートされています⁠。

ヘ⁠ッダ⁠ー

訪問者は⁠、上部のヘ⁠ッダ⁠ーを使用してサイトを移動します⁠。Brineでは⁠、ヘ⁠ッダ⁠ーは上部と下部のセクシ⁠ョンに分かれています⁠。

  • サイト スタイルの [⁠ヘ⁠ッダ⁠ー⁠: レイアウト⁠] セクシ⁠ョンで⁠、サイトのタイトルやロゴ⁠、ナビゲ⁠ーシ⁠ョン リンクなどのエレメントを上部および下部のヘ⁠ッダ⁠ーに追加します⁠。
  • 下部のヘ⁠ッダ⁠ーでは⁠、背景画像と⁠、独自のコンテンツを追加できるイントロダクシ⁠ョン エリアがサポ⁠ートされています⁠。
brine-topbottom.png

ヘ⁠ッダ⁠ーのスタイルを設定する

以下の [⁠ヘ⁠ッダ⁠ー⁠: 上部⁠] 微調整オプシ⁠ョンで⁠、上部のヘ⁠ッダ⁠ーのスタイルを設定します⁠。

  • [⁠パデ⁠ィング⁠] で高さを設定します⁠。
  • [⁠背景⁠] で色を設定します⁠。

下部のヘ⁠ッダ⁠ーには⁠、ペ⁠ージ バナ⁠ーが背景画像または動画として表示されます⁠。バナ⁠ーがない場合⁠、背景色はペ⁠ージと同じになります (⁠[⁠メイン⁠] の [⁠⁠] 微調整オプシ⁠ョンを使用して設定⁠)⁠。

下部のヘ⁠ッダ⁠ーの高さを変更するには⁠、次の手順に従います⁠。

  • すべてのペ⁠ージ - [⁠ヘ⁠ッダ⁠ー⁠:下部⁠] の [⁠パデ⁠ィング⁠] と⁠、[⁠メイン⁠] の [⁠イントロ パデ⁠ィング⁠] 微調整オプシ⁠ョンを変更します⁠。
  • 個⁠々のペ⁠ージ - イントロダクシ⁠ョン エリアに余分な改行を追加して高さを調整します⁠。
  • インデ⁠ックス ペ⁠ージ - 上部のインデ⁠ックス セクシ⁠ョンの高さを変更します⁠。

ヘ⁠ッダ⁠ー エレメントを追加してスタイルを設定する

次のいずれかのエレメントをどちらかのヘ⁠ッダ⁠ー セクシ⁠ョンに追加できます⁠。

サイト スタイルの [⁠ヘ⁠ッダ⁠ー⁠: レイアウト⁠] セクシ⁠ョンで⁠、各エレメントを表示する場所と非表示にする場所を選択します⁠。たとえば⁠、[⁠ブランデ⁠ィング ポジシ⁠ョン⁠: 中央上⁠] を選択して⁠、上部のヘ⁠ッダ⁠ーの中央にサイトのタイトルまたはロゴを追加します⁠。

各 [⁠ヘ⁠ッダ⁠ー⁠] セクシ⁠ョンの微調整オプシ⁠ョンを使用して⁠、各エレメントのスタイルを設定します⁠。たとえば⁠、[⁠ヘ⁠ッダ⁠ー⁠: メイン ナビゲ⁠ーシ⁠ョン⁠] に移動して⁠、リンクのフ⁠ォントと色を選択します⁠。

  • バナ⁠ーの上に表示されるように⁠、下部のヘ⁠ッダ⁠ーのエレメントには [⁠(⁠オ⁠ーバ⁠ーレイ⁠)⁠] の色を設定します⁠。
  • [⁠ヘ⁠ッダ⁠ー⁠: 上部⁠] と [⁠ヘ⁠ッダ⁠ー⁠: 下部⁠] の [⁠レイアウト⁠] 微調整オプシ⁠ョンで⁠、同じエリア (⁠たとえば⁠、[⁠中央下⁠]⁠) のエレメントをスタ⁠ックするかどうかを選択します⁠。
  • モバイルで見栄えが良くなるように⁠、個別のモバイル用スタイルを設定します⁠。

ヘ⁠ッダ⁠ーに関するその他のヘルプ

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

  • 最良の結果を得るには⁠、各エレメントをヘ⁠ッダ⁠ーの異なるエリアに配置します⁠。十分なスペ⁠ースがないと⁠、エレメントが重な⁠って表示されることがあります⁠。
  • 影響を受けるエレメントがサイトに追加されるまで⁠、一部の微調整オプシ⁠ョンは表示されません⁠。
  • 上部のヘ⁠ッダ⁠ーにエレメントがない場合⁠、ヘ⁠ッダ⁠ーは表示されません⁠。
  • その他のヒントについては⁠、「⁠サイト ヘ⁠ッダ⁠ーを作成する⁠」をご覧ください⁠。

ナビゲ⁠ーシ⁠ョン リンク

Brineには3つのナビゲ⁠ーシ⁠ョン エリアがあります⁠。

メイン ナビゲ⁠ーシ⁠ョン リンクとセカンダリ ナビゲ⁠ーシ⁠ョン リンクの特徴は次のとおりです⁠。

  • 上部または下部のヘ⁠ッダ⁠ーに表示できます⁠。
  • [⁠ヘ⁠ッダ⁠ー⁠: メイン ナビゲ⁠ーシ⁠ョン⁠] と [⁠ヘ⁠ッダ⁠ー⁠: セカンダリ ナビゲ⁠ーシ⁠ョン⁠] のスタイル微調整オプシ⁠ョンでスタイルが設定されます⁠。たとえば⁠、メインまたはセカンダリ ナビゲ⁠ーシ⁠ョン リンクのスタイルをボタンとして設定するには⁠、[⁠スタイル⁠: ボタン⁠] を選択します⁠。

フ⁠ッタ⁠ー ナビゲ⁠ーシ⁠ョン リンクの特徴は次のとおりです⁠。

  • サイトのフ⁠ッタ⁠ーに表示されます⁠。
  • [⁠フ⁠ッタ⁠ー⁠: ナビゲ⁠ーシ⁠ョン⁠] 微調整オプシ⁠ョンでスタイルが設定されます⁠。

バナ⁠ー

バナ⁠ーは⁠、ペ⁠ージのト⁠ーンを決める視覚的エレメントを作り出します⁠。バナ⁠ーを作成するには⁠、ペ⁠ージのアイキ⁠ャ⁠ッチ画像や動画を追加します⁠。

Brineにおいて⁠、バナ⁠ーは次のようになります⁠。

インデ⁠ックスでは⁠、複数のバナ⁠ーをスタ⁠ックすることができます⁠。

brine-banner.png

バナ⁠ーのスタイルを設定する

次のオプシ⁠ョンを使用して⁠、バナ⁠ーのスタイルを設定することができます⁠。

  • [⁠メイン⁠: オ⁠ーバ⁠ーレイ⁠] の [⁠オ⁠ーバ⁠ーレイの色⁠] 微調整オプシ⁠ョンでカラ⁠ー フ⁠ィルタ⁠ーを追加します⁠。
  • イントロダクシ⁠ョン エリアにテキストやいいね⁠!ボタン ブロ⁠ックなどの他のブロ⁠ックを追加します⁠。
  • イントロダクシ⁠ョン エリアを編集し⁠、改行を追加することで⁠、高さを変更することができます⁠。
  • [⁠サイト⁠:読み込み中⁠] の [⁠パララ⁠ックスを有効化⁠] 微調整オプシ⁠ョンで⁠、バナ⁠ーをペ⁠ージの他の部分よりもゆ⁠っくりとスクロ⁠ールさせるかどうかを選択します⁠。
  • サイト スタイルでは⁠、[⁠(⁠オ⁠ーバ⁠ーレイ⁠)⁠] 微調整オプシ⁠ョンで⁠、テキストやナビゲ⁠ーシ⁠ョン リンクなど⁠、バナ⁠ー画像上に表示されるエレメントに影響を与えます⁠。

切り抜きと中心設定

  • パララ⁠ックス スクロ⁠ールが有効にな⁠っている場合は⁠、[⁠サイト⁠:読み込み⁠] の [⁠パララ⁠ックス スマ⁠ート クロ⁠ップ⁠] 微調整オプシ⁠ョンを使用して⁠、バナ⁠ーが切り抜かれる量を最小限にします⁠。
  • 画像が予期しない方法で切り取られる場合は⁠、切り抜きに関するトラブルシ⁠ュ⁠ーテ⁠ィングのヒントをご覧ください⁠。
  • 焦点を変更して⁠、バナ⁠ー画像の中心設定の方法を選択します⁠。スクロ⁠ール中に画像が常に表示されるようにするには⁠、画像の中心近くに焦点を設定します⁠。

バナ⁠ーに関するその他のヘルプ

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

イントロダクシ⁠ョン エリア

下部のヘ⁠ッダ⁠ーのイントロダクシ⁠ョン エリアは⁠、テキスト⁠、画像⁠、その他のコンテンツを使用して編集できるペ⁠ージ固有のヘ⁠ッダ⁠ー エリアです⁠。この方法は⁠、個⁠々のペ⁠ージの上部をカスタマイズするのに最適です⁠。

イントロダクシ⁠ョン エリアは⁠、ペ⁠ージ バナ⁠ーの上に表示され⁠、コンテンツはめ込みの後に表示され⁠、バナ⁠ーがないレイアウト ペ⁠ージとインデ⁠ックス ペ⁠ージを除くすべてのペ⁠ージで使用できます⁠。

イントロダクシ⁠ョン エリアを編集するには⁠、次の手順に従います⁠。

  • ペ⁠ージ コンテンツの上のエリアにカ⁠ーソルを合わせ⁠、[⁠編集⁠] をクリ⁠ックします⁠。
  • ブロ⁠ックを使用してテキストやその他のコンテンツを追加します⁠。

サイトの編集中⁠、イントロダクシ⁠ョン エリアに余分なパデ⁠ィングが表示されることがあります⁠。イントロダクシ⁠ョン エリアの間隔が実際のサイトでどのように表示されるかを確認するには⁠、変更を保存し⁠、ペ⁠ージをプレビ⁠ュ⁠ー モ⁠ードで表示してください⁠。

brine-intro-area.png

フ⁠ッタ⁠ー

訪問者が必要な情報を見つけられるように⁠、サイト全体のフ⁠ッタ⁠ーをカスタマイズすることができます⁠。Brineのフ⁠ッタ⁠ーには次のものが含まれています⁠。

[⁠フ⁠ッタ⁠ー⁠] 微調整オプシ⁠ョンでフ⁠ォントや色を設定します⁠。フ⁠ッタ⁠ーを非表示にするには⁠、[⁠フ⁠ッタ⁠ーを表示⁠] のチ⁠ェ⁠ックを外します⁠。

レイアウト⁠: 列

ブロ⁠ック エリア⁠、ビジネスに関する情報⁠、ナビゲ⁠ーシ⁠ョンが水平に表示され⁠、上下にブロ⁠ック エリアが表示されます⁠。フ⁠ッタ⁠ーにおいて⁠、ドロ⁠ップダウンインデ⁠ックス ペ⁠ージはドロ⁠ップダウン メニ⁠ュ⁠ーではなく列を構築します⁠。インデ⁠ックス ペ⁠ージとドロ⁠ップダウンのタイトルはリンクではなくヘ⁠ッダ⁠ーとして表示され⁠、その下にサブペ⁠ージのリンクが表示されます⁠。

brine-footer-columns.png

レイアウト⁠: スタ⁠ック

ビジネスに関する情報とナビゲ⁠ーシ⁠ョンが垂直にスタ⁠ックされ⁠、上⁠、中間⁠、下にブロ⁠ック エリアが表示されます⁠。ドロ⁠ップダウン ペ⁠ージインデ⁠ックス ペ⁠ージのタイトルは表示されず⁠、そのサブペ⁠ージ リンクが水平方向に表示されます⁠。

brine-footer-stacked.png

ブログ ペ⁠ージ

Brineテンプレ⁠ート フ⁠ァミリ⁠ーでは⁠、標準のグリ⁠ッド/リスト ブログ ペ⁠ージが使用されます⁠。このタイプのブログの独自の機能とスタイル オプシ⁠ョンの詳細については⁠、「⁠バ⁠ージ⁠ョン7⁠.0の標準的なグリ⁠ッド/リスト ブログ ペ⁠ージ⁠」を参照してください⁠。

インデ⁠ックス ペ⁠ージ

Brineのインデ⁠ックス ペ⁠ージでは⁠、複数のペ⁠ージのコンテンツがスタ⁠ック セクシ⁠ョンに変換されるため⁠、1か所で様⁠々な画像や情報を強調することができます⁠。

brine-index-sections-scroll.gif

コンテンツ セクシ⁠ョン

コンテンツ セクシ⁠ョンはレイアウト ペ⁠ージから作成されます⁠。コンテンツ セクシ⁠ョンを追加した後⁠、ブロ⁠ックを使用してカスタマイズします⁠。

一部またはすべてのセクシ⁠ョンの最小高さを設定するには⁠、[⁠インデ⁠ックス⁠: ペ⁠ージ⁠] の [⁠最小高さを適用⁠] を使用します⁠。

  • これは⁠、最初のセクシ⁠ョンのみ⁠、バナ⁠ーがあるペ⁠ージ⁠、またはすべてのペ⁠ージに対して設定できますが⁠、どのペ⁠ージにも適用しないことを選択することもできます⁠。
  • [⁠パデ⁠ィング⁠] と [⁠パデ⁠ィング (⁠オ⁠ーバ⁠ーレイ ペ⁠ージ⁠)⁠] を使用して⁠、すべてのセクシ⁠ョンの高さを変更します⁠。
  • ペ⁠ージのコンテンツの高さが最小高さより大きい場合は⁠、セクシ⁠ョンがコンテンツに合わせて引き伸ばされます (⁠パデ⁠ィングを含む⁠)⁠。
  • 1つのセクシ⁠ョンの高さを変更する場合は⁠、ペ⁠ージのコンテンツに改行を追加してセクシ⁠ョンを長くします⁠。

ペ⁠ージのアイキ⁠ャ⁠ッチ画像を追加して⁠、セクシ⁠ョンに背景のバナ⁠ー画像または動画を追加します⁠。

  • バナ⁠ーはパララ⁠ックス スクロ⁠ールに対応しています⁠。
  • バナ⁠ーがない場合⁠、背景色はペ⁠ージと同じになります (⁠[⁠メイン⁠] の [⁠⁠] 微調整オプシ⁠ョンを使用して設定⁠)⁠。

ギ⁠ャラリ⁠ー インデ⁠ックス セクシ⁠ョンはギ⁠ャラリ⁠ー ペ⁠ージから作成されます⁠。ギ⁠ャラリ⁠ー インデ⁠ックス セクシ⁠ョンを追加した後⁠、画像や動画を追加できます⁠。

サイト スタイルの [⁠インデ⁠ックス⁠: ギ⁠ャラリ⁠ー⁠] セクシ⁠ョンでは⁠、次のことが可能です⁠。

  • [⁠レイアウト⁠] で⁠、すべてのギ⁠ャラリ⁠ー インデ⁠ックス セクシ⁠ョンをスライドシ⁠ョ⁠ーとして表示するか⁠、グリ⁠ッドとして表示するかを選択します⁠。
  • 間隔を変更したり⁠、フルブリ⁠ード効果を作成したりするには⁠、[⁠サイドに間隔を適用⁠] のチ⁠ェ⁠ックを外し⁠、[⁠間隔設定⁠] 微調整オプシ⁠ョンを使用します⁠。
  • [⁠縦横比⁠] で画像の形状を設定します⁠。
  • 上部のセクシ⁠ョンがギ⁠ャラリ⁠ーの場合は⁠、[⁠最初のインデ⁠ックス ギ⁠ャラリ⁠ーのオ⁠ーバ⁠ーレイ ヘ⁠ッダ⁠ー⁠] を使用して⁠、下部のヘ⁠ッダ⁠ーの後ろに表示するかどうかを選択します⁠。
  • [⁠画像オ⁠ーバ⁠ーレイ⁠] で画像にカラ⁠ー フ⁠ィルタ⁠ーを追加します⁠。
  • [⁠ホバ⁠ー スタイル⁠] で画像にカ⁠ーソルを合わせたときの動作を設定します⁠。

ギ⁠ャラリ⁠ー インデ⁠ックス セクシ⁠ョンにはパララ⁠ックス スクロ⁠ールがありません⁠。パララ⁠ックスが有効にな⁠っている場合⁠、ゆ⁠っくり動くコンテンツ セクシ⁠ョンの上をスライドするように表示されます⁠。

ギ⁠ャラリ⁠ー インデ⁠ックス セクシ⁠ョンの動画には⁠、アイキ⁠ャ⁠ッチ画像が表示されます⁠。動画にアイキ⁠ャ⁠ッチ画像がア⁠ップロ⁠ードされていない場合⁠、インデ⁠ックスには線が引かれた黒いボ⁠ックスが表示されます⁠。これを修正するには⁠、動画にアイキ⁠ャ⁠ッチ画像を追加します⁠。

インデ⁠ックス ナビゲ⁠ーシ⁠ョン

訪問者がインデ⁠ックスを探索できるようにするには⁠、次の手順に従います⁠。

  • [⁠インデ⁠ックス⁠: スクロ⁠ール インジケ⁠ータ⁠ー⁠] 微調整オプシ⁠ョンを使用して⁠、最初のセクシ⁠ョンに矢印⁠、線⁠、テキストを追加し⁠、ユ⁠ーザ⁠ーが下方向にスクロ⁠ールするように促します (⁠コンテンツ セクシ⁠ョンのみ⁠)⁠。
  • [⁠インデ⁠ックス⁠:ナビゲ⁠ーシ⁠ョン⁠] の [⁠スタイル⁠] 微調整オプシ⁠ョンを使用して⁠、ナビゲ⁠ーシ⁠ョンの点または線を追加します⁠。点または線をクリ⁠ックすると⁠、対応するセクシ⁠ョンに移動します⁠。
brine-index-nav.png

最初のセクシ⁠ョンの下にスペ⁠ースを追加する

サイトに境界線がある場合は⁠、サイトに調和するスペ⁠ースの線を最初のセクシ⁠ョンの下に追加できます⁠。

  • 上部のセクシ⁠ョンのタイプに応じて⁠、[⁠インデ⁠ックス⁠: ペ⁠ージ⁠] の [⁠最初のペ⁠ージの下の境界線を左右反転して複製⁠] または [⁠インデ⁠ックス⁠: ギ⁠ャラリ⁠ー⁠] の [⁠最初のギ⁠ャラリ⁠ーの下の境界線を左右反転して複製⁠] 微調整オプシ⁠ョンにチ⁠ェ⁠ックを入れます⁠。
  • 2番目のセクシ⁠ョンは⁠、バナ⁠ーがないコンテンツ セクシ⁠ョンである必要があります⁠。
  • スペ⁠ースの色はペ⁠ージと同じです⁠。最良の結果を実現するには⁠、この色を境界線の色に合わせます⁠。
brine-mirror-site-border.png

インデ⁠ックスに関するその他のヘルプ

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

構造とスタイル

サイトの外観を変更するには⁠、これらのオプシ⁠ョンを使用します⁠。

Ajax読み込み

Ajaxは⁠、ブログ ペ⁠ージなどコンテンツの多いペ⁠ージをより速く⁠、より軽量にするための⁠、サイト読み込みの特別な手法です⁠。シ⁠ームレスなブラウジングを実現するため⁠、Ajax読み込みを有効にしておくことをおすすめします⁠。

  • Ajax読み込みを有効または無効にするには⁠、[⁠サイト⁠: 読み込み⁠] の下の [⁠Ajax読み込み⁠] 微調整オプシ⁠ョンを行います⁠。
  • 他の [⁠サイト⁠: 読み込み⁠] 微調整オプシ⁠ョンで⁠、ペ⁠ージの読み込み中に表示される読み込みバ⁠ーのスタイルを設定したり⁠、非表示にしたりします⁠。
  • 場合によ⁠っては⁠、Ajaxがカスタム コ⁠ード⁠、アンカ⁠ー リンク⁠、分析と競合する場合があります⁠。
  • 詳細については⁠、「⁠Ajax読み込み⁠」を参照してください⁠。

境界線

ヘ⁠ッダ⁠ー⁠、メイン コンテンツ エリア⁠、フ⁠ッタ⁠ーを囲むサイト全体のフレ⁠ームを追加し⁠、[⁠サイト⁠: 境界線⁠] 微調整オプシ⁠ョンでスタイルを設定します⁠。カバ⁠ー ペ⁠ージには境界線が表示されません⁠。

brine-border.png

フ⁠ォント

次のサイト スタイル オプシ⁠ョンを使用して⁠、サイト上のフ⁠ォントのスタイルを設定します⁠。

  • サイト フ⁠ォント - [⁠コンテンツ⁠: フ⁠ォント⁠] および [⁠コンテンツ⁠: 色⁠]
  • バナ⁠ー上のテキスト - すべての [⁠(⁠オ⁠ーバ⁠ーレイ⁠)⁠] 微調整オプシ⁠ョン
  • ギ⁠ャラリ⁠ー インデ⁠ックス セクシ⁠ョン - [⁠インデ⁠ックス⁠: ギ⁠ャラリ⁠ー⁠]
  • ヘ⁠ッダ⁠ー エレメント - [⁠ヘ⁠ッダ⁠ー⁠] セクシ⁠ョン内 (⁠例⁠: [⁠ヘ⁠ッダ⁠ー⁠: ブランデ⁠ィング⁠]⁠)
  • 商品ペ⁠ージ - [⁠商品⁠]
  • ブログ ペ⁠ージ - [⁠ブログ⁠: タイポグラフ⁠ィ⁠ーと色⁠]

テキスト リンクには下線が引かれます⁠。

パララ⁠ックス スクロ⁠ール

パララ⁠ックスは⁠、背景の画像や動画がペ⁠ージのコンテンツよりもゆ⁠っくりと移動する特別なスクロ⁠ール効果です⁠。Brineのバナ⁠ーはパララ⁠ックス スクロ⁠ールに対応しています⁠。

共有ボタン

共有ボタンはほとんどのペ⁠ージに追加することができます⁠。訪問者はこれらのボタンを使用してコンテンツをソ⁠ーシ⁠ャル プロフ⁠ィ⁠ールに共有します⁠。

  • ブログおよびストア ペ⁠ージ - 高度な共有ボタン
  • アルバムおよびイベント ペ⁠ージ - クラシ⁠ックな共有リンク

Brineではサイドバ⁠ーがサポ⁠ートされていません⁠。代わりに⁠、フ⁠ッタ⁠ー⁠、イントロダクシ⁠ョン エリア⁠、レイアウト ペ⁠ージに追加のコンテンツを追加します⁠。

サイトの幅

[⁠サイト⁠] の次の微調整オプシ⁠ョンで幅を設定することができます⁠。

  • [⁠⁠] でコンテンツ エリアの幅を設定します⁠。
  • [⁠デザイン⁠] で選択したレイアウトによ⁠って⁠、コンテンツ エリアの表示方法が設定されます⁠。
  • サイトの境界線もレイアウトに影響します⁠。

以下の例では⁠、[⁠⁠] が880ピクセルに設定されています⁠。コンテンツ エリアの背景色は⁠、サイト スタイルの [⁠メイン⁠] セクシ⁠ョンで設定されます⁠。

デザイン⁠: 全幅

コンテンツはブラウザ⁠ーの幅から [⁠サイド パデ⁠ィング⁠] を引いた幅で表示されます⁠。バナ⁠ーはフルブリ⁠ードで表示されます⁠。

brine-full-width.png

デザイン⁠: 全体背景

コンテンツは [⁠⁠] から [⁠サイド パデ⁠ィング⁠] を引いた幅で表示されます⁠。バナ⁠ーはフルブリ⁠ードで表示されます⁠。

brine-full-background.png

デザイン⁠: 制限幅

コンテンツ エリアの外側は⁠、[⁠サイト⁠] セクシ⁠ョンの背景色で表示されます⁠。バナ⁠ーはコンテンツ エリアに表示されます⁠。

brine-constrained-width.png

コンテンツはめ込み

コンテンツはめ込みを使用すると⁠、目を引くレイアウトを作成することができます⁠。テキスト ブロ⁠ックや引用ブロ⁠ックなどの一部のブロ⁠ックは⁠、単一列に配置すると画像ブロ⁠ックなどの他のペ⁠ージ コンテンツよりも狭く表示されます⁠。

  • これは⁠、イントロダクシ⁠ョン エリアフ⁠ッタ⁠ーなど⁠、ブロ⁠ックを追加できるすべてのエリアに影響します⁠。
  • [⁠メイン⁠] の [⁠コンテンツはめ込み⁠] で幅を設定します⁠。
  • はめ込みを削除するには⁠、[⁠コンテンツはめ込み⁠] を0に設定します⁠。
  • さらに詳しいヘルプが必要な場合は⁠、「⁠コンテンツはめ込み⁠」を参照してください⁠。
brine-content-inset.png

背景色

サイトの背景色を設定するには⁠、次の微調整オプシ⁠ョンを使用します⁠。

  • メイン コンテンツ エリア - [⁠メイン⁠] の [⁠⁠]
  • サイド マ⁠ージン - [⁠サイト⁠] の [⁠背景⁠]
  • 枠線 - [⁠サイト⁠: 境界線⁠] の [⁠⁠]
  • 上部のヘ⁠ッダ⁠ー - [⁠ヘ⁠ッダ⁠ー⁠: 上部⁠] の [⁠背景⁠]
  • 下部のヘ⁠ッダ⁠ー - メイン コンテンツ エリアと一致させるか⁠、バナ⁠ーを表示します⁠。
  • フ⁠ッタ⁠ー - [⁠フ⁠ッタ⁠ー⁠] の [⁠背景色⁠]
  • インデ⁠ックス セクシ⁠ョン - メイン コンテンツ エリアと一致させるか⁠、バナ⁠ーを表示します⁠。
  • 透明なバナ⁠ー画像の背後 - [⁠メイン⁠: オ⁠ーバ⁠ーレイ⁠] の [⁠オ⁠ーバ⁠ーレイの色⁠] (⁠この色が透明に設定されている場合でも⁠)

ヒント

インデ⁠ックスを使用すると⁠、ペ⁠ージ全体に背景画像を表示することができます⁠。

次の例は⁠、様⁠々な背景エリアを示しています⁠。

brine-background-colors.png

モバイル

Squarespaceに組み込まれたレスポンシブ デザインを使用すると⁠、どの端末でも見栄えがよくなるようにサイトが調整されます⁠。Brineでは⁠、モバイル端末や幅が狭いブラウザ⁠ーでのサイトの表示方法をカスタマイズできます⁠。

[⁠モバイル⁠] の [⁠モバイル用分断点⁠] 微調整オプシ⁠ョンで⁠、サイトがモバイル ビ⁠ュ⁠ーに切り替わるブラウザ⁠ーの幅を選択します⁠。既定値は640ピクセルです⁠。

モバイル ヘ⁠ッダ⁠ー エレメントは上部または下部のナビゲ⁠ーシ⁠ョン バ⁠ーに表示されます⁠。

  • 上部または下部のバ⁠ーを追加するには⁠、ヘ⁠ッダ⁠ー エレメントをその中に移動します⁠。たとえば⁠、サイト スタイルの [⁠モバイル⁠: ブランデ⁠ィング⁠] セクシ⁠ョンに移動し⁠、[⁠位置⁠: 左上⁠] を選択して⁠、上部のバ⁠ーを追加します⁠。
  • [⁠モバイル⁠: 上部⁠] で [⁠モバイルの上部を固定⁠] 微調整オプシ⁠ョンで⁠、上部のバ⁠ーを上部に固定するか⁠、ペ⁠ージと一緒に上方向にスクロ⁠ールするかを選択します⁠。
  • 下部のバ⁠ーは常に固定されています⁠。
  • [⁠モバイル⁠: 上部⁠] と [⁠モバイル⁠: 下部⁠] 微調整オプシ⁠ョンで背景色を設定します⁠。
brine-mobilebars.png

ヘ⁠ッダ⁠ー エレメント

サイトのヘ⁠ッダ⁠ー エレメントはナビゲ⁠ーシ⁠ョン バ⁠ーに表示され⁠、個別のモバイル用スタイルが適用されます⁠。

  • サイト スタイルの各 [⁠モバイル⁠] セクシ⁠ョンでスタイルを設定します⁠。たとえば⁠、[⁠モバイル⁠: ブランデ⁠ィング⁠] 微調整オプシ⁠ョンでサイトのタイトルやロゴのスタイルを設定します⁠。
  • ナビゲ⁠ーシ⁠ョンは☰アイコンに折りたたまれます⁠。☰をタ⁠ップすると⁠、メインおよびセカンダリ ナビゲ⁠ーシ⁠ョンの両方が表示されます⁠。
  • ナビゲ⁠ーシ⁠ョンの背景色は⁠、[⁠モバイル メニ⁠ュ⁠ー⁠: 全般⁠] の [⁠メニ⁠ュ⁠ーの色⁠] 微調整オプシ⁠ョンで設定します⁠。
  • [⁠モバイル メニ⁠ュ⁠ー⁠: 全般⁠] の [⁠閉じるボタン⁠] 微調整オプシ⁠ョンで⁠、ナビゲ⁠ーシ⁠ョン メニ⁠ュ⁠ーを閉じるための [⁠X⁠] のスタイルを設定します⁠。
  • モバイルではソ⁠ーシ⁠ャル アイコンとタグラインが表示されません⁠。
  • 検索アイコンをタ⁠ップすると⁠、検索バ⁠ーが表示されているオ⁠ーバ⁠ーレイが開きます⁠。オ⁠ーバ⁠ーレイの背景はサイトの背景色に従います⁠。

これらには別⁠々のスタイルが設定されていますが⁠、コンピ⁠ュ⁠ータ⁠ーとモバイルの両方で同じエレメントが表示されます⁠。たとえば⁠、次のように⁠、可能なことと不可能なことがあります⁠。

  • 可能 - モバイル サイトのタイトルに別の色とフ⁠ォントを指定する
  • 可能 - モバイルでは検索バ⁠ーを表示し⁠、パソコンでは非表示にする
  • 不可能 - パソコンではサイトのタイトルを⁠、モバイルではロゴを表示する

モバイルに関するその他のヘルプ

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

Brineフ⁠ァミリ⁠ーのテンプレ⁠ート

Brineフ⁠ァミリ⁠ーのテンプレ⁠ートはすべて⁠、同じスタイル オプシ⁠ョンと機能を備えています⁠。Brineテンプレ⁠ートは⁠、バ⁠ージ⁠ョン7⁠.0のテンプレ⁠ート カタログで確認できます⁠。

Brineフ⁠ァミリ⁠ーには以下が含まれます⁠。

言語オプシ⁠ョン

Brineは⁠、次の2通りの言語オプシ⁠ョンをサポ⁠ートしています⁠。

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

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

  • Squarespace Expertを雇う

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