ワードプレステーマTwentyElevenの見出し(記事タイトル)をカスタマイズしてみましょう♫

Elevenのデフォルトの見出しは、黒単色/太文字/字が大きいww　ですね(笑　もう少し見やすく小綺麗にしたいモノです。

ってことで、当サイトを例にとって見出しをカスタマイズしてみましょう。当サイトでは、統一感を出す為にグローバルナビと同様の見出しを作ってみました。

TwentyElevenの見出しを美しくしてみよう

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

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

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

#main {
	clear: both;
	padding: 1.625em 0 0;
}

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

.entry-title {
	clear: both;
	color: #222;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.5em;
	padding-bottom: .3em;
	padding-top: 15px;
}
.entry-title,
.entry-title a {
	color: #222;
	text-decoration: none;
}
.entry-title a:hover,
.entry-title a:focus,
.entry-title a:active {
	color: #1982d1;
}

この部分ですね。で、コレを以下の様に追加/編集すると、当サイトの見出し(記事タイトル)と同様のモノが出来ます。

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

#main {
	clear: both;
	padding: 1.625em 0 0;
}

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

.entry-title { /* 見出しのスタイル */
	clear: both;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	font-size: 22px;
	color: #ffffff;
	font-weight: normal;
	background: #9e0303; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#9e0303, #cf4444);
	background: -o-linear-gradient(#9e0303, #cf4444);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9e0303), to(#cf4444)); /* older webkit syntax */
	background: -webkit-linear-gradient(#9e0303, #cf4444);
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;float: left;
	box-shadow: rgba(0, 0, 0, 0.8) 0px 1px 5px;
	-moz-border-radius:3px;
        -webkit-border-radius:3px;
        -khtml-border-radius:3px;
        border-radius:3px;
	display: block;
	float: left;
	margin: 0;
	padding: 0 0 0 12px;
	width: 100%;
}
.entry-title,
.entry-title a { 　　/* TOPページの記事タイトルのリンク文字の設定 */
	color: #ffffff;
	text-decoration: none;
}
.entry-title a:hover,
.entry-title a:focus,
.entry-title a:active {　　/* TOPページの記事タイトルのマウスオーバー時のリンク文字の設定 */
	color: #714506;
}

記事タイトルにインパクトがあると、だいぶ違ってくると思います。これで見やすく小綺麗な見出し(記事タイトル)になったハズです。センスはあまりないかもですが…(汗

一つの参考例ってことでご勘弁下さい(笑