ガジェニュー

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

  関連記事

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

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

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

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

images_110914_024007_AM
【STINGER5カスタマイズ】サイドバーの見出しタイトルの前にアイコンフォントを設置

なんとなく、STINGER5のデフォルトのサイドバーの見出しの部分が目立たない気 …

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

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

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

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

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

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

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

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

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

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

images_112014_115155_AM
【STINGER5カスタマイズ】このブログにしたカスタマイズまとめ

STINGER3からSTINGER5に乗り換えたのが、2014年10月1日。もと …

chatlike-css-tb
レスポンシブ+スマホ最適化のチャット風の会話を導入したよ。【WordPressカスタマイズ】

今回はCSSを利用してチャット風の会話レイアウトを導入したので備忘録として書いて …

Loading Facebook Comments ...

Message

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