うさぎさんとモフモフな日々

うさぎ歴10年。うさぎさんとの暮らしを書いています。たまに飼い主のことも。。。

Brooklynテーマをカスタマイズして、グローバルナビを作ってみました!

こんばんは(^-^)

 

以前から気になっていることがあります。

このブログをスマホ表示で見ると、カテゴリーが記事下に来てしまって見にくいので、どうにかしたいと思っていました。

パソコンではサイドメニューでカテゴリーがすぐに見つけやすいんんですけどね。

 

そこで、今日はブログのカテゴリーを整理して、グローバルメニューをつけることにしました。

 

グローバルメニューはドロップダウンにしてサブカテゴリーも表示したいと思います。

 

 

グローバルナビ作成前にしたこと

色々なサイトを見ていると、グローバルナビに表示させるカテゴリーは5つまでらしいので、まずたくさんあったカテゴリを整理しました。

私は、うさぎ、ネット、日常、プロフィールの4つの大きなカテゴリを作り、その下にサブカテゴリを作成しました。

ちなみにサブカテゴリは何個まででも作成できるそうです。

 

私の場合、はてなブログのカテゴリ一覧にいくと、例えば、

大きなカテゴリで「うさぎ」があり、うさぎの下にサブカテゴリの「うさぎの雑学」「飼育用品」「ケア」などをつけたいとした場合、

f:id:usagitonokurashi:20200130155003p:plain

カテゴリ一覧

上記のように「うさぎ」というカテゴリを作成し、その下に「うさぎ-うさぎの雑学」のようなカテゴリを作らなければいけません。

うさぎの雑学だけだったカテゴリ名を「うさぎ-うさぎの雑学」に変更し、その記事一つ一つに「うさぎ」というカテゴリも追加していきました。

過去の記事100記事以上にコツコツとカテゴリを追加していきました。

 

グローバルナビ作成とドロップダウン作成方法

カテゴリの整理が出来たら、ようやくグローバルナビの作成になります。

私は、サブカテゴリをドロップダウンにしたかったので、下記のサイトを参考にさせて頂きました。

www.notitle-weblog.com

 

*後から気づいたのですが、パソコンではグローバルナビをドロップダウンにしてサブカテゴリーを表示させることが出来たのですが、スマホではスペースの関係でドロップダウンのサブメニューは表示されません。

 

上記サイトのページから、はてなPro向けのCSSコードをコピーして、デザイン→ヘッダ→タイトル下にペーストします。

"ここにリンク先のURL"の部分と、「項目」の名前を書き換えます。

項目箇所には、表示させたいカテゴリー名を入れます。

f:id:usagitonokurashi:20200127172605p:plain

 

下記の通り、初心者の私にも簡単に出来ました!

 

f:id:usagitonokurashi:20200130160309p:plain

グローバルナビ作成

 

グローバルナビメニューをマウスオーバーするとドロップダウンメニューが出てきます。

f:id:usagitonokurashi:20200130174832p:plain

マウスオーバーした時


 

残念ながら、スマホではドロップダウンメニューは見れませんが、下記の右上のようにメニューが表示されます。

f:id:usagitonokurashi:20200130161412j:plain

スマホメニュー


右上の三本線のバーを押すと、下記のようにメインカテゴリが出てきます。

f:id:usagitonokurashi:20200130161436j:plain

スマホメニュー

上のメニューボタンからカテゴリーが見れるので、以前よりは見やすくなった思います。

 

ブローバルナビとヘッダー画像が重なる

グローバルナビを設定してから初めてスマホで見てみると、グローバルナビの黒い帯がブログのヘッダー画像と重なってしまいました(涙)

f:id:usagitonokurashi:20200130162055j:plain

グローバルナビとヘッダー画像が重なる

調べてみると、参考になるサイトがありました。

こちらのページの「スマホ版のブログタイトルとグローバルナビが重なってしまう」とういう見出し内に修正のコードが載っていましたので、使用させていただきました。

nanana015.hatenablog.com

 

スッキリとつきの写真も見えます!

f:id:usagitonokurashi:20200130162317p:plain

残る問題。。。

あと、ヘッダー写真のつきの顔と文字が重なっているのがずーーーっ時になっているんです。

実は、以前に修正を試みたのですが、何度やっても全然調整が出来なくて諦めてしまい、そのままになっていました。

次回、これも修正したいと思います。

 

2020/1/30追記

後に分かったのですが、同じCSSコードを二つ入力していて表示がおかしくなっていたようです。

よーく、コードを見て気づいたのですが、全くの初心者なので間違えていてもなかなか気づかなかったのですね(涙)