ワードプレステーマTwentyElevenの記事コンテンツ自体に影をつけて、記事自体を立体的に見せる方法です。記事タイトル文字に影をつける方法はコチラ♫

テーマTwentyElevenの記事コンテンツの背景に色をつける方法と合わせてお読み頂くと分かりやすいかと思います。この方法が分かれば、サイト自体に影をつけたり、ウェジェットエリアに影をつけたりする事も出来ます。

とにかく簡単に出来ますので、初心者の方もぜひチャレンジしてみて下さい☆

コピペでOK!!記事コンテンツに影をつける

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

/* =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;
}

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

.single-author .entry-meta .by-author {
	display: none;
}
.entry-content,
.entry-summary {　　/* ココです!! */
	padding: 1.625em 0 0;
}
.entry-content h1,

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

/* =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;
}

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

.single-author .entry-meta .by-author {
	display: none;
}
.entry-content,
.entry-summary {　　/* ココです!! */
	padding: 1.625em 0 0;
	-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,

いかがでしょうか?影はつきましたか?初心者の方や初めての方にとっては、なにやら文字や数字がたくさんあってもぉウンザリ…、ってなってる頃かもしれませんね…(汗

それは、慣れるしかありません(笑　その内に、やっているうちに慣れてきますのでご安心下さい。出来た時には感動が待っていますから☆

HTML＆CSS３レイアウトブック