サイトの各ページの上部に表示されるメニューやその他のエレメントのスタイルを設定します。

サイト ヘッダーには、ナビゲーションとタイトルまたはロゴが表示されます。ヘッダーはサイト全体で同じように見え、訪問者がコンテンツをナビゲートして操作する方法に大きな役割を果たします。ヘッダーはサイトの上部に配置されます。

このガイドでは、サイト ヘッダーを作成する方法と、ショッピング カート アイコン、ソーシャル アイコン、コール トゥ アクション ボタンなどの各種の機能を表示する方法について説明します。ヘッダーは、サイトのすべてのページで同じです。

注: ページ固有のヘッダーを作成したり、特定のページのエレメントを削除したりすることはできません。ただし、サイトがバージョン7.1の場合、特定の種類のページでは、ヘッダーを非表示にすることができます。

動画を見る - ヘッダーを作成する

ヘッダーを作成する

サイトがバージョン7.0の場合、ヘッダーはサイトのテンプレートの一部です。詳細については、この後にある7.0の機能のセクションに進んでください。

サイトを作成するときに、選択したデザインによっては、ヘッダーにサイトのタイトル、ナビゲーション リンク、またはその他のエレメントがすでに含まれている場合があります。

ナビゲーション リンク

ナビゲーション リンクを変更するには、[ページ] パネルでページを追加、編集、または削除します。リンクを並べ替える方法は次のとおりです。

1. サイトのプレビューの左上隅にある [編集] をクリックします。
2. ヘッダーの上にマウスを置き、[サイト ヘッダーを編集] をクリックします。
3. ナビゲーション リンクをクリックしてから鉛筆アイコンをクリックします。
4. ナビゲーション リンクをクリックしてドラッグし、目的の順序に並べます。

ここでリンクを並べ替えると、[ページ] パネルでもリンクが並べ替えられることに注意してください。

ヘッダーの作成時に、サイト全体のスタイルを設定したり、コンピューターとモバイル端末の両方でのヘッダーの表示方法を選択したりできます。

サイト全体のヘッダー デザインを設定する

サイト全体のヘッダー デザインを設定する方法は次のとおりです。

1. サイトのプレビューの左上隅にある [編集] をクリックします。
2. ヘッダーの上にマウスを置き、[サイト ヘッダーを編集] をクリックします。
3. サイトのタイトルを編集したり、ロゴ画像を追加するには、サイトのタイトルまたはロゴをクリックし、鉛筆アイコンをクリックします。ロゴはサイトのタイトルの代わりに表示されます。ロゴを使用する場合は、サイトのタイトルも必ず追加してください。別のSEOタイトルを追加しない限り、検索エンジンは検索結果とブラウザーのタブにこのタイトルを使用します。
4. サイトのタイトルとロゴの編集が完了したら、エディターの外側の任意の場所をクリックして、サイト ヘッダーの編集を続けます。
5. ボタン、ソーシャル アイコン、ショッピング カート アイコン、顧客用アカウントのログイン、または言語オプションを追加または非表示にするには、[エレメントを追加] をクリックして、トグルをオフまたはオンに切り替えます。サイト ヘッダーの編集を続けるには、エディターの外側の任意の場所をクリックします。
6. [保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了]、[保存] の順にクリックしてエディターを閉じます。

コンピューターのレイアウトを設定する

コンピューターでのヘッダーの表示方法を設定する方法は次のとおりです。

1. サイトのプレビューの左上隅にある [編集] をクリックします。
2. ヘッダーの上にマウスを置き、[サイト ヘッダーを編集] をクリックします。確実にデスクトップ表示にするには、右上の [コンピューター] アイコンをクリックします。
3. レイアウトを変更するには、[デザインを編集] をクリックします。現在のレイアウトをクリックして、すべてのオプションを確認します。レイアウトをクリックして、サイト上でプレビューします。
4. ヘッダー コンテンツの幅を設定するには、[フル] または [はめ込み] をクリックします。
5. スライダーを使用して、リンク、ソーシャル アイコン、およびエレメント間のパディングと間隔を変更します。
6. 以下のエフェクトから選択します。これらを編集するとコンピュータとモバイルの両方の表示に適用されることに注意してください。
   • ドロップ シャドウ - [ドロップ シャドウ] トグルをオンに切り替えると、ヘッダーの周囲に影の効果が追加されます。表示される設定を使用して、色、広がりの程度、距離を選択し、ぼかし効果を追加します。
   • 境界線 - [境界線] トグルをオンに切り替えて、ヘッダーの周囲に境界線を追加します。表示される設定を使用して、色、位置、線の太さを選択します。
