ガジェニュー

~iPhone・格安スマホとか~

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

      2014/09/29    後で読む

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

WordPress Theme Gush2

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

SPONSORED LINKS

【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をいじりましたが、色々と複雑で難しいですね( ´゚д゚`)やっぱり。

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

てな感じで。

 - Gush2, WordPress , ,

  関連記事

simages_120314_110122_AM
【STINGER5カスタマイズ】スマホでの拡大操作に対応させる方法

今回はSTINGER5でちょっと気になっていたスマホ表示でのピンチイン・アウトに …

sHIRO93_machinokurasi500
エックスサーバーにしたら、サーバーの応答速度が大体9分の1ぐらいになった件

ロリポップサーバーからエックスサーバーにお引っ越ししました。でも書きましたが20 …

simages_121114_030748_PM
【STINGER5カスタマイズ】日付・更新日の横にPoketの後で読むボタンを追加

今回も、STINGER5のカスタマイズ記事です。 普段スマホでネットサーフィンを …

sum1
カエレバのCSSカスタマイズ

今回はカエレバのカスタマイズを行いました。カエレバといえば、商品のアフィリエイト …

icon_1r_192
【アクセス数報告】2015年4月のPVとアフィリエイトの収益とか

4月も終わり今日から5月ですね。GW前にこの暑さはもはややってられないです。 ま …

sum
【アクセス数報告】2014年10月のPVとアフィリエイトの収益を公開します

10月の末から、昨日まで曾祖母のお葬式や、遺品整理やらでバタバタしていて本日から …

sicon_1r_192_120214_095619_AM
【アクセス数報告】2014年11月のPVとアフィリエイトの収益を公開します

さて、12月ということで、いつもの報告をやっていきます。前回までの結果は下記から …

sum1
【STINGER5カスタマイズ】 App Store Insert の導入とCSSカスタマイズ

今回はSTINGER5にRAKUISHI.COMさんが公開しているWordPre …

images
WordPressのセキュリティ強化!2段階認証を設定しよう!

つい最近の出来事ですが、年金基金から色々と情報の流出が問題となりましたね。担当者 …

images_111514_124303_AM
【STINGER5カスタマイズ】ヘッダー周りのカスタマイズ

今回は、STINGER5のヘッダーのカスタマイズをしたので、備忘録がてら書きます …

Loading Facebook Comments ...

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です