はてなブログでグローバルメニューを固定する|スマホ対応 貼るだけ簡単

設置しましたグローバルメニューを、画面スクロールしてもついてくるようにできるCSSコードとjQueryをご紹介します。

スマホでもグローバルメニューが固定して、スクロールしてもついてきます。

2箇所にコピペ頂ければ設置ができます!

今ご覧のページはワードプレスで作成したものです。 コードを反映させた、はてなブログのデモページはこちらご参照ください。

デモンストレーションはてなブログで設置していますグローバルメニューの設置方法は、こちらの記事ご参照ください。

はてなブログ スマホにドロップダウンメニューを置く|グローバルメニュー

2022/8/20    

今回のブログカスタム備忘録は「グローバルメニューの設置」です。スマホからの見栄え、操作性を一番に考えてたグローバルメニューを設置しました。 今ご覧のページはワードプレスで作成したものです。グローバルメ ...

使い方(簡易)

  1. 「デザインCSS」にコードを貼る
  2. 「フッタ」にコードを貼る

グローバルメニューを固定する|minimalgreenさんのコード

「はてなブログ jquery メニュー固定」で検索しますと上位表示されました「minimalgreenさん」のコードをいただきました。シンプルでわかりやすく、素人からしましたらありがたいです。

管理人が使用しているテーマ「Neumorphism」でも、問題ありませんでした。

さすが上位表示ブロガー

スマホでも、スクロールしても上部にグローバルメニューがぬめぬめと付いてきます。

コードを貼る前にするべきこと

今回ご紹介するコードを貼る前に、必ず現段階の「デザインCSS」「フッタ」を保存しておいてください。

もし失敗してブログデザインが崩れてしまったら、元に戻すのに大変な時間を食います。

経験者は語ります。

場所はPCのメモでも、GoogleKeepでも、iOSのメモでも、なんでもよいので、ご自身が使いやすいところに保存ください。

個人的には、保存ボタンを押さなくても記入するだけで保存してくれる、Google,iOSなどのクラウドサービスがおすすめです。

グローバルメニューを固定する|CSSコード

以下のコードをコピーしまして、「デザイン」➡「カスタマイズ(=真ん中のスパナマーク)」➡一番下の「{}デザインCSS」に貼り付けます。

/*****メニュー固定****/

.fixed {
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
}

#blog-title {
margin: 0 auto;
padding: 40px 0;/* 余白が気になる時は適時調整 */
}

グローバルメニューを固定する|jQuery

CSSコードを貼り付けたら、貼り付けをしたデザインCSSの上にある「フッタ」のところに、以下のコードをコピペしてください。

jQuery

<!--jQueryを使用-->
<script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>

<!--メニュー固定・jQueryを使用-->
<script type="text/javascript">
jQuery(function($) {
var nav = $('#menu'),
offset = nav.offset();
$(window).scroll(function () {
if($(window).scrollTop() > offset.top) {
nav.addClass('fixed');
} else {
nav.removeClass('fixed');
}
});
});
</script>

上の一行目、二行目はjQueryの読み込みコードなので、既に記載されているのであれば省略可能です。

最後は保存を忘れずに

CSS,jQueryを書き終えましたら、「変更を保存する」を必ずクリックして下さい。

保存まで終えたら、ブログにアクセスしてチェックししょう。

まとめ

「jQueryなにそれ旨いの?」程度のレベルゼロ人でも、簡単にグローバルメニューを固定した状態で設置できました。完全脳死で貼ってしまいました。

ちょっとは理解しろ

jQueryを置くデメリットとして、読み込み速度が低下するとのこと。
しかし管理人はさほど気にならないので、設置を継続しています。

しかしそれ以上に気になるのは、グローバルメニューを固定してる有名ブロガーって少ないんですよねなにかしら大きなデメリットが、実はあったりするのでしょうか?

素人考えでは、読者がメニューを見やすくなり、目的の記事を探し易くなる(ユーザビリティ向上)と、回遊率が高くなる気がするのですが、メニューを固定されていない方は皆なにかしら理由がおありなんですよね…

ぜひ伺いたいです…

現在ははてなブログではなく、ワードプレスでブログ活動を行っております。はてなブログProを選択しなかった理由をまとめましたので、はてなブログProを検討中の方、ブログ収益化を検討中の方はぜひご参照ください。

https://samurai0505.com/hatenapro-wordpress/

このサイトはアフィンガーを使用しています

WING(AFFINGER6 ver)

デザイン簡単、SEO対策と広告収入UPの機能が標準装備。さらに美しく、パワフルに。「稼ぐ」に特化したテーマ。

WING(アフィンガー6)公式サイト

2022年最新!おすすめレンタルサーバー

月額料金がライトプランで220円〜(税込)なので、コスパよく爆速なサイト運営が可能に!

管理画面は使いやすくなっているので、これからはじめてサイト運営をする方にもおすすめです!

Twitterでも口コミ良好!

スターサーバー公式サイト

はてなブログカスタマイズ 関連記事

はてなブログProに契約しなかった理由|本気でブログをするならワードプレス一択

2022/10/15

この記事では、はてなブログ無料版から、有料版に移行しなかった理由をお伝えします。 本気でブログ収益化を目指そうと思い、はてなブログ無料から有料版「はてなブログPro」への移動を考えましたが、様々な方面 ...

はてなブログ画像リンクを一括変更する|Search Regexの使い方徹底解説

2022/8/20

はてなブログからワードプレスへ引っ越した方は、画像も移動してきたことでしょう。 この記事では、はてなブログからワードプレス移動した画像のリンクを一括で変更する手順を、画像付きでお伝えします。 今回使用 ...

はてなキーワードのリンクを、ワードプレスで消す方法を徹底解説|失敗談あり

2022/8/20

はてなブログ(無料版)からワードスレスへ引っ越したときに大変だった「はてなキーワードのリンク」。 はてなブログ無料版にて執筆して公開しますと、本文中の言葉が「はてなキーワード」と認識され、キーワードペ ...

はてなブログで表をスクロールさせる|コピペで簡単に表が見やすくなるコード

2022/8/20

officeエクセルやグーグルスプレッドシートで貼り付けた表やテーブル。 スマホ表示にしたときに、はみ出して見れないなどといったことがないように、大きくなった表には横スクロールをつけましょう。 使い方 ...

はてなブログで一部のサイドバーのみを、スマホで非表示にするコードを公開

2022/8/20

スマホでは不要なサイドメニュー非表示にして、スマホの表示をスッキリさせましょう。

  • B!