Simple Life Navi

日常のちょっとした気づき、体験などを掲載します

- トップもご覧ください - 検索画面では「シンプルライフナビ」と検索ください -

Blog

Mobile

Travel

Useful

☕ New Articles ☕️️

グローバルメニュー(ナビゲーション)が上部に来たら固定する方法|jQuery利用、コピペOK

グローバルメニューを画面上部に固定

こんにちは。シンプルライフ ナビです。

ブログにグローバルメニュー・バーを設定している人は多いと思います。

以前の記事で、グローバルメニュー(グローバルナビゲーション)をコピペで簡単に設定できる方法をご紹介していますので、参考にしてください。

 

ところで、画面スクロールした時、グローバルメニュー(グローバルナビ)が上部にきたら固定するには、どうしたらいいのかな? と思ったことはありませんか?

常にメニューが表示されていれば、メニューを選択しやすいので、ブログの回遊率向上(PV向上)につながりますよ。

 

グローバルメニュー
グローバルメニューがずれる
画面スクロールするとグローバルメニューが移動
グローバルメニューが消える
グローバルメニューを上部に固定
グローバルメニューを上部に固定する方法を解説!

 

この記事では、ブログのグローバルメニューが画面上部にきたら固定する方法を、CSSとHTMLのコード付きで解説します。

グローバルメニューが画面の上部にきたら固定する方法

画面上部に来たら固定する

画面スクロールしたとき、グローバルメニューが上部に来たら、画面の上部に固定できるといいな、と思ったことはありませんか?

実現できるとブログの読者がメニューを選択しやすくなります。

また、画面の動きに合わせて、グローバルメニューが動いたり、固定されたりするので、ブログの見た目の動きがおしゃれで洗練されたものになります!

どうすれば良いでのしょうか?
私が設定した方法をご紹介します!

 

jQueryというコードを利用すると、簡単に設定できますよ!

jQueryって何?という人も、この記事の手順で設定(コピペ)すれば、このブログの画面と同じような設定*1をすることができますので、試してみてください。

グローバルメニュー(グローバルナビ)を画面上部に固定するコード

それでは、グローバルメニューが画面上部までスクロールしたら、上部に固定表示するコードを確認していきましょう。

なお、前提とするグローバルメニューは、この記事の冒頭でもご紹介した、次の記事の内容で設定しているグローバルメニューを使います。*2

 

HTMLコード等をコピペで利用される場合は、上記の記事に沿ってグローバルメニューをブログに設定すれば、この記事でご紹介のコードをコピペするだけで動きます*3

次のHTMLとCSSのコードを、手順に沿って追記してください。

HTMLコードの記述(追記内容)

HTMLコードを記述する場所は次の通りです。

 ダッシュボード画面 →  デザイン →  カスタマイズ → ヘッダ → ブログタイトル下 にすすみ、既存のコードを消さないように注意して、HTMLコードを追記してください。
ブログタイトル下

 

追記するHTMLコードは次の通りです。

<!-- jQuery Ver3.6利用 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script type="text/javascript">
$(function() {
    var nav = $('#global-nav');
    var navTop = nav.offset().top;
    $(window).scroll(function () {
        var winTop = $(this).scrollTop();
        if (winTop >= navTop) {
            nav.addClass('global-nav-fixed')
        } else if (winTop <= navTop) {
            nav.removeClass('global-nav-fixed')
        }
    });
});
</script>

上のコードを追記するだけです。コピペすれば簡単に設定できますよ!
なお、すでにjQueryの利用をブログに設定済みの方は緑色のコード部分はコピペ不要です。不明の場合は緑色部分のコードも含めてコピペしてください。

グローバルメニューを独自設定している人の場合は、上記の紫色の部分で参照しているクラス設定やid設定を、ご自身で設定されているコードの内容読み替えて設定いただければ利用できます。

CSSコードの記述(追記内容)

CSSコードを記述する場所は、次の通りです。

 ダッシュボード画面 →  デザイン →  カスタマイズ → デザインCSS にすすみ、既存のコードを消さないように注意して、既存のコードの後ろにCSSコードを追記してください。
デザインCSS

Warning!
CSSコードの記述を改変する場合は、はてなブログ|デザインCSSのバックアップ!トラブルへの備え を参考にして必ずバックアップを取っておきましょう。

 

デザインCSSに追記するCSSコードは次の通りです。

/*グローバルナビ 上に固定*/
.global-nav-fixed {
    position:fixed;
    top:0;
    width: 100%;
    z-index:100;
}

CSSコードの追記も簡単にできたのではないでしょうか。

グローバルメニューの動きのカスタマイズが完成

グローバルメニューの動きのカスタマイズ

グローバルメニューの設定とカスタマイズ、できましたか?

最近のスマホ向けサイトでは、メニューをスライド式にして、上部に表示を固定しているサイトを多く見かけるようになりました。

そこで、私のブログでも同じように表現できるようにしてみたので、みなさんにもコードをご紹介しました。

 

このブログは、はてなブログを利用しています。

ブログのカスタマイズをしてみたい方は「はてなブログPro」にするのがおすすめです。

 

あなたのブログのカスタマイズの参考になれば幸いです。

 関連記事

ブログなど カテゴリーの記事一覧 - Simple Life Navi

*1:ご紹介の内容は、2022年6月現在のこのブログのスマホ用画面で設定している内容と同じです。時間経過後、変更することがあります。

*2:独自設定している人の場合は、jQueryで参照するクラス設定やid設定を、ご自身で設定されているコードの内容読み替えて設定いただければ利用できます。

*3:コピペミスの場合は動きません。またご利用中のデザインテーマによっては動かない場合がありますのでご了承ください。