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

基本的な影の付け方はこちらでお伝えしていますので、そちらも合わせてご覧になってみて下さい。また、ご使用中のテーマによって、CSSを記入する箇所が異なりますので予めご了承下さい。

今回は、テーマTwentyTwelveおよびTwentyElevenのスタイルシートを例にとって、タイトルに影をつける方法を書き残しておきます。

テーマTwentyTwelveのタイトルの場所はココ!!

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

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

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

.site-header h1 a,
.site-header h2 a {　 /* ココです!! */
	color: #515151;
	text-shadow: 3px 2px 3px rgba(0,0,0,0.5);
	display: inline-block;
	text-decoration: none;
}

数値は、色々と変えてみるとどんな風に変化するのかが分かると思います。

テーマTwentyElevenのタイトルの場所はココ!!

/* =Header
----------------------------------------------- */

#branding {
	border-top: 2px solid #bbb;
	padding-bottom: 10px;
	position: relative;
	z-index: 9999;
}
#site-title {
	margin-right: 270px;
	padding: 3.65625em 0 0;
}
#site-title a {　/* ココです!! */
	color: #111;
	font-size: 30px;
	font-weight: bold;
	line-height: 36px;
	text-decoration: none;
}
#site-title a:hover,
#site-title a:focus,
#site-title a:active {
	color: #1982d1;
}

同様に、以下の様に追加/編集してみましょう。

#site-title a {　/* ココです!! */
	color: #111;
	text-shadow: 3px 2px 3px rgba(0,0,0,0.5);
	font-size: 30px;
	font-weight: bold;
	line-height: 36px;
	text-decoration: none;
}

これで、サイトタイトルに影がついたハズです。意外と簡単でしたよね?サイトタイトルに影がつくと、また全然違った印象になりますよね?かなりインパクトがあると思います。

って、私のサイトはサイトタイトル非表示です…(汗　ん～ん、なぜこの記事を書いてるのか自分で不思議になってきました(笑