ブログのデザインを少し変更してみました。
これまでのデザインのカラーリングやグローバルメニューは好みのものだったのですが、カテゴリーを階層化していたので、スマホで開くと下の階層が全部開いた状態でブログが表示されてしまうのがすごく気になっていたんですよね。。
変更したこととしては、以下の3つです。
①CSSのコードを見ていじったりしても特に変化は見られなかったので
カテゴリーの階層表示をやめました
とはいっても大きくは変更していません。
たとえば、”趣味”カテゴリーを作って、
これまで”趣味”の下にあったカテゴリーの記事に”趣味”カテゴリーを追加して
いったん”趣味”カテゴリーとしてまとめた感じです。
②サイドバーに全カテゴリーのリストを追加しました
このままだと”趣味”カテゴリーの下にあったカテゴリーが探しにくくなってしまうので、カテゴリーリストを設置しました。
それに合わせて、カテゴリーの見直しを少しだけしました。
③グローバルメニューの変更をしました
グローバルメニューの改良をしました。
グローバルメニューとしてブログの上の方に表示させるカテゴリーを修正しました。
そのうえで、下記のサイトを参考にしてグローバルメニューを作り直しました。
<参考にさせていただいたサイト>
これで、スマホでこのブログを開いたときに
グローバルメニューが全部開いた状態で表示されることはなくなりました。
さらに、スマホで開いたときには
横スクロールでカテゴリーを表示させられるようになりました!
PCで開いたときには前のデザインのときから
横スクロールする必要のないようにしているので、特に変化はないです。
この3つの変更を加えたデザインでしばらく使っていきたいと思います!
また何か気になるところとかが出てくれば、
気が向いたときにデザインを変更していると思います!