WordPressテンプレート「Macchiato」を現在僕は愛用しているのですが(このブログもMacchiato)、見出しタグに何の装飾も無かったので簡単なカスタマイズをしてみました。

CSSに追加したソース

とりあえず下記のCSSを追加してみましょう。

.entry h2 {
	background: #005589;
	color: #FFF;
	padding: 5px 0 5px 15px;
	font-size: 40px;
}

.entry h3 {
	border-left: 10px solid #005589;
	border-bottom: 1px solid #005589;
	padding-left: 5px;
	margin-left: 5px;
}

.entry h4 {
	border-bottom: 3px dotted #005589;
	margin-left: 10px;
}

僕の当ブログでも同じCSSを適用してます。こんな感じのビジュアルになります。

見出しタグH2

見出しタグH3

見出しタグH4

 

色のコードを変えれば簡単に自分オリジナルのデザインにすることが出来ます。線の太さや余白はお好みでカスタマイズして下さい。