はてなブログ ブログカスタマイズ

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

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

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

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

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

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

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

2022/8/20    

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

使い方(簡易)

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

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

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

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

さすが上位表示ブロガー

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

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

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

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

経験者は語ります。

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

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

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

はてなブログで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を検討中の方、ブログ収益化を検討中の方はぜひご参照ください。

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

アフィンガー

WING(AFFINGER6 ver)

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

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

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

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

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

Twitterでも口コミ良好!

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

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

はてなブログProを契約しなかった理由

2022/10/15

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

この記事では、はてなブログ無料版から、有料版に移行しなかった理由をお伝えします。 本気でブログ収益化を目指そうと思い、はてなブログ無料から有料版「はてなブログPro」への移動を考えましたが、様々な方面から比較検討した結果、レンタルサーバー(スターサーバー)を契約、ワードプレステーマのAFFINGER6を採用しブログを作ることに決めました。結果、後悔はありません。 はてなブログ無料版をお使いの方で、収益化を目指す方の参考になるようにまとめました。 はてなブログProはコスパがあまり良くない 管理人の場合、料 ...

ReadMore

画像リンク変更Search Regex

2022/8/20

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

はてなブログからワードプレスへ引っ越した方は、画像も移動してきたことでしょう。 この記事では、はてなブログからワードプレス移動した画像のリンクを一括で変更する手順を、画像付きでお伝えします。 今回使用するのはSearch Regexというプラグイン このブログは「AFFINGER」を使用しています 画像移動の手順(簡易) はてなブログからダウンロードしたテキストファイルより、画像のみを抽出(サクラエディタを使う) はてなブログの画像を一括ダウンロード(Dsダウンローダーを使う) 新サーバーへ画像をアップロ ...

ReadMore

はてなキーワードを削除

2022/8/20

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

はてなブログ(無料版)からワードスレスへ引っ越したときに大変だった「はてなキーワードのリンク」。 はてなブログ無料版にて執筆して公開しますと、本文中の言葉が「はてなキーワード」と認識され、キーワードページへのリンクが勝手につけられます。なんと20万語以上の言葉が登録されていそうです。 外部リンクが大量に付くことからSEO評価が落ちブログーから疎まれているのはもちろん、読者も誤タップで別リンクに飛ばされてしまうという煩わしさがある、はてなブログのはてなキーワードリンク。 はてなブログ無料版からワードスレスへ ...

ReadMore

表スクロール

2022/8/20

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

officeエクセルやグーグルスプレッドシートで貼り付けた表やテーブル。 スマホ表示にしたときに、はみ出して見れないなどといったことがないように、大きくなった表には横スクロールをつけましょう。 使い方(簡易) CSSコードを「デザイン」に貼り付ける HTMLコードを、記事の表コードの前後に設定する コードを貼る前(変更前)にするべきこと 今回は、「デザインCSS」にコードを貼っていきます。つきましては、見出しのデザインコードを貼る前に、必ず現段階の「デザインCSS」を保存しておいてください。 もし失敗して ...

ReadMore

はてなブログサイドバーを非表示にする方法

2022/8/20

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

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

ReadMore

-はてなブログ, ブログカスタマイズ
-