becoです。
本格的なブログ運営は、このブログが初めてなので
日々勉強中です。
見出しや目次の作り方を試しているのですが、
はてなブログの見出しは、フォントサイズが変わるだけで
素っ気ないデザインですね。
そこで、CSSで見出しをカスタマイズしてみました!
見出しをカスタマイズする方法
CSSでデザインを変更する
参考にしたのは以下のサイトです。
いくつかサイトを参考にしましたが、以下の点で一番使いやすかったです。
- シンプルな見出しデザインが網羅されている
- CSSをコピーするだけでOK
- コードが見やすく、自分で編集しやすい
もっと可愛らしいデザインを載せているサイトや、
デザイン100選!というサイトもありましたが、
自分にはこれで十分でした。
私が選んだのは、以下の2つ。
・角丸背景の見出し
・蛍光マーカー風の見出し
さらに、色を自分の好みに合わせて変更しました。
カラーコードで色を変更する
色見本とカラーコードはこちらのサイトを参考にしました。
色の和名などもあって、眺めているだけで楽しくなりますね。
ちなみに、今回は以下の色を選びました。
- 大見出し:刈安色(#eed67e)
- 中見出し:胡粉色(#f2e8ec)
各カラーのページに飛ぶと、類似の色なども載せてあるので、
もう少し青みが強い方が~、とか、こっちの色も好き!など
選びやすくてよかったです。
目次をカスタマイズする方法
CSSでデザインを変更する
目次はこちらのサイトを参考にしました。
が、後者のTHE THORさんのコードだと、
上手く反映されませんでした^^;
もっと読みやすいブログになるよう、
これからも色々とアップデートしていきますね。
参考になれば嬉しいです。
beco