うさぎさんとモフモフな日々スマートフォン用の表示で見るうさぎさんとモフモフな日々うさぎ歴10年。うさぎさんとの暮らしを書いています。ネット-はてなブログこんばんは(^-^)以前から気になっていることがあります。このブログをスマホ表示で見ると、カテゴリーが記事下に来てしまって見にくいので、どうにかしたいと思っていました。パソコンではサイドメニューでカテゴリーがすぐに見つけやすいんんですけどね。そこで、今日はブログのカテゴリーを整理して、グローバルメニューをつけることにしました。グローバルメニューはドロップダウンにしてサブカテゴリーも表示したいと思います。グローバルナビ作成前にしたことグローバルナビ作成とドロップダウン作成方法ブローバルナビとヘッダー画像が重なる残る問題。グローバルナビ作成前にしたこと色々なサイトを見ていると、グローバルナビに表示させるカテゴリーは5つまでらしいので、まずたくさんあったカテゴリを整理しました。私は、うさぎ、ネット、日常、プロフィールの4つの大きなカテゴリを作り、その下にサブカテゴリを作成しました。ちなみにサブカテゴリは何個まででも作成できるそうです。上記のように「うさぎ」というカテゴリを作成し、その下に「うさぎ-うさぎの雑学」のようなカテゴリを作らなければいけません。うさぎの雑学だけだったカテゴリ名を「うさぎ-うさぎの雑学」に変更し、その記事一つ一つに「うさぎ」というカテゴリも追加していきました。過去の記事100記事以上にコツコツとカテゴリを追加していきました。グローバルナビ作成とドロップダウン作成方法カテゴリの整理が出来たら、ようやくグローバルナビの作成になります。私は、サブカテゴリをドロップダウンにしたかったので、下記のサイトを参考にさせて頂きました。www.notitle-weblog.com*後から気づいたのですが、パソコンではグローバルナビをドロップダウンにしてサブカテゴリーを表示させることが出来たのですが、スマホではスペースの関係でドロップダウンのサブメニューは表示されません。上記サイトのページから、はてなPro向けのCSSコードをコピーして、デザイン→ヘッダ→タイトル下にペーストします。"ここにリンク先のURL"の部分と、「項目」の名前を書き換えます。項目箇所には、表示させたいカテゴリー名を入れます。下記の通り、初心者の私にも簡単に出来ました!グローバルナビ作成グローバルナビメニューをマウスオーバーするとドロップダウンメニューが出てきます。残念ながら、スマホではドロップダウンメニューは見れませんが、下記の右上のようにメニューが表示されます。右上の三本線のバーを押すと、下記のようにメインカテゴリが出てきます。上のメニューボタンからカテゴリーが見れるので、以前よりは見やすくなった思います。ブローバルナビとヘッダー画像が重なるグローバルナビを設定してから初めてスマホで見てみると、グローバルナビの黒い帯がブログのヘッダー画像と重なってしまいました(涙)グローバルナビとヘッダー画像が重なる調べてみると、参考になるサイトがありました。こちらのページの「スマホ版のブログタイトルとグローバルナビが重なってしまう」とういう見出し内に修正のコードが載っていましたので、使用させていただきました。nanana015.hatenablog.comスッキリとつきの写真も見えます!残る問題。あと、ヘッダー写真のつきの顔と文字が重なっているのがずーーーっ時になっているんです。実は、以前に修正を試みたのですが、何度やっても全然調整が出来なくて諦めてしまい、そのままになっていました。次回、これも修正したいと思います。後に分かったのですが、同じCSSコードを二つ入力していて表示がおかしくなっていたようです。先日新しい測りを買いました。先日うさぎ星さんに行ったときに、エマージェ...2020-01-231月生まれのお誕生日会に参加してきました。過ごしやすい季節になりましたね。うさぎさんとの暮らしについて書いています。うさぎ専門店で働いた経験あります。読者になる最新記事はてなブログ記事の更新で気をつけたい事うさぎにあげていい野菜、あげてはいけない野菜とは?うさぎのつき、ホリホリが激しくなってきたのでチモシーのおうちを買いました今日は雨なので、うさぎのつきとまったりです。reserved.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。