ワードプレステーマTwentyElevenの記事タイトル(見出し)の文字に影をつけて立体的に見せる方法です。当サイトの見出しを見ればお分かりになりますよね(笑

’CSS3’についてはこちら、テーマTwentyTwelveの記事タイトルに影をつける方法はコチラをご覧下さい。

ハッキリ言って、超簡単です(笑　初心者の方でも本当に出来ますので、コピペして自分のサイトを表示させて見て下さいね。

何を?どこに?入力すれば良いのかが分かれば、詳しく分からなくてもそれなりにカスタマイズ出来ます。もっと詳しく、深く知りたい方は、個別に学習して下さい(笑

TwentyElevenの記事タイトルに影をつけてみましょう

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

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

#main {
	clear: both;
	padding: 1.625em 0 0;
}
.page-title {
	color: #666;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	margin: 0 0 2.6em;
	text-transform: uppercase;
}

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

.entry-header .entry-meta {
	padding-right: 76px;
}
.entry-title {　　/* ココです!! */
	clear: both;
	color: #222;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.5em;
	padding-bottom: .3em;
	padding-top: 15px;
}

ここが記事タイトル部分です。TwentyElevenの記事タイトルの装飾でも触れていますが、ここでタイトル部分の編集を行う事ができます。

今回は、タイトル文字に影をつけていきます。それでは、下記の様に追加/編集してみて下さい。

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

#main {
	clear: both;
	padding: 1.625em 0 0;
}
.page-title {
	color: #666;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	margin: 0 0 2.6em;
	text-transform: uppercase;
}

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

.entry-header .entry-meta {
	padding-right: 76px;
}
.entry-title {　　/* ココです!! */
	clear: both;
	color: #222;
	font-size: 26px;
	text-shadow: 2px 2px 1px rgba(0,0,0,0.6);
	font-weight: bold;
	line-height: 1.5em;
	padding-bottom: .3em;
	padding-top: 15px;
}

えぇ、たったコレだけです(笑　ね?簡単だったでしょ?この基本が分かれば、サイトタイトル/ウェジェットタイトル/その他の文字にも簡単に影をつける事が出来ます。

ちなみに、この部分に以下を追加/編集すると、記事タイトルそのものに影をつける事が出来ます。参考までに。

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

#main {
	clear: both;
	padding: 1.625em 0 0;
}
.page-title {
	color: #666;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	margin: 0 0 2.6em;
	text-transform: uppercase;
}

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

.entry-header .entry-meta {
	padding-right: 76px;
}
.entry-title {　　/* ココです!! */
	clear: both;
	color: #222;
	font-size: 26px;
	text-shadow: 2px 2px 1px rgba(0,0,0,0.6);
	font-weight: bold;
	line-height: 1.5em;
	padding-bottom: .3em;
	padding-top: 15px;
	-webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.6);
	-moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.6);
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6);
}

これで、記事タイトル(見出し)の文字に影がつき、立体的に見える様になったハズです。CSS3を使って、ライバルサイトに差をつけちゃいましょう☆