ワードプレステーマTwentyTwelveで、記事コンテンツ(サマリー)に影をつけて立体的に見せる方法です。’CSS3’についてはコチラ♫記事コンテンツの背景に色をつける方法はコチラ♫

TwentyTwelve
記事コンテンツに影をつけて立体的に見せる方法

文字にではなく、コンテンツ自体に影をつける方法です。文字に影をつける方法はコチラ♫

こんな感じに影をつけることによって、記事コンテンツが浮き上がって見える様にカスタマイズしてみましょう。

影をつけるのは実は簡単!!

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

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

.entry-meta {
	clear: both;
}
.entry-header {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}

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

.entry-content,
.entry-summary,
.mu_register {　　/* ココです!! */
	line-height: 1.714285714;
}
.entry-content h1,
.comment-content h1,

これを以下の様に追加/編集してみて下さい。

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

.entry-meta {
	clear: both;
}
.entry-header {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}

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

.entry-content,
.entry-summary,
.mu_register {　　/* ココです!! */
	line-height: 1.714285714;
	-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);
}
.entry-content h1,
.comment-content h1,

以上です(笑　これを貼り付けて実際にサイト表示をして見てみましょう。ちなみに当サイトは、次の様な数値にしています。

	-webkit-box-shadow: rgba(0, 0, 0, 0.8) 0px 2px 8px;
	-moz-box-shadow: rgba(0, 0, 0, 0.8) 0px 2px 8px;
	box-shadow: rgba(0, 0, 0, 0.8) 0px 2px 8px;

これを、ウェジェット/サイドバーに反映させたりタイトル部に反映させたりすることもできます。これで、記事コンテンツに影がついて立体的に見える様になったハズです。

これは、本当にテンション上がりますね!!