TwentyFourteenでフッダー部分の色を変更する

WordPress のテーマ TwentyFourteen のカスタマイズ記事です。

前回までに TwentyFourteen のヘッダー部分およびメインウィジェットの色をカスタマイズしましたが、今回は下記図の「青」で表示したフッダー部分のカスタマイズについて書きます。

フッダー部分の配色はヘッダーと合わせるので下記のようなイメージとなります。

フッダーは他の部分に比べ編集する箇所も少ないので、ついでに「マウスでドラッグした時の色」も変更してみます。

デフォルトのドラッグ時の色

関連記事
TwentyFourteenでヘッダー部分の色を変更する
TwentyFourteenでメインウィジェットの色を変更する

スポンサーリンク

TwentyFourteen フッダー部分のカスタマイズ

スタイルシートは下記項番を編集します。

• 8.0 Footer

フッダー部分は背景色とホバー時の色を変更するだけのお手軽カスタマイズです。

・
・ ~省略~
・

.site-footer {
	background-color: #000;
	font-size: 12px;
	position: relative;
	z-index: 3;
}

・
・ ~省略~
・

.site-info a:hover {
	color: #41a62a;
}

変更箇所。

6 行目 -> background-color: #464646;
17 行目 -> color: #fff;

これで完了です。

TwentyFourteen ドラッグ時の配色カスタマイズ

スタイルシートは下記項番を編集します。

• 1.0 Reset

TwentyFourteen のメインカラー ? は緑らしいので、これを自分のブログに合わせた色に変更します。

・
・ ~省略~
・

::selection {
	background: #24890d;
	color: #fff;
	text-shadow: none;
}

::-moz-selection {
	background: #24890d;
	color: #fff;
	text-shadow: none;
}

6, 12 行目 -> background: #21759b;

ここを変更するとドラッグ時はこんな感じになります。

以上でフッダー部分 (+ ドラッグ) のカラーカスタマイズは完了です。