SWELLで背景画像をおしゃれにしたいのに、「どこから設定すればいいの？」と手が止まっていませんか。
一言でまとめると、「SWELLの背景画像は、どこに効く設定なのかさえ分かれば、あとは画面どおりに操作するだけでかなり自由にカスタマイズできる」という内容です。背景まわりで悩んでいる方は、この記事を見ながら一緒に手を動かしてみてください。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
SWELLで設定できる背景画像の全体像をざっくり整理しよう
最初に、「そもそもSWELLではどんな種類の背景画像を触れるのか」をざっくり整理しておきます。ここを押さえておくと、このあとどの設定をいじればいいのか迷いにくくなります。
背景画像にはどんな種類がある？使い分けのイメージ
よく使う背景画像を、まずは表でざっくり整理してみます。
| 種類 | どこから設定するか | どの範囲に効くか | 向いている使い方の例 |
|---|---|---|---|
| ページ背景画像（サイト全体） | 「外観」→「カスタマイズ」→「サイト全体設定」→「基本デザイン」→「ページ背景」 | サイト全体の背景（記事や固定ページの“裏側”） | 全体の雰囲気を変える、パターン背景を敷く |
| タイトル背景画像 | 各固定ページ・投稿の編集画面の「タイトルの背景画像」 | そのページのタイトル周辺だけ | 会社概要やサービス紹介などの見出しを目立たせる |
| コンテンツヘッダー背景 | カスタマイザーの「サイト全体設定」→「コンテンツヘッダー」 | 「タイトル位置：コンテンツ上」のときのヘッダー部分 | ブログ一覧の上に大きなビジュアルを置く |
| フルワイドブロック背景 | エディターでSWELLの「フルワイド」ブロックを挿入し、ブロック設定から指定 | そのブロック（1セクション）全体 | LP風の帯や、メッセージを強調したいセクション |
| カバーブロック背景 | Gutenberg標準の「カバー」ブロック | そのブロックの範囲 | アイキャッチ付きの見出しや、帯状コンテンツ |
この5パターンを頭に入れておくと、「今いじっているのはどの範囲の背景なのか」が分かりやすくなります。このあと、サイト全体・タイトル・ブロック単位という順番で見ていきます。
背景画像を触る前に知っておきたいポイント
背景画像をいじり始める前に、失敗しやすいポイントだけ軽く頭に入れておくと安心です。
- 背景を濃くしすぎると、上に乗る文字が読みにくくなる
- PCでちょうどよくても、スマホで見ると印象が変わることがある
- 大きい写真をそのまま使うと、表示速度が遅くなりやすい
- 「どの範囲の背景なのか」（サイト全体なのか、タイトルだけなのか）を意識して設定する
私も最初は、真っ黒に近い写真を全面に敷いてしまい、本文がほとんど読めなくなったことがあります。これから順番に設定を見ていくので、頭の片すみに置きながら読み進めてもらえると、同じ失敗をしなくて済むはずです。
サイト全体のページ背景画像を設定する方法
ここでは、SWELLの「ページ背景画像」を使って、サイト全体の雰囲気を変える方法をまとめます。まずはここから触ってみると、変化が分かりやすいです。
カスタマイザーでページ背景画像を設定する手順
サイト全体の背景を変える基本的な流れは、次のとおりです。
- WordPress管理画面の「外観」→「カスタマイズ」を開く
- 「サイト全体設定」→「基本デザイン」をクリックする
- 「ページ背景画像（PC／SP）」の項目で、画像を選択する
ここでPC用とスマホ用を別々に設定することもできます。全画面に写真を敷きたい場合は横長の画像を、控えめに模様だけ入れたい場合は、小さなパターン画像をループさせるイメージで使うと、きれいに見えやすいです。
ページ背景画像の細かい設定と「固定表示」
ページ背景画像を設定すると、画像の表示方法を細かく調整できる項目も出てきます。
- 画像サイズ（広げて表示するか、繰り返して敷き詰めるか）
- 画像の位置（上下・左右どこを基準に配置するか）
- 画像の繰り返し（タイル状にループさせるかどうか）
- 固定表示（スクロールしても画像を動かさないかどうか）
「固定表示」をオンにすると、ページをスクロールしても背景だけが止まって見える、いわゆるパララックス風の表現になります。ただ、ブラウザによって挙動が少し違ったり、スマホでは効かないケースもあります。まずはPCで確認しながら、好みの見え方を探してみてください。
ページ背景とコンテンツ背景色の違い
SWELLでは、「ページ全体の背景」と「記事本文やカードの背景色」が別々に設定できるようになっています。
よくあるのが、暗い背景画像を敷いた結果、本文の文字が読みにくくなってしまうパターンです。そんなときは次のように調整してあげると、ぐっと見やすくなります。
- 本文側のコンテンツ背景色を白や薄い色にして、文字の後ろだけ明るくする
- 背景画像を少し暗めにして、文字色を白に統一する
サイト全体を触るときは、「背景画像」「文字色」「コンテンツ背景色」がセットで動くイメージを持っておくと、デザインがちぐはぐになりにくいです。
固定ページや投稿ごとのタイトル背景画像を設定する
次は、固定ページや投稿の「タイトル部分」だけに背景画像を入れる方法です。サービス紹介や会社情報など、特別感を出したいページでよく使う手法です。
タイトル背景画像を設定する基本の流れ
タイトルの背景画像は、カスタマイザーではなく各ページの編集画面から設定します。やること自体はシンプルです。
- 固定ページ一覧から、変更したいページを「編集」で開く
- 右側の設定パネルで「固定ページ」タブ（投稿なら「投稿」タブ）を選ぶ
- 下のほうにある「タイトルの背景画像」を探し、画像を選択する
ここで設定した画像は、そのページのタイトル周辺にだけ表示されます。サイト全体のページ背景とは別なので、「トップだけかっこよく」「ブログ記事はシンプルに」という分け方もしやすいです。
タイトル背景画像の高さをCSSで調整する
タイトル背景を使ってみると、「もう少し縦に広く見せたい」「逆に高さを低くしたい」ということがよくあります。そういうときは、ページ下部にある「CSS用コード」の欄に、タイトル部分の高さを調整するCSSを書き足す方法が便利です。
具体的には、タイトル背景を囲んでいる要素に対して、上下の余白（padding）や最低高さ（min-height）を指定してあげるイメージです。CSSに慣れていない場合は、数値を少しずつ変えながらプレビューを確認し、「このくらいならちょうどいい」と感じるところで止めるのがおすすめです。
どんな画像を使うと「それっぽく」見える？
タイトル背景画像は、写真選びだけでも印象が大きく変わります。雰囲気別に合いやすい例を挙げると、こんなイメージです。
- サービスサイト：ぼかしたオフィス写真、ブランドカラーのグラデーション、シンプルな幾何学模様
- 個人ブログ：自分で撮った風景、趣味に関係する写真、紙や布のテクスチャ
- 店舗サイト：店内の様子が分かる写真、商品をふんわり写した写真
どの場合でも共通して大事なのは、「タイトルの文字がちゃんと読めるかどうか」です。文字色が白なら、背景は少し暗めにしたり、コントラストがはっきりした画像を選んであげると、ぐっと読みやすくなります。
特定のページだけ背景画像を変える・消す設定（CSS）
ここから少し踏み込んだ話に入ります。サイト全体には背景画像を設定しつつ、「このページだけは別の背景にしたい」「ここだけ背景を消したい」といった、ピンポイントな調整をCSSで行う方法です。
ページIDを指定して背景画像を変える
SWELLでは、各ページごとに割り振られている「ページID」を使うと、そのページだけに効くCSSを簡単に書けます。やることはだいたい次のとおりです。
- ブラウザのURLバーなどから、そのページのID（post=◯◯の数字）を確認する
- 「外観」→「カスタマイズ」→「追加CSS」またはページ下部の「CSS用コード」を開く
#post-◯◯のようにページIDを指定して、backgroundプロパティを上書きする
たとえば、サービス紹介ページだけ別の写真を全面に敷きたい場合は、サイト全体にはシンプルなパターン背景を設定しておき、サービスページ用のCSSで背景を差し替える、といった使い方ができます。ページごとに世界観を変えたいときに便利です。
背景画像を一部ページだけ消したいとき
逆に、「サイト全体にページ背景画像を設定しているけれど、このページだけは無地にしたい」というケースもよくあります。その場合の考え方はシンプルで、
- カスタマイザーでサイト全体のページ背景画像を設定
- 一部ページではCSSで
background: none;などを指定して背景を打ち消す
という二段構えにします。実際に、SWELLの解説ブログなどでも、#body_wrap { background: none; } のような形で、特定ページだけ背景をオフにする方法がよく紹介されています。プロフィールページや問い合わせページを落ち着いた雰囲気にしたいときに役立ちます。
CSSが効かないときのチェックポイント
CSSを書いても背景が変わらないときは、どこかで小さなつまずきが起きていることが多いです。私も何度かハマったことがあるので、チェックポイントをまとめておきます。
- セレクタ（
#post-◯◯など）の書き方が合っているか - 別のCSSで、より強い指定（
!importantなど）がされていないか - キャッシュ系プラグインの影響で、古いCSSが表示され続けていないか
- ブラウザのシークレットモードや別端末で確認してみたか
うまくいかないときほど、「そもそも画像は設定できているか」「CSSは読み込まれているか」といった基本から確認していくと、案外あっさり解決することが多いです。
フルワイドやカバーなど、ブロック単位の背景画像設定
【稼げるキーワード教えます】
▼ ▼ ▼
次は、SWELLのフルワイドブロックやGutenberg標準のカバーブロックを使って、1セクション単位で背景画像を設定する方法です。トップページやLP風のページを作り込みたいときに活躍します。
フルワイドブロックで背景画像を設定する手順
SWELL専用の「フルワイド」ブロックは、横幅いっぱいにセクションを広げられる便利なブロックです。背景色だけでなく、背景画像も簡単に設定できます。
流れとしては、次のような感じです。
- ブロックエディターで「フルワイド」ブロックを挿入する
- 右側のブロック設定パネルから「背景画像」を選択する
- メディアライブラリから画像を選ぶ
- 必要に応じて「背景効果」や「背景色」を調整する
代表的な設定項目を、ざっくり表にまとめておきます。
| 項目名 | 内容のイメージ |
|---|---|
| 背景画像の設定 | メディアライブラリから画像を選択、またはURL指定 |
| 背景効果 | 固定背景やパララックス風の動きを付ける |
| 背景色 | 画像の上にうっすら乗せる色（オーバーレイ）として使える |
| 境界線（上下） | 波・斜め・円・ギザギザなど、セクション同士の区切りを装飾 |
境界線を少し変えるだけでも、一気に「ちゃんとデザインされたページ」の雰囲気が出ます。私もトップページでは、フルワイドブロックと境界線の組み合わせをよく使っています。
固定背景とパララックスの違いとスマホでの挙動
フルワイドブロックの「背景効果」でよく使われるのが、固定背景とパララックスです。違いをざっくり書くと、こんなイメージです。
- 固定背景：背景画像だけが止まって見え、手前のコンテンツだけがスクロールする
- パララックス：背景画像がゆっくり動いて、奥行き感が出る
どちらもかっこいい表現ですが、ひとつだけ注意したいのがスマホでの動きです。CSSの background-attachment: fixed; を使った固定背景は、PCでは問題なく動いても、スマホ（特にiPhoneのブラウザ）では効かないことがあります。
そのため、「PCとスマホでまったく同じ動きを再現する」のは難しい場合もあります。私のおすすめは、
- PCでは固定背景やパララックスを使ってリッチに見せる
- スマホでは普通のスクロールにして、見やすさを優先する
という形で割り切ってしまうことです。このほうが、実装で悩み続けるよりもずっと気楽に運用できます。
LPっぽいセクションを作る簡単レシピ
フルワイドブロックと背景画像を組み合わせると、いわゆる「LPっぽい」見せ方も簡単に作れます。ざっくりとしたレシピはこんな感じです。
- フルワイドブロックに、イメージに合った写真を背景として設定する
- ブロックの中に見出し・短い説明文・ボタン（CTA）を配置する
- 背景色に半透明の黒やブランドカラーをかけて、文字を読みやすくする
一番伝えたいメッセージを大きな文字で中央に置くだけでも、訪問者の印象は大きく変わります。私も、自分のブログのトップセクションをこの形にしただけで、「しっかり作り込んでいるサイト」という印象になったと感じました。
SWELL 背景画像設定のおすすめサイズとファイル形式
ここからは、SWELLで背景画像を設定するときに気になる「画像サイズ」と「ファイル形式」について、目安をまとめておきます。厳密な正解があるわけではありませんが、このあたりを押さえておくと失敗しにくいです。
部位ごとのおすすめサイズの目安
あくまで目安ですが、よく使う部位ごとのサイズ感は次のようなイメージです。
| 部位 | 目安サイズ（横×縦） | ポイント |
|---|---|---|
| ページ背景画像（パターン） | 300〜600px四方程度 | 小さな画像をタイル状にループさせる前提で使う |
| ページ背景画像（写真） | 1600×900px前後 | 1枚を大きく敷くときは横長の画像を用意する |
| タイトル背景画像 | 1600×600〜800px前後 | タイトル文字とのバランスを見ながら縦幅を調整 |
| フルワイドブロック背景 | 1600×900px前後 | PCの横幅で見たときにきれいに収まりやすい |
| コンテンツヘッダー（共通） | 1600×600px前後 | 上下が切れすぎないよう、少し余裕を持たせる |
実際には、横幅を1600〜2000px程度にそろえておき、縦幅はデザインに合わせてトリミングしていく形が扱いやすいです。背景として使う分には、多少トリミングされても違和感が出にくいので、厳密に「このサイズでないとダメ」ということはありません。
画像形式と容量のざっくりガイド
画像形式は、目的に合わせて次のように使い分けるのが基本です。
- 写真や背景用の画像：JPEG、もしくは対応していればWebP
- ロゴやアイコンなど、透過が必要なもの：PNG
容量については、背景に使う大きな画像1枚あたり、できれば数百KB以内に収めておくと安心です。特に、1ページに背景画像や写真を何枚も使う場合は、全体の合計サイズが大きくなりすぎないよう注意しておきたいところです。
画像圧縮のプラグインやオンラインサービスを使えば、品質をそこまで落とさずにサイズだけ小さくすることもできます。背景画像はページ表示のたびに読み込まれることが多いので、「見た目」と「軽さ」のバランスを意識してあげましょう。
デザインと表示速度のバランスを取るコツ
背景画像をあちこちに入れていくと、どうしてもページが重くなりがちです。私が実際にやってみて、バランスが取りやすかった工夫をいくつか紹介します。
- ページ背景画像は思い切って使わず、タイトル背景やフルワイドの一部だけに絞る
- スマホでは背景画像を減らし、単色の背景やシンプルなパターンに置き換える
- 細かい情報がたくさん写った写真は避け、少し暗めでシンプルな写真を選ぶ
SWELLはテーマ自体のデザインが整っているので、「背景を盛る」よりも、「見せたいところだけ背景を使う」くらいの気持ちで調整していくと、見た目と速度のバランスが取りやすいと感じています。
よくある質問（FAQ）
ここまでの内容を踏まえて、実際に背景設定でよく聞かれる質問と、その答えをまとめておきます。
Q1. SWELLで背景画像が表示されないとき、どこを確認すればいいですか？
Q1. SWELLで背景画像が表示されないとき、どこを確認すればいいですか？
まず、「どの背景が表示されていないのか」を切り分けるのが大事です。サイト全体のページ背景なのか、タイトル背景なのか、フルワイドブロックの背景なのかで、確認すべき場所が変わります。
SWELLの背景画像の設定まわりでトラブルが起きたときは、次のようにチェックしてみてください。
- 画像自体がメディアライブラリに存在しているか
- カスタマイザーや固定ページの編集画面で、正しい項目に画像が設定されているか
- キャッシュプラグインやブラウザキャッシュを削除して、最新の状態を見ているか
- 追加CSSで背景を上書きしてしまっていないか（
background: none;など）
このあたりを順番に追いかけていくと、多くの場合は原因が見つかります。どうしても分からないときは、一度背景設定をすべてオフにしてから、1つずつオンにして動作を確認するのもおすすめです。
Q2. スマホで背景画像が固定されません。SWELLの設定ミスでしょうか？
Q2. スマホで背景画像が固定されません。SWELLの設定ミスでしょうか？
これについては、SWELLの設定ミスではなくブラウザ側の仕様が関わっていることが多いです。特に、フルワイドブロックなどで使われる固定背景（background-attachment: fixed; を使うもの）は、PCでは効いてもスマホでは無効になるケースがあります。
そのため、SWELLで背景画像を固定しているつもりでも、スマホでは普通のスクロールに見える、ということは珍しくありません。現実的には、
- PCでは固定背景やパララックス効果で演出する
- スマホでは無理に固定しようとせず、見やすさを優先する
という運用にしてしまうのが、いちばんストレスが少ないと思います。どうしてもスマホでも印象的に見せたい場合は、固定ではなく、シンプルに背景画像とオーバーレイ色で雰囲気を作るほうが扱いやすいです。
Q3. SWELLでタイトル背景だけ変えて、ページ背景はシンプルなままにできますか？
Q3. SWELLでタイトル背景だけ変えて、ページ背景はシンプルなままにできますか？
はい、問題なくできます。むしろ、「ページ背景は無地、タイトル背景だけ画像を使う」という構成は、とても扱いやすいパターンです。
具体的には、
- サイト全体のページ背景は単色（白や薄いグレーなど）にしておく
- 見せたいページだけ、編集画面の「タイトルの背景画像」に写真を設定する
という形にすると、ブログ記事は読みやすく、サービス紹介ページやトップページはしっかり印象に残る、メリハリのあるデザインになります。背景画像の設定をあれこれ変える前に、このパターンをひとつの基準として試してみるのもおすすめです。
まとめ：今日からできるSWELLの背景画像カスタマイズ
この記事の内容を振り返っておきます
- SWELLでは、サイト全体・タイトル・コンテンツヘッダー・ブロック単位など、いくつかの場所で背景画像を設定できる
- ページ背景画像はカスタマイザーから設定し、文字色やコンテンツ背景色とセットで調整するとデザインが整いやすい
- タイトル背景画像はページごとに設定でき、CSS用コード欄を使えば高さの微調整も可能
- 特定のページだけ背景を変えたい・消したいときは、ページIDや
#body_wrapに対するCSSでコントロールできる - フルワイドやカバーブロックを使えば、LP風のセクションも簡単に作れるが、画像サイズと表示速度のバランスには注意が必要
今日からの最初の一歩としては、テスト用の固定ページを1つ作り、
- ページ背景画像を変えてみる
- タイトル背景画像を設定してみる
- フルワイドブロックに背景画像を敷いてみる
といった感じで、実際に触りながら感覚をつかんでみるのがおすすめです。いきなり本番ページを大きく変えると不安になるので、まずは遊び感覚で試してみて、「この組み合わせが一番しっくりくる」というパターンを見つけてから本番に反映していきましょう。
SWELLの背景画像の設定に慣れてくると、「ここは写真」「ここは単色」といった設計を考える時間がどんどん楽しくなってきます。少しずつ手を動かして、自分らしいデザインに育てていきましょう。
記事を読んだらコチラ
▼ ▼ ▼
