【Twenty Fourteen】カスタマイズ（配色変更）

こいつですね～　個人的には３カラムは必要ないんだけど、どうしましょ？とか思う以前に【Twenty twelve】なんかと比べて、非常に面倒！色を変えるのも面倒なんですよね（私だけかもしれないけど）

と言う訳でどう言う訳で、私の分かる範囲で適当にカスタマイズして行こうかと思います。

【Twenty Fourteen】を今更だけどカスタマイズをして行こうかな～と思う。

左寄せをセンターにする

デフォルトだとブラウザにぴったりと付いた左寄せなんですけど、これがまず気に入らない。デザイン的には左寄せの方が良いのかもしれないが、私はメインサイドバーを黒にする気はなく、消すか、白くする予定なのでセンターにもっていきたいと思います。

まず、子テーマを作りますが基本的は当ブログで説明した方法と同じ要領で、名前を変えて作ります。

子テーマの作り方

まあ、面倒ではないですが、反映されない人はこちらをどうぞ。

子テーマを作ったら、次のコードをスタイルシ－トに記述。

これでセンターに来ました。

メニューバーの色を変える

う～む….色を変えるのは、私的にはとても面倒なので、とりあえずメニューバーの色を変えて、残りはまとめてやってしまおうと思っているので、今回はザッと色だけ変えて終わりたいと思います。

【Twenty Fourteen】はメニューがブラウザの上に残るタイプなので、これはあれでしょ？透過しかないでしょ？と言う訳で、透過させて表示させたいと思います。

スタイルシートでヘッダーの背景色を変える

ヘッダーを指定しているのは【.site-header 】なので、分かりやすい色で変えていきますね。

オレンジ色にしてみました。

今回分かりやすく変えましたが、その内直します。

透過させる

見ての通り、文章がバーに隠れています。まあ、これはこれでいいのではありますが、私は透過させたいので、先程のコードに追記して背景部分も見えるようにしたいと思います。

え～とですね、80だとか0.8だとかは80％って事で一応ブラウザ別に表示させることを考えての記述で、この場合20％透けてますよ～って事です。

透けましたね。後はお好みで透過の％を変えてやるだけです。

検索トグル変更

検索窓です。虫眼鏡の部分の色を変更していきたいと思います。

これで、好きな色にすればいいのですが、マウスホバー時やクリックすると相変わらずの緑なので変更していきたいと思います。

hover追加でカーソルが乗った時の色が変わり、クリックすると検索窓が現れるので、（.search-box）で色を指定します。

メニューの背景色を変更

さてさて、これで一区切りと思いきや、メニュー（サンプルページ）にマウスを載せると緑色のまま、サンプルページに移行すると、文字色が緑になってしまうので、これをどうにかしてメニュー色を終わりにします。

この部分の色を変えてあげるとマウスを載せた時に背景色が変わります。

クリック時のテキストカラーを変更

このままでは、緑色のままなので、そのままでいい人以外は変えてしまいましょう。

こんな感じに変わるので、お好きなように配色をしてください。

まとめ

この様な感じで、サイドバーやフッターエリアの色も変えていけばいいのですがそれはおいおいと言う事で、とりあえずはナビゲーションバーの配色の仕方を今回は説明しました。