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

ヘッダーには、サイトのタイトルやロゴ、ナビゲーション メニュー、その他の機能が表示されます。一般的に、ヘッダーはサイト全体で同じように表示され、訪問者がコンテンツをナビゲートして操作する方法に大きな役割を果たします。

これらの機能はバージョン7.1のサイト ヘッダーで利用可能です。サイトがバージョン7.0の場合、ヘッダーはサイトのテンプレート固有のものとなります。

サイト ヘッダーの動画

この動画では、サイト ヘッダーを編集してスタイルを設定する方法をご紹介します。

サイトのタイトルまたはロゴを編集する

サイトを作成したら、タイトルを付けます。ただし、ロゴを追加すると、ヘッダーにあるサイトのタイトルが置き換えられます。そのため、サイトのタイトルを別途追加する必要があります。別のSEOタイトルを追加しない限り、検索エンジンは検索結果とブラウザーのタブにこのタイトルを使用します。

ヘッダー内のナビゲーション リンクを追加、編集、または削除する

サイト ヘッダーのナビゲーション メニューには、[ページ] パネルに追加したページが反映されます。ナビゲーション リンクを変更する方法の詳細については、以下のリンクをクリックしてください。

• ナビゲーションにページを追加する
• ページ タイトルを編集する
• ページの削除

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

ヘッダーにボタンを追加すると、ページの前面にコール トゥ アクションが表示され、訪問者がすぐにクリックできるようになります。ヘッダーのレイアウトに応じて、ボタンはナビゲーション リンクとグループ化されたり、個別に表示されたりします。モバイルでは、ボタンは常にナビゲーション リンクの下に表示されます。

ヘッダーにボタンを追加する方法は次のとおりです。

1. [ページパネル] を開きます。
2. サイトのプレビューの左上隅にある [編集] をクリックします。
3. ヘッダーの上にマウスを置き、[サイト ヘッダーを編集] をクリックします。
4. [エレメントを追加] をクリックします。
5. [ボタン] トグルをオンに切り替えます。

ヘッダー ボタンを編集する

ボタンのテキスト、リンク、スタイルを設定するには、次の手順に従ってください。

1. [ページパネル] を開きます。
2. サイトのプレビューの左上隅にある [編集] をクリックします。
3. ヘッダーの上にマウスを置き、[サイト ヘッダーを編集] をクリックします。
4. ヘッダー ボタンをクリックし、[デザインを編集] をクリックします。
5. [コンテンツ] で、ボタンのテキストとリンクを編集します。
6. [デザイン] タブをクリックし、[プライマリ]、[セカンダリ]、または [ターシャリ] を選択して、ボタンのスタイルを設定します。

ヘッダーの形状はボタンのスタイルに従います。

ヘッダー ボタンのフォントを設定する

ボタンのスタイルを [セカンダリ] または [ターシャリ] に設定すると、ヘッダー ボタンのテキストはボタンのスタイルに従います。

ヘッダー ボタンのフォントを [プライマリ] スタイルにするには、次の手順に従ってください。

1. サイト スタイルを開きます。
2. [フォント] の横にある [>] をクリックします。
3. [スタイルの割り当て] をクリックします。
4. [ヘッダー ボタン] をクリックして変更を加えます。

ヘッダー ボタンの色を設定する

ヘッダー ボタンの色を変更する方法は、ヘッダーの背景スタイルによって異なります。

ヘッダー ボタンの色と背景スタイルの関係は以下のとおりです。

• 単色 - 色 - ボタンの色はサイトの既定のカラー テーマに従います。
• 単色 - テーマ - ボタンの色は選択したカラー テーマに従います。
• グラデーション - ボタンの色はサイトの既定のカラー テーマに従います。
• アダプティブ - ボタンの色は各ページの上部セクションのカラー テーマに従います。各セクションで使用しているカラー テーマごとに、ボタンの色をカスタマイズできます。

