ウツギの日々趣味日記

ゲーム・アニメ・音楽・読書など。趣味のことをつらつらと。

ブログデザインを新しくしました

新デザインを導入しました。現在調整中です。

 

blog.hatena.ne.jp

いままでは、minimalgreen様が提供している「Haruni」のブログテーマを使用していました。

欲しいカスタマイズは一通り揃っていたのと、グラデーションベースのデザインがとても気に入っていまして、途中で緑っぽいグラデーションに変えたりしつつ使っていました。

しかし、ナビゲーションバーに小カテゴリを追加するのにてこずったり、見出しデザインをもっと見やすいように変えようとしてうまくいかなかったりと、自分で手を加えようとした時に壁にぶつかってしまいました。そこで、他のデザインにも手を出してみることにしました。

blog.hatena.ne.jp

今回導入したのはwaitingmoon様提供の「Innocent」です。白黒ベースのカスタマイズ性の高いブログテーマで、カスタマイズガイドには階層付きナビゲーションバーの導入方法についても記述があります。私はこれを見出しデザインをいじったりして使用しています。

カスタマイズ自体は数か月前から少しずつやっていて、やっとしっくりくる感じにまとまったので導入する事にしました。

f:id:jemiah93:20200718164456j:plain

左が旧デザイン 右が新デザイン

緑ベースの前デザインと打って変わり、白+水色ベースにオレンジが際立つデザインになりました。ナビゲーションバーの黒が良いアクセントになっていると思います。ちなみに上部の水色部分は画像にも差し替えられるので、気が向いたら画像に差し替えるかもしれません。

f:id:jemiah93:20200718163052j:plain

また今回、見出し設定にあたり随分いろいろなデザインを見てまわりました。以前からサイドバーに導入していたタブメニューが吹き出し型だったこともあり、最終的にはシンプルな吹き出し型見出しを入れることで落ち着きました。

長文記事やリンクリストのある当ブログでは、このオレンジの吹き出しが良い感じに仕切りの役割を果たしてくれるのではないのかと期待しています。気持ちよく記事を書き上げるためにも、今後もデザインについては試行錯誤していく予定です。

参考にしたもののリスト

備忘録も兼ねて書き残しておこうと思います。今回デザインを新しくするにあたって参考にした記事のリストです。

サイドバーのタブメニュー

www.yukihy.com

www.hiroseyonaka.com

前デザインから利用させていただいていたもの。ブログテーマによって表示がずれるので、多少調整はしています。

これについてはjQueryを使っているということもあり、当ブログで採用し続けるかどうかは悩んでいる最中ですが、とても良いものだと思うので紹介。

見出しデザイン

saruwakakun.com

デザインの種類が豊富で目の保養にも。最終的にはこの記事の吹き出し型見出しCSSを利用させていただきました。

目次デザイン

blog.minimal-green.com

「Haruni」の製作者でもあるminimalgreen様の目次デザインカスタマイズ集。Haruniの目次デザインにはだいぶ未練があったので、これを参考に自分で組み直しました。