こんばんは(^-^)
以前から気になっていることがあります。
このブログをスマホ表示で見ると、カテゴリーが記事下に来てしまって見にくいので、どうにかしたいと思っていました。
パソコンではサイドメニューでカテゴリーがすぐに見つけやすいんんですけどね。
そこで、今日はブログのカテゴリーを整理して、グローバルメニューをつけることにしました。
グローバルメニューはドロップダウンにしてサブカテゴリーも表示したいと思います。
グローバルナビ作成前にしたこと
色々なサイトを見ていると、グローバルナビに表示させるカテゴリーは５つまでらしいので、まずたくさんあったカテゴリを整理しました。
私は、うさぎ、ネット、日常、プロフィールの４つの大きなカテゴリを作り、その下にサブカテゴリを作成しました。
ちなみにサブカテゴリは何個まででも作成できるそうです。
私の場合、はてなブログのカテゴリ一覧にいくと、例えば、
大きなカテゴリで「うさぎ」があり、うさぎの下にサブカテゴリの「うさぎの雑学」「飼育用品」「ケア」などをつけたいとした場合、
上記のように「うさぎ」というカテゴリを作成し、その下に「うさぎ-うさぎの雑学」のようなカテゴリを作らなければいけません。
うさぎの雑学だけだったカテゴリ名を「うさぎ-うさぎの雑学」に変更し、その記事一つ一つに「うさぎ」というカテゴリも追加していきました。
過去の記事100記事以上にコツコツとカテゴリを追加していきました。
グローバルナビ作成とドロップダウン作成方法
カテゴリの整理が出来たら、ようやくグローバルナビの作成になります。
私は、サブカテゴリをドロップダウンにしたかったので、下記のサイトを参考にさせて頂きました。
＊後から気づいたのですが、パソコンではグローバルナビをドロップダウンにしてサブカテゴリーを表示させることが出来たのですが、スマホではスペースの関係でドロップダウンのサブメニューは表示されません。
上記サイトのページから、はてなPro向けのCSSコードをコピーして、デザイン→ヘッダ→タイトル下にペーストします。
"ここにリンク先のURL"の部分と、「項目」の名前を書き換えます。
項目箇所には、表示させたいカテゴリー名を入れます。
下記の通り、初心者の私にも簡単に出来ました！
グローバルナビメニューをマウスオーバーするとドロップダウンメニューが出てきます。
残念ながら、スマホではドロップダウンメニューは見れませんが、下記の右上のようにメニューが表示されます。
右上の三本線のバーを押すと、下記のようにメインカテゴリが出てきます。
上のメニューボタンからカテゴリーが見れるので、以前よりは見やすくなった思います。
ブローバルナビとヘッダー画像が重なる
グローバルナビを設定してから初めてスマホで見てみると、グローバルナビの黒い帯がブログのヘッダー画像と重なってしまいました（涙）
調べてみると、参考になるサイトがありました。
こちらのページの「スマホ版のブログタイトルとグローバルナビが重なってしまう」とういう見出し内に修正のコードが載っていましたので、使用させていただきました。
スッキリとつきの写真も見えます！
残る問題。。。
あと、ヘッダー写真のつきの顔と文字が重なっているのがずーーーっ時になっているんです。
実は、以前に修正を試みたのですが、何度やっても全然調整が出来なくて諦めてしまい、そのままになっていました。
次回、これも修正したいと思います。
2020/1/30追記
後に分かったのですが、同じCSSコードを二つ入力していて表示がおかしくなっていたようです。
よーく、コードを見て気づいたのですが、全くの初心者なので間違えていてもなかなか気づかなかったのですね（涙）