アカウントへのログイン、ソーシャル リンク、カート、または言語切り替えをヘッダーに追加する

顧客用アカウントへのログイン、ソーシャル リンク、ショッピング カート、言語切り替えなどの要素をヘッダーに追加するには、次の手順に従ってください。

1. [ページパネル] を開きます。
2. サイトのプレビューの左上隅にある [編集] をクリックします。
3. ヘッダーの上にマウスを置き、[サイト ヘッダーを編集] をクリックします。
4. [エレメントを追加] をクリックします。
5. 有効にしたい機能の横にあるトグルをオンに切り替えます。

ヘッダー機能をカスタマイズする

ソーシャル リンクやカート アイコンのデザインは、カスタマイズできます。サイトでWeglotをご利用の場合は、言語切り替え機能もカスタマイズできます。

これらの機能を編集するには、次の手順に従ってください。

1. [ページパネル] を開きます。
2. サイトのプレビューの左上隅にある [編集] をクリックします。
3. ヘッダーの上にマウスを置き、[サイト ヘッダーを編集] をクリックします。
4. 編集したい機能をクリックして、鉛筆アイコンをクリックします。
5. [設定] を使用してデザインを変更します。これらのオプションは機能によって異なります。
6. [保存] をクリックします。

ヘッダーにデザイン効果を追加する

サイト ヘッダーのデザインを編集する際には、視覚効果を追加して、ユニークな見た目にしたり、ブランド イメージに合わせたりすることができます。これらの効果は、コンピューターとモバイルの両方のヘッダーに適用されます。

ヘッダーに効果を追加するには、次の手順に従ってください。

1. [ページパネル] を開きます。
2. サイト プレビューの左上隅にある [編集] をクリックし、ヘッダーにカーソルを合わせて [サイト ヘッダーを編集] をクリックします。
3. [デザインを編集] をクリックします。
4. [効果] で、ドロップ シャドウを追加したり、境界線を追加したり、固定ヘッダー スタイルを設定したりします。

ヘッダーにドロップ シャドウを追加する

ヘッダーの周囲に影を付けるには、次の手順に従ってください。

1. ヘッダーのデザインの編集中に、[ドロップ シャドウ] をクリックします。これにより、すぐにドロップ シャドウが有効になります。
2. プリセットから [弱] または [強] を選択します。プリセットは選択した後からもカスタマイズできます。
3. 色を選択してスタイルを設定するには、[色] をクリックします。
4. ドロップ シャドウの見た目を変更するには、[広がり]、[距離]、および [ぼかし] スライダーを使用します。いろいろな組み合わせを試してみてデザインを決めましょう。
5. ドロップ シャドウを削除するには、[削除] をクリックします。

ヘッダーの周囲に境界線を追加する

ヘッダーを境界線で囲むには、次の手順に従ってください。

1. ヘッダーのデザインの編集中に、[境界線] をクリックします。これにより、すぐに境界線が有効になります。
2. 色を選択してスタイルを設定するには、[色] をクリックします。
3. 線の太さを設定するには、[S]、[M]、または [L] をクリックします。カスタムの太さを設定するには、[…] をクリックします。
4. 境界線の位置を設定します。ヘッダーの四方すべてに表示することも、上部のみに表示することも、下部のみに表示することも、上部と下部の両方に表示することもできます。
5. 境界線を削除するには、[削除] をクリックします。

固定ヘッダーを有効にする

デバイスによっては、どちらのスタイルの固定ヘッダーも、スクロール時にわずかに拡大または縮小する場合があります。訪問者がスクロールする際に、サイトの上部にヘッダーを固定しておくには、次の手順に従ってください。

1. ヘッダーのデザインの編集中に、[固定位置] トグルをオンに切り替えます。
2. 固定ヘッダーのスタイルを、[基本] (ヘッダーが常にブラウザーの上部に表示される) または [スクロール バック] (訪問者が上にスクロールしたときにのみ、ヘッダーがブラウザーの上部に表示される) に設定します。

