このページでは Hakoniwa のヘッダーを固定する方法を紹介します。
管理画面から「エディター」→「テンプレート」を選択。
テンプレート一覧から固定したいページのテンプレートを選びましょう。今回は、例としてフロントページを選択します。
次に、ヘッダーのテンプレートを選択し、右側の設定の中から「スタイル」を選んでください。
このとき、
- 固定（fixed）
- 固定（sticky）
のどちらかを選びましょう。適用される CSS プロパティは以下のようになります。
| スタイル | 適用される CSS プロパティ |
|---|---|
| 固定（fixed） | position:fixed; |
| 固定（sticky） | position:sticky; |
適用される CSS プロパティによって固定の挙動が異なります。両方試してみて、どちらか好きな方を選んでください。
固定した場合の注意点
- この機能を使うには Hakoniwa Blocks を有効にする必要があります。
- すべてのページに適用されるわけではないので、固定にしたいテンプレートごとに設定してください。
- ヘッダーテンプレートのカラーを指定しておいた方がいいです（固定にしてみるとすぐ理解できると思いますが、背景透過したヘッダーが固定されるので、カラーを設定してコンテンツの視認性を向上させましょう）。
株式会社 AnimaGate のアドベントカレンダーに参加しています。
