大家好!しょうです。前々からブログカスタマイズをちょっとずつ進めていました。今回はグローバルメニューの設置にチャレンジしました。
グローバルメニューの開設方法
本ブログのテーマは「UnderShirt」でスマホデザインはレスポンシブ設定にしてあります。
グローバルメニューとは、↑画像の赤で囲んだ部分の事で、サイト上部に有るカテゴリー名などを表示しているメニューバーの事です。
今回はこちらの記事を参考にさせて頂きました。
最終的にどのようなメニューになるかというと、PCではグローバルメニューを表示させ、スマホならトグルメニュー(後述)を表示するような感じです。
手順
① HTMLコードをコピーします。(ゆきひーさんの記事より)
②「ダッシュボード」→「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル下」の欄にHTMLコードを貼り付けします。
③ CSSコードをコピーします。(ゆきひーさんの記事より)
④「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」の欄にCSSコードを貼り付けします。
⑤ 変更を保存します 。
*注:コードを変更す前にバックアップを取っておいて下さい。
①コピペしたHTMLコードのままでは、ページへのリンクがない状態です。 コードのカテゴリー名とURLリンクを自分のブログに合わせて変更してください。
これにてグローバルメニューの設置が出来ました。
スマホのトグルメニューが開かない時の対処法
ここまでで動作確認するとPCのグローバルメニューは問題なく動作しましたが、スマホのトグルメニューが開かない事が発覚しました。
<スマホ画面>
トグルメニューとは、↑画像の赤で囲んだ部分の事で、MENUを押すと開きカテゴリー名が表示されるはずなのですが、置物の様にうんともすんとも動きませんでした。
対処法を検索すると下記の記事に辿り着きました。
kurokinomizuiwa.hatenablog.com
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
記事に従って「ダッシュボード」→「設定」→「詳細設定」→「検索エンジン最適化」の欄にある「headに要素の追加」に上記のコード(赤字部)を追記しました。
ドキドキしながらスマホ画面のMENUを押しました。そして無事に開きました!!
どうやらトグルメニュー表示に使用している「jQuery」の参照コードが最新版になっていなかった事が原因らしいです。
まとめ
参考にさせて頂いたサイト様ありがとうございました。感謝致します。
皆様のグローバルメニュー開設時の参考になれば幸いです。