WordPressテーマの「Simplicity」で表示されるPCのヘッダーを、スクロールで固定表示/非表示するようにしてみた

以前「Simplicity」の固定表示されるモバイルメニューを、スクロールで非表示する方法をご紹介いたしました。

WordPressテーマの「Simplicity」で固定表示されるモバイルのメニューを、スクロールで非表示するようにしてみた
当サイトで採用しているWordPressテーマの「Simplicity」は非常に高機能で、カスタマイズでモバイルのメニューをブラウザのトップ...

今回はPCのヘッダーをスクロールで固定、または非表示にしてみたのでご紹介いたします。

js

下記のjsを「slide-header.js」などとして、「Simplicity」の子テーマにアップロードします。

「135」という数値はヘッダーの高さとなります。

footer-insert.php

子テーマの「footer-insert.php」に下記の記述をします。

「!is_mobile」により、PCにのみ「slide-header.js」が読み込まれます。

css

style.css

子テーマの「style.css」に下記のスタイルを記述をしました。

「transition: 0.3s;」でヘッダーのスライドをある程度滑らかにしています。「margin-top: 135px;」でメニューの位置を調整しています。

mobile.css

子テーマの「mobile.css」に下記のスタイルを記述しました。

「style.css」で記述したスタイルはモバイルの方にも影響があるので、打ち消す記述をします。

動作確認

画像を押下すると動画が表示されます。
上スクロール時、ヘッダーが固定表示
上スクロール時、ヘッダーが固定表示

ページ途中で上にスクロールすると、ヘッダーがスライドで表示され、固定されます。

まとめ

  • ヘッダー固定、非表示用の「slide-header.js」を作り、子テーマの「footer-insert.php」に読み込ませる。
  • ヘッダー固定、メニュー位置調整用のスタイルを作り、子テーマの「style.css」に記述する。
  • モバイル表示の影響を防ぐために「mobile.css」に打ち消す記述をする。

ヘッダーはスクロール時に完全に固定しようかどうか迷ったのですが、記事を読むときにずっと画面領域が占有されるのが気になり、モバイルと同じ動きにしました。

ヘッダーを半固定化したメリットとしては、訪問ユーザーにとってはサイト名のクリックである程度トップページへの遷移が任意にできること、運営者にとってはSNSボタンでフォロー率が多少アップすることの2点になります。

メニューも一緒に半固定化しようと思ったのですが、メニューまで含めると半固定とはいえ、画面領域が結構な範囲で占有されてしまうので見送りました。

ヘッダーとメニューの役割について再考させられた実装でした。

スポンサーリンク

シェアする

フォローする

WordPressテーマの「Simplicity」で表示されるPCのヘッダーを、スクロールで固定表示/非表示するようにしてみた
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!