Gush2カスタマイズ~背景色がPCだけ反映されない~

いつもはstingerを使用しているのですが、運営しているサイトが全部「STINGER」だと視野が狭まるということで1つのサイトだけですがシンプルで評判もいい「Gush2」に乗り換えて少しカスタマイズすることにしました。

WordPress Theme Gush2

で、カスタマイズを進めて、10分ぐらいで早くも詰まりました(笑)自分の知識の無さにビックリですｗまぁ、幸いちょっと調べたらなんとなく解決策を見出すことが出来ましたのでちょっとMemoを残しておきたいと思います。

【Gush2カスタマイズ】背景色がPCだけ反映されない

今回カスタマイズしたのはこちらのサイトではないのですが、女性向けのサイトになっています。（恥ずかしいので非公開です。）女性向けのサイトということで全体的に女性らしいサイトにしたかったのでヘッダーと全体のバックグラウンドカラーのカスタマイズをしました。

ヘッダーに関しては下記のようにしました。「style.css」を書き換えてカスタマイズしていきます。

#header {
	text-align: center;
	background: #FF922B;
	padding: 0 0 12px;
	border-bottom: 1px solid #fff;
}

変更したのは「#FF922B;」の部分だけです。

続いて背景色です。

背景色の変更は簡単で、WordPressのメニューから行います。
外観→カスタマイズより背景のカラーを変更します。

カラーに関しては下記を参考にさせて頂きました。
WEB色見本原色大辞典 - HTML Color Names

しかし、こちらの書き換えを行った所、スマホ版でのみカラーの変更が確認され、PCからみると設定が反映されませんでした。

なんで？

最初はちょっと悩んだのですが、PC版は別途ヘッダー用の画像・背景画像・フッター画像が埋め込まれているため元の下地の色を変更しても、上に画像が表示されて設定した色にならないということが分かりました。

ということでその場合は下記の変更をすればOKなのようです。

ということで、背景画像を削除していきます。カスタマイズするのは「style.css」です。

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

この部分の「url(images/sos.png) left top repeat;」を削除すると背景の画像が削除されます。

ヘッダーに関しても同様なので同じようにPC用の表示部分から背景画像を消していきます。こちらもいじるのは「style.css」です。

/* ヘッダーに濃いグレーのテクスチャ */
#header {
	background: #444 url(images/grey_wash_wall.png) left top repeat;
	/* thnx! http://subtlepatterns.com/ */

こちらは、「background:」を上記で設定したカラーに変更し、先ほど同様に「url(images/grey_wash_wall.png) left top repeat;」の部分を削除して背景を削除します。

はい。これで無事には画像が削除されて、設定したカラーが反映されました。

以上です。

自分はHTMLも、CSSも概念自体は理解していますが内容に関しては専門家ではないのでちんぷんかんぷんで勉強中です。今回は初めてレスポンシブデザインのCSSをいじりましたが、色々と複雑で難しいですね( ´ﾟдﾟ｀)やっぱり。

まぁ、ちょっとずつ勉強しながら進んで行ければと思います。

てな感じで。