work.log

元エンジニアの備忘録的ブログ

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

投稿:2014-01-16 17:16  更新:

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

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

twentyfourteen-customize-004-01

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

twentyfourteen-customize-004-02

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

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

twentyfourteen-customize-004-05

関連記事
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;

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

twentyfourteen-customize-004-06

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

関連記事

コメント

  1. あおい より:

    順調にcssカスタマイズ進行しております。
    誤字に気付きましたのでご連絡差し上げます。

    TwentyFourteen ドラッグ痔の配色カスタマイズ
    「ドラッグ痔」になっております。

    • miura より:

      あおい様

      ご指摘ありがとうございました。早速修正しました!

      今までの中で一番最悪なタイプミスしてますね。しかも、見出しw

      どうもありがとうございました。

  2. 匿名 より:

    こんにちは 参考にさせてもらっています
    右側にあるよく見られている記事や、最近の投稿などの黒い線はいろ変更できますか?

    • miura より:

      勿論変更できます。

      スタイルシートに下記のように記述されている箇所があるので、その中の border プロパティで調整できます。

      .content-sidebar .widget .widget-title

  3. 匿名 より:

    返信ありがとうございますやってみます!
    ぶっくまーくして今後もちぇっくさせていただきますね^^

コメントを残す