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

ヘッダーはサイトのすべてのページの上部に表示され、ヘッダーで訪問者の第一印象が決まります。このガイドでは、ヘッダーの背景を適用する方法、ヘッダーを先頭固定表示にする方法、ヘッダーに使用するフォントをカスタマイズする方法について説明します。

このガイドの手順に従うには、サイトエディターをサポートしているテーマが必要です。サイトでサイトエディターを使用しているかどうかを確認するには、サイトのダッシュボードの「外観」→「エディター」で確認します。

ヘッダーテンプレートパーツにアクセスする必要があります。この操作を行ったことがない場合は、「ヘッダーをカスタマイズする」ガイドの手順に従ってください。

ヘッダーの背景色を変更すると、ブランドのアイデンティティを確立し、ナビゲーション要素を目立たせることができます。背景色を変更するには、次の手順を実行します。

1. ヘッダーテンプレートパーツの編集中に、エディターの左上付近にある「リストビュー」アイコン (3本の水平線) をクリックして、「リストビュー」を開きます。
2. ヘッダーテンプレートパーツ内のグループブロックに移動します。

3. ブロック設定サイドバーで、「スタイル」アイコンをクリックします。黒と白の丸のような外観です。
4. 背景色を適用するか、背景画像を追加します。

色と背景画像について、参照してください。

訪問者がサイトをスクロールしても、先頭固定表示ヘッダーは画面に固定されたままになります。先頭固定表示ヘッダーを作成するには、次の手順を実行します。

1. ダッシュボードから「外観」→「エディター」に移動します。
2. 右側のホームページのプレビューをクリックするか、「テンプレート」タブを選択して特定のテンプレートをカスタマイズします。
3. 左上隅にある「リストビュー」アイコンをクリックします。
4. 一番上のヘッダー要素を選択し、3つのドット (⋮) をクリックして「グループ」オプションを選択し、ヘッダーをグループブロック内に配置します。
5. ブロック設定サイドバーで、 「位置」を「先頭固定表示」に設定します。
6. 「保存」ボタンをクリックして、変更を保存します。

先頭固定表示要素が含まれるグループブロックのスタイルを設定する方法について、詳しくご覧ください。グループブロックのレイアウトを調整する方法について、詳しくご覧ください。

先頭固定表示要素の作成方法について、詳しくご覧ください。

ヘッダーのタイポグラフィをカスタマイズすると、ブランドの視覚的なアイデンティティを確立できるほか、読みやすさも向上します。フォントスタイルを変更するには、以下の手順を実行します。

1. ヘッダーテンプレートパーツの編集中に、変更するテキスト要素 (サイトのタイトルやメニューなど) をクリックします。
2. ブロック設定サイドバーで、「スタイル」アイコンをクリックします。スタイルアイコンは黒と白の丸で表示されます。
3. フォントファミリー、サイズ、太さ、その他のオプションを調整するには、「タイポグラフィ」設定を見つけます。
4. 「保存」ボタンをクリックして、変更を保存します。

カスタムフォントの詳細については、こちらを参照してください。