TwentyTen サイトタイトル(ヘッダータイトル)のリンク文字色の変更

ワードプレステーマTwentyTenのサイトタイトル(ヘッダータイトル)は、デフォルトでは真っ黒です(笑 まぁ、それは良いのですが、TOPページへのリンクになっているのにも関わらず、マウスオーバーした時に色すら変わりません…。

ってことで、サイトタイトル文字の色変更及びマウスオーバー時に色が変わる様にカスタマイズしようと思います。それでは、スタイルシートの以下の部分を見つけて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを変更して下さい)

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

#header {
	padding: 30px 0 0 0;
}
#site-title {
	float: left;
	font-size: 30px;
	line-height: 36px;
	margin: 0 0 18px 0;
	width: 700px;
}
#site-title a {
	color: #000;
	font-weight: bold;
	text-decoration: none;
}
#site-description {
	clear: right;
	float: right;
	font-style: italic;
	margin: 15px 0 18px 0;
	width: 220px;
}

/* This is the custom header image */
#branding img {
	border-top: 4px solid #000;
	border-bottom: 1px solid #000;
	display: block;
	float: left;
}

↓コレを以下の様に追加・変更します。

/* =Header ヘッダー部の設定
-------------------------------------------------------------- */

#header {
	padding: 10px 0 0 0;
}
#site-title {
	float: left;
	font-size: 30px;
	line-height: 36px;
	margin: 0 0 18px 0;
	width: 650px;
}
#site-title a { /* サイトタイトルのリンク文字設定 */
	color: #555;
	font-weight: bold;
	text-decoration: none;
}
#site-title a:active,
#site-title a:hover {
	color: #ff4b33;
}                /* 追加部分 */
#site-description {
	clear: right;
	float: right;
	font-style: italic;
	margin: 20px 0 5px 0;
	width: 220px;
}

※追加・変更するのは、赤い文字のところです。

コレで真っ黒から灰色へ、マウスオーバー時には赤い色になったと思います。チョッとはサイトタイトルっぽくそして、リンクだと言うことが分かる様になったと思います。

なお、サイトタイトルの文字の大きさを変えたい場合は、上記のコノ部分

#site-title {
	float: left;
	font-size: 30px;
	line-height: 36px;
	margin: 0 0 18px 0;
	width: 650px;
}

赤色の数字を変えてみて下さい。字の大きさを大きくした場合は、30よりも大きな数字にすればOK!!

それから、右側のサイトディスクリプション(紹介文)の字の大きさや色を変更したい場合は、

#site-description {
	clear: right;
	float: right;
	font-style: italic;
        font-size: xxpx; /* 追加 */
        color: #xxxxxx; /* 追加 */
	margin: 20px 0 5px 0;
	width: 220px;
}

この様に追加して下さい。字の大きさはpx(ピクセル)、字の色はカラーコードを追加入力すればOKです。


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

TwentyTen サイトタイトル(ヘッダータイトル)のリンク文字色の変更” への2件のコメント

  1.  初めまして。こちらの “サイトタイトルの文字の大きさの変更” を参考にさせていただきました。おかげさまで、大きいと感じていたサイトタイトルの文字は、少し小さくなって満足しています。

     ただ、記事のサブタイトルをクリックすると、サイトタイトルが極端にサイズが小さくなってしまいます。 僕が見るに、右にあるサイトコメントと同じぐらいの大きさでしょうか。

     何か心当たりがあれば、ご指導願えないでしょうか?よろしくお願い致します。

  2. すみません。さらに酷くなって手を付けられなくなったので、別のテーマにします。お騒がせしました。

コメントを残す

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