WordPress初心者がブログを作るよ♪Gush2をカスタマイズして、フッタ、メイン（記事周囲）の背景色を好みの色に設定。

公開日：2015/02/20 最終更新日：2015/02/20

ℹ️本記事にはPRが含まれています。

SiSO-LAB WordPressで初心者がブログを作るよ

無料で国産のカスタマイズしやすいテーマ、Gush2を使ってブログをカスタマイズしてますが、前回、タイトル部分の解説だけで力尽きてしまったので、今日こそ、フッタ部分とメイン部分の色設定の話です。

本記事は、WordPress V4.1と無料テーマのGush2 V1.1.1にて動作確認を行っています。

Gush2のフッタから背景画像を外して好きな色を設定

今回も変更するファイルはstyle.cssです。WordPressがインストールされているディレクトリの中にテーマが保存されているディレクトリがあり、その中の「gush2」内にあります。
SiSO-LAB WordPressで初心者がブログを作る・Gush2、タイトル背景色、左寄せ

Gush2、フッタ（ブログ表示の下部分）にも背景用の画像ファイルが指定されているので、今回、、ソリッドだけどファンシーな色使いにしたいため、画像ファイルの指定を外します。フッターの背景色は、元々「#444（暗いグレー）」が指定されているので、そのまま使用することにしました。
SiSO-LAB WordPressで初心者がブログを作る・Gush2、フッタ、メイン領域の背景色変更

そんなわけで、style.cssで編集するところは1ヶ所だけです。1968行目に、以下のような定義があります。これは、1024px以上の表示で使用される定義です。


/*--------------------------------------
  1024px フッター
--------------------------------------*/
#footer {
     width: 100%;
     margin: 0 auto;
     clear: both;
     background: #444 url(images/grey_wash_wall.png) left top repeat;
     /* thnx! http://subtlepatterns.com/ */
}

これの1974行目（background）を以下のように修正します。


    background: #444;

ちなみに、背景色も変更したい場合、この行以外にも、以下の行を変更してあげればOKかと思います。

style.css 1237行目


     background-color : #444;

カスタマイズした結果、フッタは以下のように変わりました。ソリッドになりましたね！
SiSO-LAB WordPressで初心者がブログを作る・Gush2、フッタ、メイン領域の背景色変更

メイン（記事部分）の背景色変更

続いて、記事の髪色？とも言える（本文背景が顔、本文や画像が目や鼻などのパーツかな？）、メインコンテンツを囲う部分やサイドバーの背景色を設定します。今回は、ヘッダー部分と同じ色にしたかったので、パステルでファンタジーな「#aaf」に変更します。

ここも本物の家の壁紙のような、いい感じの画像ファイルが背景として設定されているのですが、ソリッドにただの背景色指定に変えてみました。

style.cssの1660行目でbodyのスタイルを指定していますので、これを修正します。


/* 全体に薄いグレーのテクスチャ */
body {
    background: #fff url(images/sos.png) left top repeat;
    /* thnx! http://subtlepatterns.com/ */
}

1662行目の「background」定義を以下のように修正します。


    background: #aaf;

続いて、334行目にも他の全体に影響する定義がありますので、こちらも修正します。


/*--------------------------------------
  全体定義
--------------------------------------*/
html {
     font-family : verdana, sans-serif;
     font-size : 100%;
     line-height : 1.6;
     background: #fff;
     color: #333;
}

これの341行目、「background」の定義を修正します。