見出しデザインの変更方法

見出しのデザインの変更方法
見出しのデザインを変更するには
左や下に線をつけるデザインの場合
実際に使っていた見出しデザイン
まとめ

見出しのデザインの変更方法

はてなブログの見出しのデザインの変更方法や、
前に使っていた見出しデザインについて書いてみました。

見出しのデザインを変更するには

↓のような記述を行うことで見出しのデザインの変更をすることができる。
（はてなブログの場合、デザインCSSに記載する）

.entry-content 「h3などを書く部分」←どの見出しタグのデザインを変更するか
color: #「色の指定をする部分」←文字の色を指定
font-size:150% ←文字の大きさを指定
font-weight:bold ←太字にする
line-height: 1.5em ←行間
margin: 50px 0 10px 0 ←上下の余白
padding:10px 10px 10px 10px ←テキストとボーダーの間の余白
background:#009250　←背景の色

左や下に線をつけるデザインの場合

見出しの左や下側に線をつけるデザイン場合、↓のような記述を行う。

border-left: 8px solid #「色を指定」 ←左線をつける
border-bottom: 1px solid #「色を指定」 ←下線をつける

実際に使っていた見出しデザイン

h3:フォントなどを変えた白色の文字に背景が緑色系の見出し
h4:左と下に緑色系の線が入った見出し
h5:フォントや上下の余白などを変えた太字の見出し

h3で使っていた見出しのデザイン

.entry-content h3{ color: #ffffff;
font-size:130%;
font-weight:bold;
line-height: 1.5em;  
margin: 50px 0 10px 0;  
padding:10px 10px 10px 10px;  
background:#009250; }

h4で使っていた見出しのデザイン

.entry-content h4 { padding: 4px 10px; color: #444444; 
background-color: #f3f3f3;
border-left: 8px solid #009250;
border-bottom: 1px solid #009250; }

h5で使っていた見出しのデザイン

.entry-content h5{ color: #141414; 
font-size:125%; 
font-weight:bold; 
line-height: 1.5em; 
border-bottom:1px solid 009250;
margin: 50px 0 10px 0;
padding:10px 10px 1px 10px; }