Gush2 ブログ運用

【Gush2カスタマイズ】全体・フッターの背景を変更する

2016/05/22

Gush2カスタマイズ 背景編

 

ご案内 紆余曲折を経て、現在はStinger7を使用しています。

 

今日のGush2カスタマイズは、全体・フッターの背景を変更していきます。

背景を変えるだけだったら簡単ですのでサクサク進めていきましょう。

なお、ヘッダー(ロゴ)の変更については「ヘッダーとロゴを変更する」を参考にしてください。

スポンサーリンク

Gush2の全体背景をカスタマイズする

初期設定ではPC用の表示で背景画像が指定されているだけなので、タブレット・スマホでは白背景になります。

やろうと思えば、スマホ・タブレット・PCで別の背景色・背景画像を設定することが可能です。

・・・あまりスマホやタブレットで背景色を設定している人って見ないですけどね。

僕もそのままにしてます。

スマホ用

背景色を変えたい場合は、background: #fff; が白指定ですので、#fffの部分を好きに指定してあげてください。

背景に画像を使いたい場合は、 background: #★画像に近い色★ url(★画像URL★) left top repeat; としてください。

タブレット用・PC用の指定をしなければここで指定したものがそのまま引き継がれますので、気をつけてください。

タブレット用

タブレット用のbody指定はデフォルトでは用意されておらず、スマホでの設定をそのまま引き継ぐようになっています。

タブレットだけ別の背景を指定する場合は、

という表記を探して、この下に

といった具合に追記してやってください。

PC用

background: #fff url(images/sos.png) left top repeat; の部分で()内を好きな画像に差し替えてやればOKです。

ついでに#fffを画像に近い色で指定しなおしてやれば完璧です。

Gush2のフッターをカスタマイズする

「フッター」で検索すると3ヶ所に記述があり、上からスマホ用、タブレット用、PC用の表示をカスタマイズすることができます。

スマホ用

タブレットの表示にそのまま引き継がれます。

colorは文字の色、text-alignはleftにすれば左寄せ、rightにすれば右寄せになります。

背景色はbackground-colorで指定します。

タブレットやスマホで背景に画像を入れるのは見にくくなりますのでオススメはしませんが、どうしてもという場合はこんな感じで指定してやってください。

タブレット用

タブレット用は余白しか設定されていませんので、それ以外はスマホ用の設定がそのまま引き継がれます。

スマホと別の色にしたければ background-color:#★好きな色★; を追加してください。

文字の色を変えたければ color:#★好きな色★; で追加、太字にしたければ font-weight:bold; と追記してやってください。

PC用

PC用個別で指定されているのは、幅と余白とfloatのクリア、背景画像。

タブレット用を参考に、PCだけでやりたい設定があれば追記・変更してやってください。

スポンサーリンク

-Gush2, ブログ運用

(たかなし むつき)と読みます。元某大手通信系コールセンター派遣社員。36歳で派遣脱出を達成!今はシステム運用の中の人です。コールセンター仕事術や転職など、自分でいうのもアレですが、いいこと言ってます。 >> 詳細プロフィール


【運用ブログ】

WinF
日常を理系目線で鋭くえぐる大人の読み物
http://winfriede.com/

WinF-JC
30代から派遣を脱出する方法満載の転職ブログ
http://winfriede.com/jobchange/

WinF-FX
FXを使って1日2分で作業と月々5,000円の積立を7,000万円にする方法まとめ
http://winfriede.com/FX/

しょうもないことばっか送りつけるのであまりSNSのフォローはオススメしません。。

【Instagramやってます】
Instagram

【LINE@やってます】
更新情報のほかに、毎朝7時と夜10時に”意識高い系の独り言"を配信します。
暇な時、気が向いたら返事するので気軽に話しかけてください。

友だち追加数

※@winfで検索でも友達登録ができます。