ワードプレステーマTwentyTwelveで見出し同様小見出し(h1～h6)の表示を見やすく美しくする方法です。見出し(記事タイトル)のカスタマイズはコチラを参考にしてみて下さい。

記事タイトルは必ず表示されますが、小見出し(h1～h6)については、本文上ではあまり使われないかもしれませんね。記事内容によっては、使用した方が見やすく分かりやすくなりますので使ってみると良いでしょう。

例えば、小見出しを使うとこんな感じになります。

TwentyTwelveの小見出しのカスタマイズ

それでは、管理画面より「外観」⇒「テーマ編集」から’スタイルシート’を開いて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい)

スタイルシートの中から、次の部分を探して下さい。

/* =Main content and comment content
-------------------------------------------------------------- */

.entry-meta {
	clear: both;
}

～～～～～～～～～～　中略　～～～～～～～～～

.entry-content h1,
.comment-content h1,
.entry-content h2,
.comment-content h2,
.entry-content h3,
.comment-content h3,
.entry-content h4,
.comment-content h4,
.entry-content h5,
.comment-content h5,
.entry-content h6,
.comment-content h6 {
	margin: 24px 0;
	margin: 1.714285714rem 0;
	line-height: 1.714285714;
}
.entry-content h1,
.comment-content h1 {
	font-size: 21px;
	font-size: 1.5rem;
	line-height: 1.5;
}
.entry-content h2,
.comment-content h2,
.mu_register h2 {
	font-size: 18px;
	font-size: 1.285714286rem;
	line-height: 1.6;
}
.entry-content h3,
.comment-content h3 {
	font-size: 16px;
	font-size: 1.142857143rem;
	line-height: 1.846153846;
}
.entry-content h4,
.comment-content h4 {
	font-size: 14px;
	font-size: 1rem;
	line-height: 1.846153846;
}
.entry-content h5,
.comment-content h5 {
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
}
.entry-content h6,
.comment-content h6 {
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 1.846153846;
}

↓これを、次の様に追加/編集します。

/* =Main content and comment content
-------------------------------------------------------------- */

.entry-meta {
	clear: both;
}

～～～～～～～～～～　中略　～～～～～～～～～

.entry-content h1,
.comment-content h1,
.entry-content h2,
.comment-content h2,
.entry-content h3,
.comment-content h3,
.entry-content h4,
.comment-content h4,
.entry-content h5,
.comment-content h5,
.entry-content h6,
.comment-content h6 { /* 子見出しの設定 */
	clear: both;
	margin: 14px 0;
	margin: 1rem 0;
	line-height: 1;
}
.entry-content h1,
.comment-content h1,
.entry-content h2,
.comment-content h2,
.mu_register h2,
.entry-content h3,
.comment-content h3,
.entry-content h4,
.comment-content h4,
.entry-content h5,
.comment-content h5,
.entry-content h6,
.comment-content h6 {
	font-size: 18px;
	font-size: 1.285714286rem;
	line-height: 1.34;
	color: #2175ab;
	font-weight: normal;
	background: #d1e060; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#d1e060, #ffff91);
	background: -o-linear-gradient(#d1e060, #ffff91);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1e060), to(#ffff91)); /* older webkit syntax */
	background: -webkit-linear-gradient(#d1e060, #ffff91);
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	box-shadow: rgba(0, 0, 0, 0.8) 0px 1px 2px;
	-moz-border-radius:3.5px;
        -webkit-border-radius:3.5px;
        -khtml-border-radius:3.5px;
        border-radius:3.5px;
        -moz-border-radius:0.25rem;
        -webkit-border-radius:0.25rem;
        -khtml-border-radius:0.25rem;
	border-radius:0.25rem;
	clear: both;
	display: block;
	float: left;
	margin: 0 auto 6px;
	margin: 0 auto 0.428571429rem;
	padding: 8px 0 8px 6px;
	padding: 0.571428571rem 0 0.571428571rem 0.428571429rem;
	width: 100%;
}

これで、かなり見やすく美しい小見出しになったと思います。今回は、小見出し(h1～h6)を一括設定しています。もし個別に設定されたい場合は、デフォルトの様に、h1～h6を一つづつ個別にカスタマイズして下さい。

ただし、記事本文の文字サイズより小さくならない様に気をつけましょう。