【SWELL】サイト全体に背景画像（背景色）を設定する方法

こういった悩みに答えます。

今回の記事を読むことで以下のようにサイト全体に背景画像を設定できるようになります。

トップページのみ掲載していますが、全ページ（例えば、投稿ページや固定ページetc…）に反映されています。

【SWELL】サイト全体に背景画像（背景色）を設定する方法

サイト全体に背景画像を設定する方法

管理画面メニューから、「外観」＞「カスタマイズ」を選択します。

サイドバーから、「サイト全体設定」を選択します。

サイト全体設定から、「基本デザイン」を選択します。

基本デザインの「ページ背景画像」から、画像を選択します。

画像は、SWELL DEMO SITE 05で使用されているものをそのまま使っています。デモサイトを見た方は分かると思いますがデモサイトと同じ画像を使っているのにデモサイトの背景画像と違って見えているはずです。理由は後ほど解説します。

画像サイズは、350 x 350pxの正方形ですが違ってもOKです。

その他の設定から、固定表示する（スクロールで動かないようにする）にチェックを入れます。

チェックを入れない時と入れた時の違い

チェックなし（背景画像とコンテンツが一緒に動いている）

チェックあり（固定された背景画像の上をコンテンツが動いている）

背景画像の透明度を設定する

サイドバーから、「追加CSS」を開きます。

以下のコードを追加CSSにコピペすると背景画像が透過されます。

#body_wrap::before {
    opacity: 0.25;
}

デモサイトでもこのコードが当たっており、無効にするとデモサイトの背景画像の透過が解除されます。

注意点

画像サイズを350 x 350px → 1920 x 1920pxに変更して背景画像に設定するとデザインが拡大して表示されます。

今回のようにサイト全体に背景画像を設定する場合、以下は特にあたることはないので気にしなくてOKです。

サイト全体に背景色を設定する方法

管理画面メニューから、「外観」＞「カスタマイズ」＞「サイト全体設定」を選択した後からの解説となります。

サイト全体設定から、「基本カラー」を選択します。

背景色から、色を選択するとサイト全体に背景色が設定されます。

今回は以上です。