WordPressの背景画像を設定する完全ガイド

ワードプレスで背景画像を設定したいけれど、どこから操作すればいいかわからない…と悩んでいませんか？
実は、WordPressの背景画像設定は正しい手順を知れば初心者でも十分に対応できます。
この記事では、管理画面のカスタマイザーを使った基本設定から、テーマ別の注意点、スマホ表示を崩さないコツ、CSSでの細かいカスタマイズ方法まで、すぐ実践できる形でまとめました。
2026年現在も多くのWordPressユーザーが悩むポイントですが、この記事を読めばスッキリ解決できるはずです。

WordPressの背景画像設定はカスタマイザーから行う

WordPressで背景画像を設定する基本の操作は、管理画面の「外観」→「カスタマイズ」から行います。
まずは手順を確認してみましょう。

カスタマイザーを開く手順

1. WordPress管理画面にログインする
2. 左メニューの「外観」→「カスタマイズ」をクリック
3. カスタマイザーが開いたら「背景画像」をクリック
4. 「画像を選択」ボタンからメディアライブラリで画像をアップロード
5. 「公開」ボタンをクリックして保存

この手順でテーマが「背景画像」機能をサポートしていれば、すぐにサイトの背景に画像が反映されます。
カスタマイザーの画面ではリアルタイムでプレビューが確認できるので、実際の見た目を確認しながら調整できるのが便利なポイントです。

背景画像に適したサイズと形式

背景画像を設定する前に、ファイルの形式とサイズを確認しておきましょう。

ファイルサイズが大きすぎると表示速度が遅くなるため、画像は事前に圧縮ツールでサイズを落としてからアップロードするのがおすすめです。

背景画像の繰り返し・位置・サイズの設定

カスタマイザーの背景画像設定には、画像の表示方法を細かく選べるオプションがあります。
主な設定項目は「位置（中央・左・右など）」「繰り返し（タイル状にするかどうか）」「サイズ（画面全体に伸ばす／元サイズのまま）」の3つです。
全画面に背景画像を表示したい場合は「サイズ: カバー」「繰り返し: なし」の組み合わせが一般的で、どんな画面サイズでも隙間なく表示されます。
設定後は必ずスマホ・PCの両方でプレビューを確認してから公開しましょう。

テーマによって背景画像の設定場所が異なる理由

WordPressの背景画像設定は、使用しているテーマによって対応状況が大きく異なります。
テーマが「custom-background」機能をサポートしているかどうかで、カスタマイザーに「背景画像」メニューが表示されるかが決まる仕組みです。

テーマが背景画像に対応しているか確認する方法

カスタマイザーを開いたときに「背景画像」の項目が表示されていれば、そのテーマは背景画像機能に対応しています。
表示されていない場合は、以下の方法で確認・対処してみてください。

1. テーマの公式ドキュメントやサポートページで「背景画像」対応を確認する
2. テーマのfunctions.phpにadd_theme_support('custom-background')が記述されているか確認する
3. どうしても対応していない場合は背景画像に対応したテーマへの切り替えを検討する

背景画像を多用したデザインにしたい場合は、テーマ選びの段階で対応確認をするのがベストです。
後から「このテーマは背景画像に対応していなかった」と気づくと、デザイン変更の手戻りが大きくなってしまいます。

フルサイトエディター（FSE）対応テーマの場合

2026年現在、WordPressではフルサイトエディター（FSE: Full Site Editing）対応テーマが増えています。
FSEテーマでは、背景画像の設定が「外観」→「エディター」から行うブロックエディター上での操作になります。
従来のカスタマイザー経由とは操作が異なるため、使用テーマがFSE対応かどうかを確認してから操作しましょう。
FSEテーマでは「スタイル」パネルや「テンプレート」編集画面から背景を設定するケースが多いです。

テーマ独自の設定パネルがある場合

有料テーマや多機能テーマの中には、テーマ独自の設定パネル（「テーマオプション」「テーマ設定」など）から背景画像を設定するものもあります。
この場合、カスタマイザーではなく独自のパネルから操作するため、テーマのマニュアルを確認するのが一番の近道です。
サポートフォーラムやFAQに「背景画像」の設定方法が掲載されていることも多いので、まずは公式ドキュメントを探してみてください。

スマホでも崩れない背景画像の設定ポイント

背景画像を設定したはいいものの、スマホで見たら表示が崩れてしまった…という経験はありませんか？
PCとスマホで画面サイズが大きく異なるため、レスポンシブ対応を意識した設定が必要になります。

background-sizeとbackground-positionの基本

CSSで背景画像を設定している場合、以下の2つのプロパティが特に重要です。

• background-size: cover; → 画面全体を覆うようにリサイズ（端が切り抜かれることがある）
• background-size: contain; → 画像全体が収まるようにリサイズ（余白が生まれることがある）
• background-position: center center; → 中心に配置することでどの画面サイズでも主題がずれにくい

