ワードプレステーマTwentyTwelveの投稿記事の見出し(記事タイトル)を見やすく美しくする方法です。

私は、テーマTwentyシリーズをとても気に入っています。しかし、残念なコトに見出し関連は全て…、って感じです…(汗　せっかくのテーマです。見出しも見やすく美しくしちゃいましょう(笑

そこで今回は、TwentyTwelveの見出しをカスタマイズしようと思います。管理画面より「外観」⇒「テーマ編集」で’スタイルシート’を開いて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい)

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

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

.entry-meta {
	clear: both;
}
.entry-header {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.entry-header img.wp-post-image {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.entry-header .entry-title {
	font-size: 20px;
	font-size: 1.428571429rem;
	line-height: 1.2;
	font-weight: normal;
}
.entry-header .entry-title a {
	text-decoration: none;
}

コレを、次の様に追加/編集してみて下さい。

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

.entry-meta {
	clear: both;
}
.entry-header {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.entry-header img.wp-post-image {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.entry-header .entry-title { /* 記事タイトルの設定(見出し) */
	font-size: 24px;
	font-size: 1.714285714rem;
	line-height: 1;
	font-weight: normal;
	color: #55555;
	background: #ffff91;
	-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: 12px 0 8px 8px;
	padding: 0.0.857142857rem 0 0.571428571rem 0.571428571rem;
	width: 100%;
}
.entry-header .entry-title a {  /* 記事タイトル(見出し)のリンク色設定 */
	color: #555555;
	text-decoration: none;
}
.entry-header .entry-title a:hover {   /* 記事タイトル(見出し)のマウスオーバー時のリンク色設定 */
	color: #ff4444;
	text-decoration: none;
}

これで、見出しが見やすく多少は美しくなったハズです。ちなみに、赤色で追加しているカラー設定部分を指定しない場合は、サイト全体のリンク色が反映されるハズです。

TOPページで表示される見出しは、各小ページ(パーマリンク)へのリンクになっているハズです。そのリンク色やマウスオーバー時のリンク色を変更されたい方は、お好きなカラーコードを入力して下さい。

見出しが小綺麗になると、さらに記事投稿にも力が入ります(笑

WordPressデザインブック　ステップバイステップ形式でマスターできる