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

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

TwentyTwelve 記事コンテンツに影

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;

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

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

HTML&CSS3レイアウトブック
HTML&CSS3レイアウトブック

にほんブログ村 ブログブログ ブログノウハウへ

TwentyTwelve 記事コンテンツに影をつけて立体的に見せる” への1件のコメント

  1. ピンバック: コンテンツや文字に影をつける/立体的に見せる方法 | 初めてのワードプレス カスタマイズ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です