モバイル ナビゲーション メニューのスタイルを設定する

モバイル表示では、ヘッダー ナビゲーションは展開可能なメニューに折りたたまれます。

モバイル ナビゲーション メニューのスタイルを設定するには、次の手順に従ってください。

1. [ページパネル] を開きます。
2. サイト プレビューの左上隅にある [編集] をクリックし、ヘッダーにカーソルを合わせて [サイト ヘッダーを編集] をクリックします。
3. 右上隅にある [モバイル表示] アイコンをクリックします。
4. モバイル ナビゲーション メニューをクリックして、鉛筆アイコンをクリックします。
5. メニュー アイコンのスタイルを選択します。
6. アイコンの線の太さを設定するには、[S]、[M]、または [L] をクリックします。カスタムの太さを設定するには、[…] をクリックします。

ヘッダーの背景効果と色を変更する

ヘッダーに背景スタイルを追加することにより、ヘッダーを他のコンテンツと区別できるようにしたり、サイトの他のブランドと調和させたりすることができます。ナビゲーションにドロップダウンがある場合、コンピューター上では、ドロップダウンの背景はヘッダーの背景色と一致します。

背景スタイルを変更するには、次の手順に従ってください。

1. サイトのプレビューの左上隅にある [編集] をクリックします。
2. ヘッダーの上にマウスを置き、[サイト ヘッダーを編集] をクリックします。
3. [デザインを編集] をクリックし、[色] タブをクリックします。
4. エディターの上部にあるドロップダウン メニューから背景スタイルを選択します。[単色]、[グラデーション]、または [アダプティブ] から選択します。
5. 選択したスタイルに応じて、色、ぼかし効果、不透明度などの背景スタイルをカスタマイズします。一部のブラウザーでは、ぼかし効果が表示されない場合があります。

ヘッダーの背景 (単色)

ヘッダーの背景を単色に設定するには、単色の背景スタイルを選択します。カスタム カラーを選択したり、サイトのパレットを使用したり、サイトのカラー テーマのいずれかに一致させたりすることができます。

ヘッダーの背景 (グラデーション)

各ページのヘッダーの背景を、最初のセクションの背景へと自然に溶け込ませるには、グラデーション スタイルを選択します。グラデーションの背景とナビゲーションの色はカスタマイズできます。

ヘッダーの背景 (アダプティブ)

ページごとにヘッダーの見た目を変化させるには、透過的にするアダプティブ スタイルを選択します。各ページの最初のセクションの背景は、ヘッダーの背後に表示されます。

サイト ヘッダーを非表示にする

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

ブログやストア ページなどのコレクション ページにはこのオプションはありません。

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

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

モバイル端末でヘッダーの見た目を変えることはできますか？

ヘッダーのモバイル端末用のレイアウト、高さ、幅は、デスクトップ表示とは別にカスタマイズできます。その他のデザイン変更は、デスクトップとモバイルの両方の表示に影響します。

デスクトップ表示とモバイル表示で異なるスタイルを設定するには、次の手順に従ってください。

1. サイトのプレビューの左上隅にある [編集] をクリックします。右上隅にあるデスクトップ表示アイコン、またはモバイル表示アイコンをクリックします。編集したい表示形式に応じて、いずれかを選択してください。
2. ヘッダーの上にマウスを置き、[サイト ヘッダーを編集] をクリックします。
3. [デザインを編集] をクリックします。
4. [レイアウト] ドロップダウン メニューをクリックし、レイアウトを選択してヘッダーの配置を変更します。リンクや他のエレメントの間のスペースは、スライダーを使用して変更します。
5. ヘッダーの高さを変更するには、[ヘッダー] スライダーを使用します。
6. [フル] または [はめ込み] をクリックして、ヘッダーの幅を設定します。
7. [保存] をクリックします。