背景画像の削除と設定方法
Gush2 では、PC表示（1024px 以上）のときにヘッダー・ボディー・フッターに背景画像を出力しています。
指定箇所と、オリジナル画像に変更する方法を解説します。
この記事の目次
背景画像出力部分（CSS）
style.css の「ここからPC表示設定」以下に下記の記述があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
body { background: #fff url(images/sos.png) left top repeat; /* thnx! http://subtlepatterns.com/ */ } #header { background: #444 url(images/grey_wash_wall.png) left top repeat; /* thnx! http://subtlepatterns.com/ */ } #footer { width: 100%; margin: 0 auto; clear: both; background: #444 url(images/grey_wash_wall.png) left top repeat; /* thnx! http://subtlepatterns.com/ */ } |
背景画像が不要の場合は、該当部分（background）をコメントアウトするか削除してください。
背景カスタマイズ方法
スマホやタブレットでも背景画像を出力したい場合
スマホやタブレットで閲覧したときに少しでも速く表示できるよう、背景画像はPCでのみ設定しています。
どの端末で閲覧しても背景画像を表示したい場合、background の記述箇所を変更してください。
※管理画面の「カスタム背景」を利用する場合は、上記のCSSで指定してある部分を削除する必要があります。
背景画像変更方法
背景画像をCSSから変更する場合、画像の場所を再指定してください。
body 部分を変更するなら、このようになります。
|
1 2 3 |
body { background: #fff url(画像までのパス) left top repeat; } |
アップロード方法は2通りあります。
- FTPソフトでテーマファイル内の「images」に直接アップロードする
- 管理画面の「メディア」からアップロードする
例として、background.png という画像を用意して指定してみます。
FTPで直接アップロードする方法
テーマファイル内の「images」ディレクトリに画像をアップロードします。
FFFTP使用イメージ
CSSは相対パスで指定します。
|
1 2 3 |
body { background: #fff url(images/background.png) left top repeat; } |
管理画面からアップロードする方法
管理画面の「メディア」から「新規追加」で画像をアップロードします。
画像を選択すると、「添付ファイルの詳細」画面に移るので、URLをコピーします。
CSSはコピーしたURLをそのまま貼り付けて、絶対パスで指定します。
|
1 2 3 |
body { background: #fff url(http://～background.png) left top repeat; } |
さいごに
背景画像が濃すぎると見づらくなってしまうので、薄いテクスチャ系画像がおすすめです。
「素人でもブログをちょっとだけオシャレにできるデザインテクニック」も合わせてご覧ください。
2013年10月より、おもにWordPress初心者を対象とした指南書がメインのNaifixを開設。2014年3月にカスタマイズ前提のWPテーマ「Gush」を公開。
[…] GUSH2の説明書に詳しく書かれていますので、こちらをどうぞ。 背景画像の削除と設定方法 […]