ワードプレス サイトタイトル文字に影をつけて立体的に見せる

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

基本的な影の付け方はこちらでお伝えしていますので、そちらも合わせてご覧になってみて下さい。また、ご使用中のテーマによって、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;
}

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

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

 

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

ワードプレス サイトタイトル文字に影をつけて立体的に見せる” への1件のコメント

  1. ピンバック: TwentyTwelve サイトタイトルをテキストから画像に置き換える方法 | 初めてのワードプレス カスタマイズ

コメントを残す

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