ワードプレステーマTwentyTwelveのサイトタイトル(ヘッダータイトル)を飛び出す絵本風にアレンジしてみたいと思います。年代バレバレ!?

さて、気を取り直して(笑、サイトタイトルに影をつける方法はコチラ♫それに一工夫加えて、チョッとばかし遊んでみました(笑　まぁ、誰もが考えつくことかもしれませんが、遊び心満載で楽しんでみて下さい♫

もうね、CSS3さまさまです!!私の様にweb系に強くなくても、サイトにたくさんの工夫が出来るんです。本当に楽しいですね!!あなたにもぜひその感動をと思い、書き残しておきます。

’時間’と’影’で飛び出す絵本風にアレンジ♫

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

/* Header */
.site-header {
	padding: 24px 0;
	padding: 1.714285714rem 0;
}
.site-header h1,
.site-header h2 {
	text-align: center;
}
.site-header h1 a,
.site-header h2 a {
	color: #515151;
	display: inline-block;
	text-decoration: none;
}
.site-header h1 a:hover,
.site-header h2 a:hover {
	color: #21759b;
}
.site-header h1 {
	font-size: 24px;
	font-size: 1.714285714rem;
	line-height: 1.285714286;
	margin-bottom: 14px;
	margin-bottom: 1rem;
}

色や大きさなどは、後でいくらでも変更が出来ますので、まずは下記の様に追加/編集してみて下さい。

/* Header */
.site-header {
	padding: 12px 0;
	padding: 0.857142857rem 0;
}
.site-header h1,
.site-header h2 {
	text-align: center;
}
.site-header h1 a,
.site-header h2 a {　/* サイトタイトル(リンク)文字のカラー設定 */
	color: #2175ab;
	text-shadow: 2px 1px 2px rgba(0,0,0,0.4);
	display: inline-block;
	text-decoration: none;
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
}
.site-header h1 a:hover,
.site-header h2 a:hover {　/* マウスオーバー時のカラー設定 */
	color: #fa4444;
	text-shadow: 3px 2px 3px rgba(0,0,0,0.5);
}
.site-header h1 {　/* サイトタイトル(リンク)の文字設定 */
	font-size: 24px;
	font-size: 1.714285714rem;
	line-height: 1.285714286;
	margin-bottom: 10px;
	margin-bottom: 0.714285714rem;
}

さぁ、どうなりましたか?’時間’と’影’のコラボレーションです(笑　これで、サイトタイトルが’飛び出す絵本風’にアレンジできたと思います。(自己満!?

これを、別の場所に貼り付けたりして遊んでいる内に、いろんなアイデアが出てくるかもしれませんよね。ぜひ、楽しんでみて下さい☆