こんにちは。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のヘッダー固定機能は有料版にすると可能になるようです。有料版をお持ちの方はそちらで設定をお願いします！
みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください！
WordPressデザインサービスは以下から承っております。
