グローバルメニューを変更

はてなブログの無料版で Google AdSense の審査に合格するために、グローバルメニューを設置・設定しました。その後、自分で使いだしてみると色々と気になる点が出てきました。急いで調べて設定した為に、参考にさせて頂いたサイトの古いバージョンのグローバルメニューを使用していました。改めて、自分の欲しい機能を満たしている同じ作者さんのグローバルメニューに変更してみました。

これまで使用していたグローバルメニュー

hiro20180901.hatenablog.com

Google AdSense の審査に申し込む前には、下記のYukihy Life さんのグローバルメニューを使用させていただきました。

www.yukihy.com

このグローバルメニューはレスポンシブ対応で、PC とスマホの両方に対応しており、

• PC とスマホで幅を変更した際に、横並びのメニューとメニューボタンを自動で切り替えられる
• どちらのメニューも一箇所の設定だけで済む

という事で、設定がやり易そうだという事で選択しました。

一つだけ残念だったのが、メニューが一段階だけだという事です。階層化カテゴリーを導入した事もあり、せめて PC の時だけでも二段階のメニューにしたいと思っていました。

新しく使用したグローバルメニュー

改めて Yukihy Life さんのサイトをじっくりと見た所、二段階メニューが実装されたサンプルがありました。
www.yukihy.com
www.yukihy.com
PC 用のグローバルメニューは共通で、スマホ用のグローバルメニューが

1. トグルタイプ　上から下に表示される
2. スライドタイプ　右から左に表示される

の二種類がありました。

テスト用のブログを作成して両方を試してみた所、私にはトグルタイプが合うと感じましたので、トグルタイプを使用する事に決めました。

トグルタイプのグローバルメニューの導入

はてなブログへの導入手順は Yukihy Life さんのサイトの通りに行えば問題なく設定出来ました。

• CSSコードを「デザイン設定」->「カスタマイズ」->「デザインCSS」に貼り付け
• HTML と jQuery のコードを「ヘッダ」->「タイトル下」に貼り付けて、URL 等を修正
• jQuery は 「設定」->「詳細設定」「headに要素を追加」で有効化済みなので、読み込む行をコメントアウト

jQuery の読み込みをコメントアウトしただけで、Yukihy Life さんのサイトの説明通りに動作しました。

変更箇所

ブラウザの幅を広くしたり狭くしたり、設定したメニューがちゃんと動作するのを確認した上で、少し修正を加えました。Yukihy Life さんのサイトにカスタマイズ方法が詳しく書かれていましたので分かりやすかったです。

MENU の位置を変更

幅狭時の MENU の位置を左側になるように変更しました。20番の位置です。

  #btn-content {
    text-align: left;
  } /*20*/

グローバルメニューとパンくずリストの隙間を無くす

先に追加していたパンくずリストの上にグローバルメニューが表示されます。グローバルメニューとパンくずリストの間に少し隙間が空いていたので、これを無くしてぴったり並ぶように修正しました。

#menu {
  width: 100%;
  /*    margin: 10px auto; 2021/02/14 変更 */
  margin: 0 auto;
  background: #444; /*７*/
}

#menu の上下の margin を 10px からゼロにしました。

他に参考になりそうなサイト

最後に、Yukihy Life さん以外にも参考になりそうなサイトを調べましたので、記録として残しておきます。

www.bambi.pro
www.bambi.pro

PCの場合にトップに固定のグローバルメニュー、スマホの場合にボトムに固定バーを配置するやり方です。こちらも無料版のはてなブログで動作する事を確認しました。

manablog.org

ドロワー風ナビゲーションとして、pushy と後半に Drawer の説明がありました。はてなブログへの適用例が見つかりませんでしたので試してません。でも見た目は良いです。テスト用のブログで後で試してみたいと思います。

blog.minimal-green.com
PC では全幅のグローバルメニュー、幅狭ではドロワー風ナビゲーションで、共に二段階までメニューを設定できる方法です。上部グローバルメニューと幅を詰めた場合のドロワーメニューの内容が共通化されているので、URL 等を変更するのは一箇所で良いのが利点です。Copyright 表示を消さないように、との注意書きがありました。こちらも試してみました。ドロワー風ナビゲーションが好みであれば参考にさせて頂いたかもしれません。

試しにグローバルメニューの位置を固定させると不具合がありました。CSS の中のPC用のみの設定が全体の設定になっている為です。ドロワーメニューの中身が右から出ないで中央に表示されてしまいました。PCのみの設定は全て条件式の中に入れてしまえばOKでした。

まとめ

レスポンシブ対応のグローバルメニューを、一階層から二階層のものに変更しました。まだまだ修正したい所はありますが、とりあえずこのメニューを暫く使ってみようと考えています。

パンくずリストの整理が済んだら

• 一段目を親カテゴリーに、二段目を子カテゴリーにする
• よく読まれている記事に別にカテゴリーを付けて、メニューから選択できるようにする

という事を考えています。

スマホ向けの幅狭画面の時のメニューも出来れば二段階にしたいと思いますが、これからの課題とします。HTML、CSS、jQuery と勉強する事が多いです。今回、様々なサイトの HTML や CSS を見るのと、Chrome の検証を使って CSS を修正するやり方を覚えました。まだまだ不十分ですが、手元にサーバ(今なら WSL2 等で簡単に準備できる) を置いて、試しながら学んでいきたいと考えています。