こんにちは。SaitoKouです。
Astraでホームページを作りながらふと気づいたことが、「ヘッダーを固定する」オプションがないことです。一つのページが縦に長い場合、メニューを表示するためにわざわざ画面の先頭までスクロールするのは面倒ですね。そこで今回は、Astraのヘッダーをプラグインで固定する方法を紹介します。
「Sticky Menu & Sticky Header」プラグインを有効化する。
新しくプラグインを入れます。こんな画像のやつです。
今回はヘッダー一つを固定化するので、無料版で十分です。
プラグインの設定
管理画面 ＞ 設定 ＞ Sticky Menu (or Anything!) をクリックします。
設定箇所は以下です。
１．Basic settings タブ ＞ Sticky Element: 「.site-header」を入力
固定する要素を指定します。PC版、スマホ版共通固定できるように.site-headerを指定します。
２．Advanced settings タブ ＞ Z-index: 適当な数字を入力
固定する要素の高さを指定します。これを０にすると、ほかの画像やテキストの下に潜り込むような感じに見えてしまいます。僕は10にとりあえず設定して、ほぼすべての要素の上に来るように設定しています。
サイト確認
この設定で、ヘッダーが固定されました。確認でスクロールしてみましょう。
しっかりついてきてます！
まとめ
プラグインを使えば、簡単にヘッダーの固定ができました！このプラグインを使えば、Astraに限らずヘッダーを固定できそうですね。（固定する要素を間違わなければなんでも可能です（笑））
どうもAstraのヘッダー固定機能は有料版にすると可能になるようです。有料版をお持ちの方はそちらで設定をお願いします！
今回の記事をみて
- 操作がなかなか難しい・・・
- 時間がかかって大変・・・
- 作り切れるのか不安・・・
と感じた場合は「Webサイト制作のプロに任せてしまう」という解決策もあります！
特に、今後も自身でブログの記事や掲載コンテンツをしっかり更新していきたい場合は、 有料テーマやカスタム構築の方が運用しやすい場合が多いです。
私のサービスでは、WordPress有料テーマを使って「伝わる構成の更新しやすいサイト」を目指しています。
無料テーマで制作を試したあと、「やはり任せたい！」と感じた方は、ぜひこちらをご覧ください！
