ガジェニュー

~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 , ,

  関連記事

sicon_1r_192_010515_055949_PM
【アクセス数報告】2014年12月のPVとアフィリエイトの収益とか

2015年がスタートしましたね。 今年は色々なことを始める予定ですので、去年とは …

ana-sum
【アクセス数報告】2014年9月のPVと収益を公開します

今回は初めて、「ガジェニュー」のPVを公開してみようと思います。実際にこうやって …

sum-sns
【STINGER5・GUSH2カスタマイズ】feedly・Poket・LINEで送るボタンの追加設置

今回は、日本語で無料・しかもSEOに強くレスポンシブデザインかつ、カスタマイズも …

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

5月の印象はとしてはとにかく暑い!暑い!やってられません。 という印象でした。 …

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

早いもので2015年も2月に突入ということで、1年の12分の1がすでに消費されて …

images 2
App Store Insertでアイコン画像が表示されない問題を解決!【ブログカスタマイズ】

当サイトでもかなりお世話になっている「App Store Insert」ですが、 …

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

3月も終わり今日から4月に突入。新年度ということで色々とイベントがある方いるかも …

screenshot (1)
「Google+」と「WordPress」を活用して2時間でサーバの容量を圧迫しないフリー写真素材サイトを作ったよ!

2年ほど前にミラーレス一眼を買って色々写真を楽しんだりしていた私なのですが、実は …

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

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

sum
【STINGER5カスタマイズ】メディアサイズが変更できない問題

こちらのブログですが、【STINGER5カスタマイズ】AdSenseセンスの表示 …

Loading Facebook Comments ...

Message

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