WordPress！ページ・カテゴリ毎に背景画像を変更CSSほぼコピペ

WordPressの設定でサイト背景を画像に変更するには、管理画面の外観－カスタマイズ－背景画像より指定できます。CocoonもSimplicityもこれで対応❦

画像を選択からメディアが立ち上がり画像を選んだり、アップロードして背景を決めたら以下のような指定が可能です。

• フルスクリーンで表示
• 画面にあわせ画像の表示位置をきめたり
• 画像をrepeatし並べて表示
• 背景画像をスクロールと同時に動かす・または固定させたり

WordPress機能『背景画像の設定』を使いページ毎に背景を変更したいとき、どのように指定すれば良いか。上記4点のCSS指定方法をチェックし、思い通りに背景CSSカスタマイズを行ってくださいね＾＾

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の確認方法が不明なかたは、以下を参考にどうぞ❦

カテゴリIDを指定し、背景画像を変更例

例えばカテゴリID37の背景だけを変更したい場合

body.categoryid-37と指定し、画像のパスを変更すればOK！

body.categoryid-37 {
	background-image: url(画像のURL);
}

これをstyle.cssに追記する感じです。

ページ内検索結果だけ背景を変更したい場合

body.search {
	background-image: url(画像のURL);
}

サイドバーにも背景を適応したい場合

.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が変わります。

要素の検証画面F12キーを開いて、bodyを選択しbody.custom-backgroundのstyleを確認してください。

LINK要素の検証（デベロッパーツール）の使い方！初心者がカスタマイズできる方法

さいごに

基本的な表示はこのスタイルだけで対応できそうです。

あとは画像を工夫したり、圧縮してアップロードして画像のパスを追記してくださいね。

LINKWordPress初心者に画像追加時のメディアを説明！画像サイズ変更・画像のURLはどこ

LINKWordPressで記事・カテゴリ・タグ一覧・固定ページ毎にデザイン変更するCSS

LINKCocoon！headerロゴ・ヘッダー背景画像をCSSだけでページ毎にスタイル変更するカスタマイズ

それでは。かうたっくでした！