ワードプレステーマTwentyTenの記事のTOPタイトル(見出し)を見やすく美しくする方法です。私は、見るサイト見るサイトどうやったらそんな見出しが出来るんだろう?そんな疑問を持っていました。

見出し(記事タイトル)は非常に重要です。また、見やすさや美しさによってかなり印象が違ってくると思います。見やすさ/読みやすさって本当に大切だなぁ、と思ったワケです。

で、テーマTwentyTenのデフォルトの見出しってどんな感じかと言うと、

テーマTwentyTen のデフォルトの見出し

って、こんな感じです…。ご利用中のあなたならお分かりになりますよね?

まぁ、確かに通常の文字よりは大きめですし、太字にしてあるのは分かります。しかし、見出し(本文のタイトル)と言うにはチョッと寂しい気がします。

そこで、この記事タイトル(見出し)を見やすく美しくしたいと思いました。どーん!!!!

こんな感じに作れます!!それでは、管理画面の「外観」⇒「テーマ編集」からスタイルシートを開いて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい)

スタイルシートの次の部分を探し出して下さい。

/* =Content
-------------------------------------------------------------- */

#main {
	clear: both;
	overflow: hidden;
	padding: 40px 0 0 0;
}
#content {
	margin-bottom: 36px;
}

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

.page-title a:active,
.page-title a:hover {
	color: #ff4b33;
}
#content .entry-title {
	color: #000;
	font-size: 21px;
	font-weight: bold;
	line-height: 1.3em;
	margin-bottom: 0;
}
.entry-title a:link,
.entry-title a:visited {
	color: #000;
	text-decoration: none;
}
.entry-title a:active,
.entry-title a:hover {
	color: #ff4b33;
}

↓コレを、次の様に書き換えて下さい。

/* =Content
-------------------------------------------------------------- */

#main {
	clear: both;
	overflow: hidden;
	padding: 40px 0 0 0;
}
#content {
	margin-bottom: 36px;
}

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

.page-title a:active,
.page-title a:hover {
	color: #ff4b33;
}
#content .entry-title {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:0 0 2px 5px;
	border-color: #555555;
	border-style: solid;
	background: #b91d3a;
	font-size: 22px;
	color: #fff;
	line-height: 1.5em;
	font-weight: normal;
}
.entry-title a:link,
.entry-title a:visited {
	color: #000;
	text-decoration: none;
}
.entry-title a:active,
.entry-title a:hover {
	color: #ff4b33;
}

これで、上記の様な記事タイトル(見出し)になったハズです。CSSの数値を変える事で、見出しの表示が変化します。また、カラーコードを変える事で様々な見出しのデザインが可能です。

初めて見出しを編集する方は、コチラのサイトが非常に役に立つと思います。

参考サイト：見出しメーカー

シンプルでも目立つ見出しがいぃですよね♫

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