beco blog 双子/三姉妹と暮らすシンプルライフ

双子/三姉妹の母"beco"の日々のあれこれ

ブログ運営 |CSSで見出し・目次のデザイン変更する方法【ブログ初心者】

becoです。

本格的なブログ運営は、このブログが初めてなので

日々勉強中です。

 

見出しや目次の作り方を試しているのですが、

はてなブログの見出しは、フォントサイズが変わるだけで

素っ気ないデザインですね。

 

そこで、CSSで見出しをカスタマイズしてみました!

 

 

 

見出しをカスタマイズする方法

CSSでデザインを変更する

参考にしたのは以下のサイトです。

excellent.ne.jp

 

いくつかサイトを参考にしましたが、以下の点で一番使いやすかったです。

  • シンプルな見出しデザインが網羅されている
  • CSSをコピーするだけでOK
  • コードが見やすく、自分で編集しやすい

もっと可愛らしいデザインを載せているサイトや、

デザイン100選!というサイトもありましたが、

自分にはこれで十分でした。

 

私が選んだのは、以下の2つ。

・角丸背景の見出し

・蛍光マーカー風の見出し

 

さらに、色を自分の好みに合わせて変更しました。

 

カラーコードで色を変更する

色見本とカラーコードはこちらのサイトを参考にしました。

www.colordic.org

 

色の和名などもあって、眺めているだけで楽しくなりますね。

ちなみに、今回は以下の色を選びました。

  • 大見出し:刈安色(#eed67e)
  • 中見出し:胡粉色(#f2e8ec)

 

各カラーのページに飛ぶと、類似の色なども載せてあるので、

もう少し青みが強い方が~、とか、こっちの色も好き!など

選びやすくてよかったです。

 

目次をカスタマイズする方法

CSSでデザインを変更する

目次はこちらのサイトを参考にしました。

www.fuji-blo.com

10to1travel.com

が、後者のTHE THORさんのコードだと、

上手く反映されませんでした^^;

 

もっと読みやすいブログになるよう、

これからも色々とアップデートしていきますね。

 

参考になれば嬉しいです。

 

beco