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