半地下備忘録

たつさんの日記的ななにか。

はてなブログ(テーマ:Natural)に合わせて見出し(H3)のデザインを変更

はてなブログでもすげーカスタマイズしてる人って結構いたりする。


できる事からやってみようということで、とりあえず今回は見出しを変更してみました。
実際に変更する作業よりも、デザインとか配色をどうするか悩んでる時間のほうが長いです笑

結局シンプルに

色々見てみたものの、がちゃがちゃ飾るよりは、シンプルなほうが好きだなーってことで、こんなかたちになりました。

f:id:tatsu-n:20150129112721p:plain
(PCのみの変更なので念のためキャプチャ)

罫線と破線の色は無難にブログタイトルと同じ色にして全体の雰囲気を壊さないように。

ソース

h3{
    margin: 0 0 1.5em;
    padding: 0.3em 0.5em;
    border-left: 7px solid #50b5b5;
    border-bottom: 1px dashed #50b5b5;
    font-size: 1.143em;
    font-weight: bold;
}


これをはてなブログのダッシュボードからデザインを選んで、カスタマイズタブからデザインCSSを選んで、一番下にさきほどのソースを追加するだけ。ちょっとずつできることからやっていこう。

他にもカスタマイズしてみました

はてなブログに関連記事を記事下に表示する方法 - 半地下備忘録
はてなブログのテーマNaturalで最新の記事と人気の記事のスタイルを揃えました - 半地下備忘録


この本がいいらしいので、買おうか悩み中。

作りながら学ぶ HTML/CSSデザインの教科書

作りながら学ぶ HTML/CSSデザインの教科書