ナビゲーション リンク スタイルは主にサイトのヘッダーによって設定されます。ヘッダー エディターでは、以下の設定を変更できます。

• ナビゲーション レイアウト
• ナビゲーションの色
• ナビゲーション リンクの間隔
• テキストの周りのパディング
• ナビゲーションを固定するかどうか
• コンピューターとモバイル端末でのナビゲーションの表示方法

サイト スタイルのオプションを使用して、フォントとサイズを変更することもできます。 詳細については、以下のセクションをご覧ください。

すべてのテンプレート ファミリーにはそれぞれ独自のサイト スタイルがあるため、ナビゲーション リンクの更新方法に関するルールは1つではありません。テンプレートがサポートするスタイル オプションを見つけるには、次のヒントを使用してください。

• サイト スタイルを開くには、[デザイン] パネルを開き、[サイト スタイル] をクリックします。
• 左側の微調整オプションをスクロールし、関連する微調整オプションを探します。通常、微調整オプションには「ナビゲーション」という単語が含まれます。
• 右側のサイト プレビューでサイトのナビゲーションにマウスを移動することもできます。周囲に青い蛍光ペンのボックスが表示されたら、任意のナビゲーション リンクをクリックします。これにより、ナビゲーション リンクに影響しない微調整オプションが除外されます。完了したら、[すべて表示] をクリックしてメイン ビューに戻ります。

以下の例は、Brineファミリーの一部であるThorneテンプレートでの見え方を示しています。

既定では、ナビゲーション フォントはサイト全体のフォントと一致します。ナビゲーションに別のフォント タイプまたはサイズを設定するには、以下の手順に従います。

1. ページの編集中に、[サイト スタイル] を開き、[フォント] の横にある＞をクリックします。
2. [スタイルの割り当て] をクリックします。
3. [サイト ナビゲーション] をクリックします。
4. フォントを変更するには、[スタイル] をクリックしてから、[カスタム] を選択します。 新しいフォント ファミリー、太さ、スタイル、その他の詳細を選択します。[保存] をクリックして変更を適用します。
5. サイズを変更するには、[サイズ] をクリックしてプリセットの [段落] サイズを選択するか、[カスタム] を選択します。カスタム サイズを設定するには、スライダーを使用するか、新しいrem値を手動で入力します。[保存] をクリックして変更を適用します。

ヒント: バージョン7.1でフォント サイズにrem値を使用する方法については、「フォントを変更するを参照してください。

ナビゲーション フォントを変更するには、微調整オプション名の横にある [v] アイコンをクリックしてドロップダウン メニューを開きます。これにより、次の変更が可能です。

• フォント名
• スタイル
• サイズ
• 行の高さ
• 文字の間隔

詳しくは、「フォントを変更する」をご覧ください。

モバイル ヘッダー オーバーレイのカラー テーマを変更することもできます。

ナビゲーション リンクの色を変更するには、サイト スタイルで色の微調整オプションをクリックします。セレクターの上部にある色をクリックして新しい色を選択し、四角形で色合いを選択します。テキスト フィールドに特定の値を入力することもできます。詳細については、「色を変更する」またはサイトのテンプレート ガイドを参照してください。

ナビゲーション リンクの位置と間隔を変更するには、コンピューターでのサイトのヘッダーの表示方法を編集します。また、モバイル端末でのメニュー アイコンの外観や配置をカスタマイズすることもできます。

一部のテンプレートでは、リンクの位置を変更できます。サイト スタイルでは、[ナビゲーション位置]、[ナビゲーション配置] などのような名前の微調整オプションを探してください。テンプレートで利用可能な位置を確認するには、以下の表を確認してください。

ヒント: 一部のテンプレートは固定ナビゲーション (別名「スティッキー」ナビゲーション) をサポートしています。このナビゲーションは、ページを下にスクロールしている間、ブラウザーの上部の同じ位置に表示されます。

テンプレート別のナビゲーション表示

サイトのナビゲーション レイアウトはサイトのテンプレートに依存します。また、モバイル端末では表示が異なります。タブレットなどの大型のモバイル端末では、コンピューター用のスタイルが表示される場合があります。

以下のテンプレート ファミリーで、メイン ナビゲーションがコンピューターでどのように表示されるかを示します。

リンクの間隔を変更する

ナビゲーション リンク周辺の間隔を変更するには、サイト スタイルでヘッダー、バナー、またはナビゲーションを変更する微調整オプションを探してください。微調整オプションはテンプレートによって異なりますが、リンクの間隔の微調整オプションには通常、パディング、間隔、幅などの単語が含まれます。

モバイル ナビゲーションのスタイルを設定するには、サイトのヘッダーを編集します。ヘッダー エディターで、[モバイル] アイコンをクリックして、メニュー アイコンのレイアウトやタイプなど、モバイル固有のスタイルを設定します。

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

• ヘッダー ボタンは、常に [メニュー] リンクまたは [☰] アイコンの後ろにナビゲーション リンクとともに表示されます。
• モバイル ナビゲーションのフォント サイズは変更できません。
• メニュー アイコンをコンピューターに常時表示させることはできません。
• ヘッダーからメニュー アイコンを削除するには、すべてのページが [リンクなし] セクションにあることを確認し、ショッピング カートを除くすべてのヘッダー エレメントを無効にします。カートを有効にしても、メニュー アイコンは表示されません。

多くの場合、モバイル ナビゲーションは、ブランディングの一貫性を保つためにコンピューターのディスプレイからスタイルを継承します。一部のテンプレートには高度なモバイル用スタイル オプションがあり、より細かい制御ができます。詳細については、テンプレートのガイドをご参照ください。

どの微調整オプションがモバイル ナビゲーションに影響するかを調べるには、サイト スタイルを開く前に電話ビューでナビゲーションを開きます。

1. 端末別プレビューを電話に切り替えます。
2. ナビゲーション リンク (通常は [☰]) をクリックすると、モバイル ナビゲーションが表示されます。
3. [ホーム] メニューで、[Webサイト]、[デザイン]、[サイト スタイル] の順にクリックします。モバイル ナビゲーションは開いたままになります。

ヒント: モバイルでナビゲーションが表示されない場合は、背景またはヘッダーの色をナビゲーション テキストと同じ色に設定していないことを確認してください。リンクは、モバイルではこの色で表示される場合があります。

テンプレート別のメニュー アイコンまたはリンクのデザイン

以下のテンプレート ファミリーでは、[☰] アイコンまたはメニュー リンクは次のように表示されます。

空のモバイル ナビゲーション アイコン

一部のテンプレートでは、すべてのページが [リンクなし] セクションにある場合でも、アイコンは常にモバイルに表示されます。

次のテンプレート ファミリーのメニュー アイコンは非表示にできます。

• Brineファミリー
• Farroファミリー

[デザイン] パネルを開き、[サイト スタイル] をクリックします。[モバイル: メニュー アイコン] セクションまでスクロールし、[メニュー アイコンの位置] 微調整オプション [非表示] に設定します。

次のテンプレート ファミリーには、モバイル ナビゲーション アイコンを非表示にする組み込みの機能はありません。

• Bedford
• Forte
• Galapagos
• Montauk
• Wells
• York

ヒント: カスタム コードを追加すると、モバイル ナビゲーション アイコンを非表示にすることができます。詳細については、Squarespace Forumのこちらの投稿をご覧ください。

ただし、カスタム コードの変更は弊社サポートの範囲外です。これは、コード ベースのソリューションのセットアップやトラブルシューティングもサポート対象外であることを意味します。