TwentyElevenフッターの文字(リンク色)の変更方法

ワードプレステーマTwentyElevenのフッター部分の文字色(リンク色)の変更方法です。フッターエリアの背景色の変更方法はこちら。

テーマTwentyElevenのフッターエリアは、メインコンテンツとは別に設定がされています。文字色、背景色、リンク色など全てです。

なので、サイト全体の設定を変えてもフッターは何も変わりません…(汗 しかし、ココさえ押さえておけば、もうバッチリですよ♫

TwentyElevenのフッター設定はココ!!

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

/* =Footer
----------------------------------------------- */

#colophon {
	clear: both;
}

~~~~~~~~~ 中略 ~~~~~~~~

/* Site Generator Line */
#site-generator {
	background: #f9f9f9;  /* 背景色 */
	border-top: 1px solid #ddd;  /* フッター上の線 */
	color: #666;  /* 文字色 */
	font-size: 12px;  /* 文字の大きさ */
	line-height: 2.2em;  /* 行間(文字の高さ) */
	padding: 2.2em 0.5em;  /* 余白(上下、左右) */
	text-align: center;  /* 文字の表示位置 */
}
#site-generator a {
	color: #555;  /* フッターのリンク色 */
	font-weight: bold;
}

こんな感じです。それぞれの数値やカラーコードを入力して下さい。

em単位になっていますが、px単位に変更することもできます。emは、文字の大きさ分に相当する単位です。つまり1emで1行の余白ができます。2emで2行分の余白ができる事になります。

line-heightは1行の高さです。paddingが余白です。paddingは、初心者にはチョッと分かりずらい部分もあると思いますので、こちらを参照してみて下さい。

デフォルトですと、リンク色は1色でマウスオーバーしても色は変わりませんよね。なので、以下の様に追加/編集してみて下さい。

#site-generator a {
	color: #555;  /* フッターのリンク色 */
	font-weight: bold;  /* 文字の太さ */
}
#site-generator a:focus,
#site-generator a:hover {
	color: #お好きな色;  /* マウスオーバー時のリンク色 */
	text-decoration: none;
}

文字の太さ:boldは太文字、通常の細い文字にしたい場合はnormalに変更して下さい。

text-decorationは、指定していません。マウスオーバー時に下線を引きたい場合は、noneをunderlineに変更して下さい。

これで、フッターエリアがかなり変わったハズです。最初のうちは、どの要素を変更すればいぃか分からないですよね。

ぜひ参考にして頂き、フッター部をあなたのお好みの状態にカスタマイズしてみて下さいね。

WordPressデザインブック ステップバイステップ形式でマスターできる
WordPressデザインブック ステップバイステップ形式でマスターできる

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

TwentyElevenフッターの文字(リンク色)の変更方法” への1件のコメント

  1. ピンバック: TwentyEleven フッターの高さ調整 | 初めてのワードプレス カスタマイズ

コメントを残す

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