こんにちは。シンプルライフ ナビです。
ブログの読者が他の記事を参照してもらえるように、ナビゲーション・バー（ナビゲーションメニュー）を設置している人も多いと思います。*1
便利なのですが、ナビゲーション・バーが常に表示されていると、記事の表示面積が狭くなってしまいます。
そこで、画面の上下のスクロールの動きに合わせて、ナビゲーションバー（グローバルナビ ゲーションやボトムナビゲーション）を自動表示させたり、消したりする方法をご紹介します。*2
画面の動きに合わせて、ナビゲーション・メニューが自動でオン・オフするのでとても便利ですよ。
- ナビゲーションバー（ボトムナビ）の表示イメージ
- ナビゲーションを画面の上下スクロールに合わせて自動的に表示をコントロールする
- ナビゲーション・バー（メニュー）を自動で、かっこよく出し分け（表示・非表示）
ナビゲーションバー（ボトムナビ）の表示イメージ
ナビゲーションバーは、例えば画面の下部に表示させる、「ボトムナビゲーション」があります。
早速「ボトムナビゲーション」の表示イメージを確認してみましょう。
一番左は、iPhoneで最初に記事を画面表示させた時、真ん中は画面を下スクロールして記事を読み始め、ボトムナビゲーションを消した状態、一番右は、真ん中の記事からボトムナビゲーションを表示した状態です。
画面を広く使いたいなら、ボトムナビゲーションがない方が、見た目もすっきりして可読範囲が広くなるので良さそうです。ただし、ナビメニューを外してしまうとブログの回遊性が下がってしまうかもしれません。
そこで、記事を読んでいるときは「ナビゲーションバー」を消して、読み終わったら自動で再表示する方法を考えてみました。
表示をコントロールするナビゲーションバーは「スマホ下部固定メニューのCSS｜ボトムナビゲーションの設置方法｜はてなブログで回遊率を上げる」 で紹介しているものを使います。
（詳しい方は、クラス設定を読み替えれば他のナビゲーションバーでも利用可能です。）
ナビゲーションを画面の上下スクロールに合わせて自動的に表示をコントロールする
ナビゲーション・バー（ナビゲーションメニュー）を、記事を読んでいる状態に合わせて表示を出し分けするにはどうしたら良いでしょうか？
記事を読むときは下にスクロール、読み終わったら上にスクロールすることが多いですよね。
そこで、そのスクロールの動きに合わせて、画面のナビゲーションバーの表示をコントロールします。
HTMLにjQueryというコードを利用して、実現します。*3
そうはいっても、次のコードを所定の場所に追記するだけなので、簡単です。（詳しい人はコードを分析してご利用ください）
はてなブログの管理画面を表示し、
ブログの管理画面から、 ダッシュボード＞ デザイン＞ カスタマイズ＞ フッタ に進んでください。
そして、次のコードを既存のコードの下部に追記してください。
なお、コードの赤字部分は、jQueryを一度でも設定したことがある人は、記載不要です。設定したことがない人や、よくわからない人は、コードをそのままコピペして利用してください。
<!-- jQuery Ver3.6利用 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- ナビゲーションバー表示の処理-->
<script>
$(function () {
var pos=0;
var windowSize = $(window).width();
$(window).scroll(function() {
// 上スクロールで表示
if ($(this).scrollTop() < pos && windowSize <= 768 ) {
$('.bottom-menu').fadeIn("fast");
} else {
$('.bottom-menu').fadeOut("fast");
}
pos = $(this).scrollTop()
});
})(jQuery);
</script>
私の記事のボトムナビゲーションの設置方法 利用の人はそのままコピペでOKです。そうではない人は紫色の部分は表示対象のクラス設定の定義と合わせてください。
これで、上へのスクロール時にはナビゲーションが表示され、下へのスクロール時にはナビゲーションが消えます。
ナビゲーション・バー（メニュー）を自動で、かっこよく出し分け（表示・非表示）
ナビゲーションバーを、画面スクロールの動きに合わせて自動で表示、非表示にすることができました。デザイン完成です！
他の人のブログを見ていると、きれいで、動きのあるブログに出会うことがあります。
デザインが良いものがあると取り入れてみたくなることもあると思います。
この記事でご紹介した、「ナビゲーション・バー（メニュー）を上下のスクロールに合わせて出し分けする方法」は、既存のボトムナビゲーションを利用したものですが、他にもいろいろカスタマイズすることができます。
他の記事も参考にして、ブログのデザインを整えてみてください。
