縦に長いページを読んでいる時、画面の一番上に常にヘッダーメニューが表示されているサイトを見たことがありませんか？これは「追従ヘッダー」と呼ばれ、ユーザーがいつでも他のページへ移動できるため、サイトの使いやすさが格段に上がります。今回は、Elementor Pro の標準機能を使って、あっという間に追従ヘッダーを作る方法を解説します！
追従ヘッダーのメリットとは？
通常のヘッダーは、下にスクロールすると画面の外に消えてしまいます。しかし追従ヘッダーにすると、ユーザーは記事の途中からでも料金表やお問い合わせのボタンをすぐに押すことができるようになります。これにより、サイト内を迷わず移動できるようになり、結果的にお問い合わせ率のアップにも直結します。 Elementor Pro を使っていれば、難しいコードを書く必要はなく、数クリックで実装可能です。
追従ヘッダー設定手順
それでは実際に設定してみましょう。ヘッダーのテンプレート（テーマビルダー等で作成したヘッダー）の編集画面を開いてください。
- ヘッダー全体を囲んでいる、一番外側のコンテナ（またはセクション）を選択します。
- 左パネルの [ 高度な設定 ] タブを開きます。
- モーション効果（Motion Effects）という項目を開きます。
- Sticky（スティッキー／固定）のプルダウンを、デフォルトの「なし」から「Top（上）」に変更します。
たったこれだけです！プレビュー画面で下にスクロールし、ヘッダーが画面上部にピタッとくっついてくるか確認してみましょう。
【実用テクニック】スマホ表示の注意点
簡単に設定できるSticky機能ですが、スマホでの表示には注意が必要です。スマホは画面が狭いため、太いヘッダーが常に上部を占領していると、肝心の本文が非常に読みにくくなってしまいます。
そんな時は、Sticky 設定のすぐ下にある「Sticky On（固定するデバイス）」の項目を活用しましょう。 最初は Desktop・Tablet・Mobile すべてがオンになっていますが、Mobile の「×」ボタンを押して解除することで、PCでは追従するけれど、スマホでは追従しないというプロならではの細やかな配慮が可能です。
まとめ
- 追従ヘッダーは、いつでもメニューが押せるためユーザーの利便性が上がる。
- 設定は一番外側のコンテナの [ 高度な設定 ] ＞ モーション効果 ＞ Sticky：Top にするだけ。
- スマホで画面が狭くなる場合は、Sticky On の設定でスマホの追従をオフにする。
多くのサイトで見られるの機能です。Elementor Pro をお使いの方は、ぜひご自身のサイトに取り入れてみてくださいね！
