WordPressの設定でサイト背景を画像に変更するには、管理画面の外観-カスタマイズ-背景画像より指定できます。CocoonもSimplicityもこれで対応❦
画像を選択からメディアが立ち上がり画像を選んだり、アップロードして背景を決めたら以下のような指定が可能です。
- フルスクリーンで表示
- 画面にあわせ画像の表示位置をきめたり
- 画像をrepeatし並べて表示
- 背景画像をスクロールと同時に動かす・または固定させたり
WordPress機能『背景画像の設定』を使いページ毎に背景を変更したいとき、どのように指定すれば良いか。上記4点のCSS指定方法をチェックし、思い通りに背景CSSカスタマイズを行ってくださいね^^
Cocoonユーザーさんに。以下と合わせてどうぞ。
WordPress機能『背景画像』設定のデフォルト
外観-カスタマイズ-背景画像より画像をいれ、公開をクリックした状態は
- 画像の位置は左上を基準
- 画像サイズは元の画像通り
- 画像を縦横並べて表示:リピートする
- スクロールすると、画像も一緒に動く状態
この状態をCSS以下のように指定される感じです。
body.custom-background { background-image: url(画像のURL); background-position: left top; background-size: auto; background-repeat: repeat; background-attachment: scroll; }
上記のようにスタイルが指定されます。
ページ毎に表示を変更するには、1行目
body.custom-background
の指定変更
これは俗にいう『セレクタ』。これを該当ページ特有の指定にして、style.cssに追記すればOK!
例として。body.categoryid-37
このようにID指定をする感じ。
あとは背景画像background-image
を子テーマで上書きするので、次の見出しへ❦
特定記事ごとに背景画像を変更するCSS・指定方法
記事毎に画像のパスを指定する、指定方法です。画像のURLの確認方法が不明なかたは、以下を参考にどうぞ❦
画像のパス確認方法は、以下:目次1章:1.2あたりをどうぞ。
カテゴリIDを指定し、背景画像を変更例
例えばカテゴリID37の背景だけを変更したい場合
body.categoryid-37
と指定し、画像のパスを変更すればOK!
body.categoryid-37 { background-image: url(画像のURL); }
これをstyle.cssに追記する感じです。
ページ内検索結果だけ背景を変更したい場合
body.search { background-image: url(画像のURL); }

通常の背景画像:Before

検索結果ページのみ背景変更例:After
サイドバーにも背景を適応したい場合
.sidebar
はテーマにあった指定方法(セレクタ)を。
body.search, body.search .sidebar { background-image: url(画像のURL); }
body.search
は検索結果ですが、上述したカテゴリや記事単位などのセレクタをsearch
の部分に貼り付ければOK!
記事単位・カテゴリ単位・タグ単位などその他指定方法
あとは単独で装飾したい記事・カテゴリ・タグなどの『セレクタ』を変更するだけなので、以下リンクで指定方法をチェックしてください。
body.***** { background-image: url(画像のURL); }
.*****
部分に以下リンク先の指定方法をコピペすればOK!
LINKWordPressで記事・カテゴリ・タグ一覧・固定ページ毎にデザイン変更するCSS
画像サイズやデザインによって、画像を真ん中に・・・いや左上を表示させたい・・・背景に画像を大きく・・・画像は並べて表示したい・・・などあるかと思うので、次チェック!
背景画像の表示を指定するCSS
指定画像によっては、並べて表示したいですし、大きな画像の中央辺りに置きたい。などあるかと思います。その指定方法をチェックしてください。
元々設定したものと設定を変更したい場合、スタイルをコピペして貼り付け追記すれば、思い通りの背景は位置ができそうですね!
CSSの追記例:body.hoge { /*カッコ内にスタイルを入れればOK!*/ }body.search
は検索結果ページねっ❦
body.search { background-image: url(画像のURL); /* この領域に追記する:これはコメント */ /* ど真ん中に配置したいときは以下のように */ background-position: center center; }
画像の配置位置を左・中央・右・上・下に指定:コピペ用CSS
画像によっては、上段・中段・下段:左・中央・右。どこを基準で表示するか指定することも可能なので、大きな画像を背景に表示したい!などあればコピペをどうぞ。
/* 左・上 */ background-position: left top; /* 中央・上 */ background-position: center top; /* 右・上 */ background-position: right top;
9分割した上段▲・中段▼
/* 左・中央 */ background-position: left center; /* ど真ん中 */ background-position: center center; /* 右・中央 */ background-position: right center;
9分割した下段▼
/* 左・下 */ background-position: left bottom; /* 中央・下 */ background-position: center bottom; /* 右・下 */ background-position: right bottom;
背景画像のサイズ:コピペ用CSS
背景画像の指定方法です。
- 元のサイズのままでOK!
/* オート */ background-size: auto;
- 画面比率をそのままで画面サイズに収まるよう表示したい!
/* 画面サイズにあわせる */ background-size: contain;
- 比率はそのままでスマホビューで大きな状態・PCビューで拡大して表示させたいとき
/* フルスクリーン */ background-size: cover;
背景画像の繰り返しをする・しない:コピペ用CSS
- 背景画像の繰り返し・あり
/* 背景画像を繰り返し表示 */ background-repeat: repeat;
- 背景画像の繰り返し・なし
/* 背景画像を繰り返し表示しない */ background-repeat: no-repeat;
ページと一緒にスクロールする・しない:コピペ用CSS
- ページと一緒にスクロール・する
/* 背景画像をスクロール */ background-attachment: scroll;
- ページと一緒にスクロール・しない
/* 背景画像を固定 */ background-attachment: fixed;
WordPressが出力する背景画像のCSSを確認する方法
WordPress管理画面の外観-カスタマイズより『背景画像』の設定によりCSSが変わります。

要素の検証画面、bodyを選択しstyleを確認
要素の検証画面F12キーを開いて、bodyを選択しbody.custom-background
のstyleを確認してください。
LINK要素の検証(デベロッパーツール)の使い方!初心者がカスタマイズできる方法
さいごに
基本的な表示はこのスタイルだけで対応できそうです。
あとは画像を工夫したり、圧縮してアップロードして画像のパスを追記してくださいね。
LINKWordPress初心者に画像追加時のメディアを説明!画像サイズ変更・画像のURLはどこ
LINKWordPressで記事・カテゴリ・タグ一覧・固定ページ毎にデザイン変更するCSS
LINKCocoon!headerロゴ・ヘッダー背景画像をCSSだけでページ毎にスタイル変更するカスタマイズ
それでは。かうたっくでした!
Comments