7. ヘッダーの背景スタイルを追加するには、[デザインを編集] をクリックし、[色] タブをクリックします。ここでの変更は、コンピューターとモバイルの両方の表示に適用されます。オプションの詳細については以下をご覧ください。
8. ヘッダーをサイトの上部に固定するには、[デザイン] タブをクリックし、[固定位置] トグルをオンに切り替えます。ヘッダーが固定されると、[固定ヘッダースタイル] を [基本] (常にサイトの上部に表示される) または [スクロールで戻る] (上にスクロールするとサイトの上部に表示される) に設定できます。デバイスによっては、どちらのタイプの固定ヘッダーも、スクロール時にわずかに拡大または縮小する場合があります。ここでの変更は、コンピューターとモバイルの両方の表示に適用されます。

モバイルのレイアウトとスタイルを設定する

1. モバイル表示に切り替えるには、画面右上の [モバイル] アイコンをクリックします。サイトのプレビューは自動的にモバイル ビューに切り替わります。
2. レイアウトを変更するには、[デザインを編集] をクリックします。現在のレイアウトをクリックして、すべてのオプションを確認します。レイアウトをクリックして、サイト上でプレビューします。
3. 以下のエフェクトから選択します。これらを編集するとコンピュータとモバイルの両方の表示に適用されることに注意してください。
   • ドロップ シャドウ - [ドロップ シャドウ] トグルをオンに切り替えると、ヘッダーの周囲に影の効果が追加されます。表示される設定を使用して、色、広がりの程度、距離を選択し、ぼかし効果を追加します。
   • 境界線 - [境界線] トグルをオンに切り替えて、ヘッダーの周囲に境界線を追加します。表示される設定を使用して、色、位置、線の太さを選択します。
4. ヘッダーをサイトの上部に固定するには、[デザイン] タブをクリックし、[固定位置] トグルをオンに切り替えます。ヘッダーが固定されると、[固定ヘッダースタイル] を [基本] (常にサイトの上部に表示される) または [スクロールで戻る] (上にスクロールするとサイトの上部に表示される) に設定できます。デバイスによっては、どちらのタイプの固定ヘッダーも、スクロール時にわずかに拡大または縮小する場合があります。ここでの変更は、コンピューターとモバイルの両方の表示に適用されます。
5. ヘッダーの背景スタイルを追加するには、[デザインを編集] をクリックし、[色] タブをクリックします。ここでの変更は、コンピューターとモバイルの両方の表示に適用されます。オプションの詳細については以下をご覧ください。
6. リンクが展開されたときのメニューの表示方法を変更するには、[メニューを表示]、[デザインを編集] の順にクリックします。配置やリンクの間隔を設定したり、カラー パレットを選択したりできます。メニュー オーバーレイの微調整を使用して、モバイル特有のリンク、ボタン、ボタンのテキスト、および背景色を設定します。
7. メニューを折りたたんだときのメニューの表示方法を変更するには、[メニュー] アイコンを選択します。
8. [保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了]、[保存] の順にクリックしてエディターを閉じます。

ヒント:モバイル ヘッダーに別のロゴ画像を追加すると、モバイル訪問者専用の外観を作り出すことができます。詳細については、「サイトのロゴを追加する」をご参照ください。

モバイルでサイトのタイトルのフォントとサイズを設定する方法は次のとおりです。

1. サイト スタイルを開きます。
2. [フォント] をクリックし、[スタイルの割り当て] をクリックします。
3. [モバイル サイトのタイトル] をクリックし、ドロップダウン メニューをクリックしてフォントのスタイルとサイズを選択します。

詳細については、 フォントを変更するをご参照ください。

ヘッダーの背景スタイル

サイトがバージョン7.0の場合、ヘッダーの背景はサイトのテンプレートによって異なります。詳細については、この後にある7.0の機能のセクションに進んでください。

ヘッダーに背景スタイルを追加することにより、ヘッダーを他のコンテンツと区別できるようにしたり、サイトの他のブランドと調和させたりすることができます。

ヒント: コンピューター上では、ドロップダウンの背景はヘッダーの背景色と一致します。

背景スタイルを追加する方法は次のとおりです。

