【SWELL】特定の固定ページに背景画像を設定する方法【CSSで解決】

ハシビィー君

カスタマイズでサイト全体のページ背景画像の設定できるけど、個別に設定はできないっすか？

カピーさん

設定項目は残念ながらないぞ。しかし簡単なコードで好きなページに背景画像を設定できるぞ！

特定の固定ページに背景画像を設定する方法

今回の内容は、多くは特定の固定ページに個別に背景画像を設定したい場合に活用できる方法となっております。

ハシビィー君

LPや商品ページなどで使えそうっす。

CSSを入力する場所

『SWELL』には個別のページにCSSを入力するための機能があります。
個別に画像を変更することができますし、その他にもCSSを利用するときに必須の項目になります。

WordPressの本文入力フォームの下にCSSを入力できるようになっています。

背景画像を表示させるCSS

/* ページ背景画像を特定のページのみ設定 */
#body_wrap {
background:url(任意の画像URL)
}

番外編：特定の固定ページの背景画像を非表示にする方法

サイト全体に施された背景画像を設定することはできますが、非表示にしたいページがあるときに活用できる方法になります。

背景画像を非表示にするCSS

［カスタマイズ→サイト全体設定→基本デザイン→ページ背景］でサイト全体に指定の画像を全ページ設定した背景画像を使用することができます。

しかし特定のページのみ背景画像を無効化したい場合は、下記の内容を記述することで実現ができます。

/* ページ背景画像を非表示 */
#body_wrap {
background : none;
}

カピーさん

「会社概要」などで装飾を引き算したいときに使えるぞ！

まとめ：シンプルなサイトにこそアクセントを

最後に『特定の固定ページに背景画像を設定する方法』に関する結論を。