背景画像の重要な被写体は中央付近に配置するデザインを心がけると、スマホ表示でも見切れにくくなります。
まずはこの基本の組み合わせから試してみてください。

スマホ向けに別の背景画像を用意する方法

PCとスマホで全く異なる背景画像を表示したい場合は、CSSのメディアクエリを活用します。
横長のPC向け画像と縦長・正方形のスマホ向け画像を別々に用意しておくと、どちらの画面でもきれいに表示されます。
メディアクエリの分岐点（ブレークポイント）は768pxを基準にすることが多く、「768px以下はスマホ用画像に切り替える」という設定が一般的です。
WordPressの追加CSS機能を使えば、テーマファイルを直接触らずに設定できます。

背景画像が重くてサイト速度が落ちるときの対策

背景画像は視覚的なインパクトが大きい一方、ファイルサイズが大きいとサイトの表示速度に影響します。
PageSpeed InsightsなどでCore Web Vitalsをチェックし、スコアが低い場合は画像圧縮を検討しましょう。
WebP形式への変換はJPGやPNGに比べてファイルサイズを大幅に削減できるため、積極的に活用してください。

CSSで背景画像を細かくカスタマイズする方法

カスタマイザーの設定だけでは物足りない場合は、CSSを使ってより細かい制御ができます。
WordPressの「追加CSS」機能を使えば、テーマファイルを直接編集しなくても適用可能なので初心者にもおすすめです。

追加CSSから背景画像を設定する手順

1. 「外観」→「カスタマイズ」を開く
2. 左メニュー最下部「追加CSS」をクリック
3. CSSコードを入力して「公開」をクリック

基本的なCSSの例は以下のとおりです。

body {
background-image: url('画像のURL');
background-size: cover;
background-position: center;
background-attachment: fixed;
}

background-attachment: fixed;を指定すると、スクロールしても背景画像が固定されたまま動かないパララックス効果が得られます。
視覚的にインパクトのあるサイトにしたいときに活用してみてください。

特定のページだけ背景画像を変える方法

トップページだけ特別な背景画像にしたい、という場合はWordPressが自動的に付与するbodyクラスを活用します。
WordPressはページの種類に応じて.home、.page-id-XX、.singleなどのクラスをbodyタグに自動付与します。
これを使えばページごとに異なる背景画像を細かく設定することが可能です。
たとえば.home { background-image: url('トップ用画像URL'); }のように書くだけで、トップページだけ背景画像を変えられます。

背景画像に半透明オーバーレイを重ねてテキストを読みやすくする

背景画像の上にテキストを載せると読みにくくなることがあります。
そんなときは、背景画像の上に半透明の色を重ねる「オーバーレイ」テクニックが効果的です。
擬似要素::beforeを使い、background: rgba(0,0,0,0.4);のように指定することで、テキストの視認性を高めながら背景画像も見せることができます。
オーバーレイの濃度（アルファ値）は0.3〜0.5程度が自然に見えることが多いので、プレビューを確認しながら調整してみてください。

背景画像がうまく表示されないときの対処法

設定したのに背景画像が表示されない、崩れてしまうというトラブルはよくあります。
原因と対処法を確認して、一つずつ解決していきましょう。

よくある症状と対処法

キャッシュ系プラグインとの干渉に注意

WordPressにキャッシュ系プラグインを導入している場合、設定変更がすぐに反映されないことがあります。
背景画像を変更したらキャッシュのクリアを忘れずに行うことが大切です。
プラグインの管理画面からキャッシュをクリアするか、プラグイン設定で自動クリアを有効にしておきましょう。
ブラウザ側のキャッシュが原因の場合はCtrl+F5（Macの場合はCmd+Shift+R）で強制更新すると解決することが多いです。

画像URLが正しいか確認する

CSSで直接URLを指定している場合、画像のURLが正しいかどうかも要確認です。
メディアライブラリにアップロードした画像のURLは、メディア詳細画面の「ファイルのURL」から確認できます。
URLに全角文字やスペースが含まれていると表示されないので注意してください。
また、HTTPSとHTTPが混在している場合も表示されないことがあるため、URLの先頭がhttps://になっているか合わせて確認しましょう。

まとめ

この記事では、WordPressの背景画像設定について、基本手順からCSSカスタマイズまで幅広く解説しました。
最後に要点を振り返りましょう。

• 基本の背景画像設定は「外観」→「カスタマイズ」→「背景画像」から行う
• テーマが背景画像機能に対応しているかどうかで操作方法が変わる
• FSEテーマではブロックエディター上での設定になる場合がある
• スマホ表示を崩さないにはbackground-size: coverと中央配置が基本
• 追加CSSを使えばテーマファイルを触らずに細かい設定が可能
• 表示されないときはキャッシュクリアや画像URLの確認を試してみよう
• 文字を載せる場合はオーバーレイで視認性を確保するのがポイント

背景画像はサイトの第一印象を大きく左右する重要な要素です。
この記事を参考に、あなたのWordPressサイトをワンランク上の見た目にカスタマイズしてみてください。