WordPressテーマ変更!SimplicityからCocoonへ
スポンサーリンク

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

WordPress記事単位で背景画像変更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指定をする感じ。

ポイント

特定記事のみカテゴリのみ…などの指定方法の詳細な説明は、リンク先でご確認ください。

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

あとは背景画像background-imageを子テーマで上書きするので、次の見出しへ❦

特定記事ごとに背景画像を変更するCSS・指定方法

記事毎に画像のパスを指定する、指定方法です。画像のURLの確認方法が不明なかたは、以下を参考にどうぞ❦

画像のパス確認方法は、以下:目次1章:1.2あたりをどうぞ。

LINKWordPress初心者に画像追加時のメディアを説明!画像サイズ変更・画像の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

WPカスタマイザーの画像の位置:9分割

画像によっては、上段・中段・下段:左・中央・右。どこを基準で表示するか指定することも可能なので、大きな画像を背景に表示したい!などあればコピペをどうぞ。

	/* 左・上 */
	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だけでページ毎にスタイル変更するカスタマイズ

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

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
WordPress
フォローする
スポンサーリンク
スポンサーリンク
ビバ★りずむ

Comments

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております?

トップへ戻る
タイトルとURLをコピーしました