ガジェニュー

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

  関連記事

sum-adsence
【STINGER5カスタマイズ】AdSenseセンスの表示を色々カスタマイズした備忘録

今回は、メインのブログを「STINGER3」から、レスポンシブデザイン対応の「S …

sum
【STINGER5カスタマイズ】iPhoneでAdSenseの表示がはみ出す問題の解決方法

今回は「で発生した問題の解消のエントリーになっています。何度やってもうまく行かな …

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

7月も終わってとうとう8月に突入です! 個人的には夏は嫌いです!みなさんは「暑い …

photo-express-for-google-tb
Picasa and Google Plus ExpressからPhoto Express for Googleに変更しました。【WordPressプラグイン】

前に書いたエントリーで利用していたプラグインがGoogleの認証方法の変更によっ …

blogcard-custamize-tb
サイト内リンクをブログカード風にカスタマイズ!【WordPressカスタマイズ】

2回連続でWordPressのカスタマイズのお話です。 今回はサイト内リンクを画 …

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

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

sum_012415_124615_AM (1)
【WordPress】ロリポップサーバーからエックスサーバーにお引っ越ししました。

今回は、ロリポップ!のコロリポプラン(月額250円)のプランから、エックスサーバ …

simages_122214_110736_PM
【WordPressカスタマイズ】「Crayon Syntax Highlighter」が重かったのでサイト高速化のため「highlight.js」を入れてみた

最近はWordPressでやっているこのブログがかなり重かったので高速化を目指し …

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

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

sum1014
【STINGER5カスタマイズ】サイドバーにプロフィール設置

今回はSTINGER5のカスタマイズのお話です。サイドバーにプロフィールを追加し …

Loading Facebook Comments ...

Message

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