1. サイトのプレビューの左上隅にある [編集] をクリックします。
2. ヘッダーの上にマウスを置き、[サイト ヘッダーを編集] をクリックします。
3. [デザインを編集] をクリックし、[色] タブをクリックします。
4. エディターの上部にあるドロップダウン メニューから背景スタイルを選択します。[単色]、[グラデーション]、または [アダプティブ] から選択します。各オプションの詳細については以下をご覧ください。
5. 選択したスタイルに応じて、色、ぼかし効果、不透明度などの背景スタイル設定をカスタマイズします。
6. [保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了]、[保存] の順にクリックしてエディターを閉じます。

スタイル オプション

次の背景スタイル オプションから選択します。

• 単色 - 単色の背景を選択します。カスタム カラーを選択したり、サイトのパレットを使用したり、サイトのカラー テーマのいずれかに一致させたりすることができます。
• グラデーション - ヘッダーはページの最初のセクションにオーバーレイされます。選択したグラデーション カラーから最初のセクションの背景に徐々に変化するように表示されます。サイトのパレットから背景とナビゲーションの色を選択するか、カスタム色を選択します。
• アダプティブ - 背景を透明にします。ヘッダーはページの最初のセクションにオーバーレイされ、最初のセクションの背景を表示します。これは、最初のセクションでセクション特有のスタイルが使用されているか、または背景画像があるかによって、ページごとに変わる場合があります。

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

• 背景が [単色] に設定されている場合、ヘッダーはページの最初のセクションにオーバーレイされます。最初のセクションに背景画像または動画がある場合、ヘッダーはこの背景の一部を覆います。
• 背景が [アダプティブ] または [グラデーション] に設定されていて、ページの最初のセクションが自動レイアウト、ブログ、イベント、ギャラリー、またはストア セクションの場合、ヘッダーはどの画像に対しても透明になりません。代わりに、ヘッダーには最初のセクションの背景色が表示されます。

他のスタイル オプション

選択した背景効果によっては、エディターに次のスタイル オプションが表示されることもあります。

• 不透明度 - スライダーを使って色の透明度を変更します。
• 背景をぼかす - [背景をぼかす] トグルをオンに切り替えると、背景コンテンツがぼかされます。ぼやけた背景は、不透明度が90%未満の方が目立ちます。

注: Firefoxなどの一部のブラウザーは、ぼかし背景をサポートしていません。

動画を見る - ヘッダーのスタイル

ヘッダーにボタンを追加する

ヘッダーにボタンを追加すると、ページの前面にコール トゥ アクションが表示され、訪問者がすぐにクリックできるようになります。オプションはサイトのバージョンによって異なります。

ヘッダーを非表示にする

特定のページでは、コンテンツを目立たせたり、訪問者にアクションを促したりするために、ヘッダーを非表示にすることができます。

ヘッダーの非表示は、白紙ページ、レイアウト ページ、メンバー サイトのレイアウト ページでのみ使用できます。ブログ、ストア、ポートフォリオ、イベントなどのコレクション ページにはこのオプションがありません。

ヘッダーを非表示にするには、次の手順に従ってください。

1. [ページパネル] を開きます。
2. ページ タイトルにカーソルを合わせ、タイトルの横にあるをクリックします。
3. ページ設定タブで [ナビゲーション] をクリックします。
4. トグルを使用して、[ヘッダーを表示] をオフにします。

ヘッダーを非表示にしたいすべてのページでこれらの手順を繰り返します。

バージョン7.0のヘッダー機能

バージョン7.0でも、サイト ヘッダーはすべてのページに表示され、バージョン7.1と同じエレメントが含まれていますが、そのスタイルはサイトのテンプレートによって異なります。テンプレートのヘッダーの詳細については、テンプレートのガイドをご参照ください。

テンプレートによっては、ヘッダーに特別な機能があります。詳細については、以下の表のリンクをご参照ください。

