中国生活的日記

中国生活的日記

中国駐在員による日常生活ブログ

MENU

はてなブログ|グローバルメニュー開設&スマホのトグルメニューが開かない時の対処法

大家好!しょうです。前々からブログカスタマイズをちょっとずつ進めていました。今回はグローバルメニューの設置にチャレンジしました。

グローバルメニューの開設方法

本ブログのテーマは「UnderShirt」でスマホデザインはレスポンシブ設定にしてあります。

f:id:only-in-dreams:20210110191043p:plain

グローバルメニューとは、↑画像の赤で囲んだ部分の事で、サイト上部に有るカテゴリー名などを表示しているメニューバーの事です。

今回はこちらの記事を参考にさせて頂きました。

www.yukihy.com

最終的にどのようなメニューになるかというと、PCではグローバルメニューを表示させ、スマホならトグルメニュー(後述)を表示するような感じです。

手順

① HTMLコードをコピーします。(ゆきひーさんの記事より)

②「ダッシュボード」→「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル下」の欄にHTMLコードを貼り付けします。

CSSコードをコピーします。(ゆきひーさんの記事より)

④「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」の欄にCSSコードを貼り付けします。

⑤ 変更を保存します 。

*注:コードを変更す前にバックアップを取っておいて下さい。
①コピペしたHTMLコードのままでは、ページへのリンクがない状態です。 コードのカテゴリー名とURLリンクを自分のブログに合わせて変更してください。

これにてグローバルメニューの設置が出来ました。

 

スマホのトグルメニューが開かない時の対処法

ここまでで動作確認するとPCのグローバルメニューは問題なく動作しましたが、スマホのトグルメニューが開かない事が発覚しました。

<スマホ画面>

f:id:only-in-dreams:20210110185625j:plain

トグルメニューとは、↑画像の赤で囲んだ部分の事で、MENUを押すと開きカテゴリー名が表示されるはずなのですが、置物の様にうんともすんとも動きませんでした。

対処法を検索すると下記の記事に辿り着きました。

kurokinomizuiwa.hatenablog.com


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

記事に従って「ダッシュボード」→「設定」→「詳細設定」→「検索エンジン最適化」の欄にある「headに要素の追加」に上記のコード(赤字部)を追記しました。

f:id:only-in-dreams:20210110185633j:plain

ドキドキしながらスマホ画面のMENUを押しました。そして無事に開きました!!

どうやらトグルメニュー表示に使用している「jQuery」の参照コードが最新版になっていなかった事が原因らしいです。

まとめ

参考にさせて頂いたサイト様ありがとうございました。感謝致します。

皆様のグローバルメニュー開設時の参考になれば幸いです。