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

このサイトのテーマでもあります’CSSが分からなくてもカスタマイズできます!!’なんですが、事実そうなんです(笑

私が全然分からなかった頃は、とにかく良さそうなカスタマイズ方法があればスグにコピペして実際に表示させては見るの繰り返しでした。

そうこうしている内に、ダンダンどこをどうすればこうなるみたいなのが分かってきました。ですから、まずはそのままコピペしてそのまま表示させて見て下さい。

そして、カスタマイズした部分は、コメントを残し何をどうした的にメモっておくと後で便利ですよ。それでは、記事タイトルに影をつけてみましょう♫

TwentyTwelveの記事タイトルに影をつけてみよう

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

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

.entry-meta {
	clear: both;
}
.entry-header {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.entry-header img.wp-post-image {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.entry-header .entry-title {　　/* ココです!! */
	font-size: 20px;
	font-size: 1.428571429rem;
	line-height: 1.2;
	font-weight: normal;
}

デフォルトですと、記事タイトルが何も装飾されていません。記事タイトルの装飾の仕方はコチラが便利です。

チョッと文字色だけでも変えて、ソコに影をつけてみましょう♫下記の様に追加/編集してみて下さい。

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

.entry-meta {
	clear: both;
}
.entry-header {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.entry-header img.wp-post-image {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.entry-header .entry-title {　　/* ココです!! */
	font-size: 20px;
	font-size: 1.428571429rem;
	color: #fa5555;
	text-shadow: 2px 2px 1px rgba(0,0,0,0.6);
	line-height: 1.2;
	font-weight: normal;
}

これだけです(笑　思ったよりも簡単だったんじゃないですか?これで、記事タイトルに影がついて立体的に見えるハズです。

グローバルナビゲーション、ウェジェトタイトル、その他の文字も立体的にしてみてはいかがでしょうか☆