機能	利用可否
背景の色	一部のテンプレートで利用可能
バナー画像または動画	一部のテンプレートで利用可能
ブロック エリア	一部のテンプレートで利用可能
ビジネスに関する情報	一部のテンプレートで利用可能
ボタン	一部のテンプレートで利用可能
固定ヘッダー	一部のテンプレートで利用可能
ドロップダウン	常に利用可能。ただし表示はテンプレートによって異なります
ロゴ	常に利用可能。ただし表示はテンプレートによって異なります
メイン ナビゲーションのリンク	常に利用可能。ただし表示はテンプレートによって異なります
ナビゲーション オーバーレイ	Skyeテンプレート ファミリーで利用可能 (一部のモバイル サイトにはオーバーレイがあります)
検索バー	一部のテンプレートで利用可能
セカンダリ ナビゲーション	一部のテンプレートで利用可能
ショッピング カート	常に利用可能。ただし一部のテンプレートにはスタイル オプションがあります
サイトのタイトル	常に利用可能。ただし表示はテンプレートによって異なります
ソーシャル アイコン	一部のテンプレートで利用可能
タグライン	一部のテンプレートで利用可能

バージョン7.0の固定ヘッダー

バージョン7.0では、一部のテンプレートが固定ヘッダーをサポートしています。この固定ナビゲーション (「スティッキー」ナビゲーション) は、ページを下にスクロールしている間、ブラウザ上部の同じ位置に固定されます。以下の表を使用して、どのテンプレートで固定ヘッダーがサポートされているか、コンピューターまたはモバイル デバイスでどのように表示されるかをご確認ください。

• 特に明記されていない限り、固定ヘッダーにはサイトのすべてのヘッダー エレメント (サイトのタイトル、ロゴ、ナビゲーション リンクなど) が表示されます。
• 小さな画面でスペースを確保するために、多くのテンプレートではナビゲーションをモバイル端末に固定できません。場合によっては、タブレットなどの大型モバイル端末でナビゲーションを固定できることがあります。

テンプレート	コンピューター	モバイル
Adirondack	サイト スタイルで、[常にナビゲーションを表示] をオンにします。 下にスクロールすると、ヘッダーが折りたたまれ、サイトのタイトルがロゴの代わりに表示されます。詳細を確認。	固定なし
Avenue	固定なし	固定なし
Aviator	ナビゲーション リンクのみ サイト スタイルでは、情報ページ レイアウトを使用して、[オフセット] または [名刺] を選択します。	固定なし
Bedford	インデックス ページのみ 最初のセクションをスクロールして通過すると、ヘッダーが固定位置に再表示されます。	固定なし
Brine	固定なし	上部のモバイル バーは固定可能です ([モバイルの上部を固定])。下部のモバイル バーは常に固定されます。それぞれに表示される内容を選択します。
Farro	固定なし	上部のモバイル バーは固定可能です ([モバイルの上部を固定])。下部のモバイル バーは常に固定されます。それぞれに表示される内容を選択します。
Five	固定なし	固定なし
Flatiron	サイト スタイルで、[ヘッダー位置: 固定] を選択します。	固定なし
Forte	固定なし	固定なし
Galapagos	固定なし	固定なし
Ishimoto	固定なし	固定なし
Momentum	常に固定	常に固定
Montauk	固定なし	固定なし
Native	固定なし	固定なし
Pacific	ナビゲーション リンクのみ、およびトップページに設定されたインデックス ページのみ。 サイト スタイルで、「インデックス スクロール ナビゲーション: スクロール時に表示] を選択します。最初のセクションをスクロールして通過すると、ナビゲーションが固定位置に再表示されます。	固定なし
Skye	常に固定 透明にすることが可能	常に固定
Supply	サイドバー、固定 (コンテンツの縦幅がブラウザーよりも大きい場合はスクロールします)	固定なし
Tremont	固定なし	固定なし
Wells	サイドバー、常に固定	固定なし
Wexley	固定なし	固定なし
York	固定なし	モバイル バーは固定できます ([モバイル バーの位置: 上部に固定] または [下部に固定])

バージョン7.0のヘッダー

バージョン7.0では、一部のテンプレートがページ ヘッダーをサポートしています。ページ ヘッダーは、メイン ページのコンテンツの上に表示される、ページ固有のコンテンツ エリアです。

ページ ヘッダーは、以下のテンプレート ファミリーで利用可能です。

• Avenue
• Brine (イントロダクション エリアと呼ばれます)
• Farro (イントロダクション エリアと呼ばれます)
• Five
• Wexley
• York

ページ ヘッダーを編集する方法は次のとおりです。

1. ページ上部にカーソルを合わせ、[編集] をクリックします。
2. ブロックを使用して、テキストや画像などのコンテンツを追加します。
3. [保存] をクリックして変更した内容を公開します。

ページ ヘッダーは、メイン ページのコンテンツとは別のものです。ページ ヘッダーからページ上の他のコンテンツ エリアにブロックを移動することはできません。