「WordPressのサイトをもっとおしゃれにしたいけど、背景画像の設定方法がわからない」と悩んでいませんか？
背景画像はサイトの第一印象を大きく左右する、見た目のカギを握る要素です。
この記事では、テーマカスタマイザーを使ったかんたんな基本設定から、特定ページだけ背景を変える応用テクニック、よくある失敗の対処法まで初心者でも迷わず実践できるよう順を追って解説します。
読み終えたあとは、あなたのサイトに合った背景画像をすぐに設定できるようになりますよ。
WordPressの背景画像とは？基本をおさえよう
背景画像が設定できる3つの場所
WordPressで「背景画像」と言うとき、実は設定できる場所は大きく3種類あります。
それぞれ設定方法が異なるので、まず全体像を把握しておきましょう。
| 設定場所 | 適用範囲 | 設定方法 |
|---|---|---|
| サイト全体 | 全ページ共通の背景 | テーマカスタマイザー |
| 固定ページ・投稿 | 特定のページのみ | プラグインまたはCSS |
| セクション・ブロック | ページ内の特定エリア | ブロックエディタ or テーマ機能 |
自分がどの場所に設定したいのかを先に決めておくと、作業がスムーズに進みますよ。
背景画像がサイトに与える印象
背景画像はサイト全体のブランドイメージを左右する重要なデザイン要素です。
たとえば飲食店のサイトなら温かみのある料理写真、ビジネス系ブログなら落ち着いたテクスチャ素材がよく合います。
反対に、背景が派手すぎると本文が読みにくくなり、離脱率が上がるというリスクもあります。
「おしゃれにしたい」という気持ちだけで突き進まず、読者が読みやすいかどうかを最優先に考えましょう。
設定前に準備しておくこと
背景画像を設定する前に、以下の3点を確認しておきましょう。
- 画像サイズの確認：横幅1920px以上を推奨。
小さすぎると引き伸ばされて粗くなります。 - ファイル容量の最適化：大きすぎるとサイト表示が遅くなるため、1MB以下を目安に圧縮してください。
- 著作権の確認：無料素材サイト（Unsplash・Pixabayなど）で商用利用可のものを選びましょう。
この3点をクリアしておけば、設定後のトラブルをほぼ防ぐことができます。
スポンサードリンクテーマカスタマイザーで背景画像を設定する手順
管理画面からの基本的な設定方法
結論から言うと、サイト全体の背景画像はWordPressの「テーマカスタマイザー」から数クリックで設定できます。
具体的な手順は以下のとおりです。
- WordPressの管理画面（ダッシュボード）にログインする
- 左メニューの「外観」→「カスタマイズ」をクリックする
- カスタマイザーが開いたら「背景画像」をクリックする
- 「画像を選択」ボタンからメディアライブラリの画像を選ぶか、新しい画像をアップロードする
- プレビューで表示を確認して「公開」ボタンをクリックして完了
なお、テーマによっては「背景画像」という項目がカスタマイザーに表示されない場合もあります。
その場合はテーマ独自の設定画面を確認するか、後述のCSSを使った方法を試してみてください。
背景画像の表示設定（繰り返し・固定・サイズ）を整える
画像を選択するだけでなく、表示オプションの設定も非常に重要です。
カスタマイザーの背景画像設定には、以下のような詳細オプションがあります。
| オプション名 | 説明 | おすすめ設定 |
|---|---|---|
| プリセット | 塗りつぶし・合わせる・繰り返しなどの表示モード | 塗りつぶし（Cover） |
| サイズ | 画像の表示サイズ指定 | カバー（画面全体に広げる） |
| 位置 | 画像の配置基準点 | 中央 |
| 繰り返し | 画像をタイル状に並べるか | 繰り返しなし（テクスチャ以外） |
| スクロール | スクロールと一緒に動くか固定するか | スクロール（パフォーマンス重視） |
写真素材を全画面背景に使うなら「塗りつぶし（Cover）＋繰り返しなし」が最もきれいに見えます。
テクスチャ素材を使う場合は「繰り返しあり」で全面に敷き詰めると統一感が出ますよ。
テーマによって設定画面が異なる場合の対処法
WordPressのテーマは無数にあり、テーマによってカスタマイザーの項目名や場所が変わることがあります。
もし「背景画像」の項目が見当たらない場合は、以下を試してみましょう。
- 「外観」→「テーマ」から使用中テーマの「詳細を見る」をクリックし、「カスタム背景」機能に対応しているか確認する
- テーマ独自のオプション画面（テーマオプション）を確認する。
テーマによってはそちらに背景設定項目がある場合があります - どちらにもない場合は、次のセクションで紹介するCSSによる設定方法を使う
CSSで背景画像を自由自在に設定する方法
カスタマイザーの「追加CSS」を使う
テーマカスタマイザーで対応できない細かい調整は、CSSを直接記述することで解決できます。
プラグインなしでCSSを書く最もかんたんな場所は「外観」→「カスタマイズ」→「追加CSS」です。
たとえばサイト全体のbody要素に背景画像を設定するには、以下のようなイメージで記述します。
body {
background-image: url('画像のURL');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}「画像のURL」の部分には、メディアライブラリにアップロードした画像のURLをそのまま貼り付けます。
画像URLはメディアライブラリで画像を選択し、右側に表示される「ファイルのURL」をコピーして取得してください。
特定のクラスやIDに背景画像を指定する方法
CSSを使えば、ヘッダーやフッターなど特定のエリアだけに背景画像を設定することもできます。
たとえばヘッダー部分だけに背景画像を当てたい場合、ブラウザの検証ツール（デベロッパーツール）でそのクラス名やIDを確認し、CSSに指定するだけです。
対象要素をブラウザ上で右クリック→「検証」を押すとクラス名が確認できます。
初心者の方はまずこの操作を一度練習しておくと、今後のカスタマイズがぐっとラクになりますよ。
CSSを使う際の注意点
追加CSSで記述したコードは、テーマを更新・変更しても消えないため安全です。
ただし子テーマを使っている場合と親テーマのみの場合で、CSS適用の優先順位が変わることがあります。
思ったとおりに表示されない場合は「!important」をプロパティに付けるか、より具体的なセレクターに書き直してみてください。
特定のページだけ背景画像を変える方法
プラグインを使って個別ページに設定する
「トップページだけ背景を変えたい」「特定のランディングページに背景画像を使いたい」という場合は、プラグインを活用するのが最もかんたんです。
「Page-specific CSS」「Individual Page CSS」などのプラグインを導入すると、ページの編集画面から個別にCSSを記述できるようになります。
プラグインのインストールは「プラグイン」→「新規追加」から検索して行えます。
コードに不慣れな初心者の方でも、プラグインを使えば比較的かんたんに個別設定できますよ。
ブロックエディタ（Gutenberg）のカバーブロックを使う
WordPressのブロックエディタでは、「カバーブロック」を使うことでページ内の特定セクションに背景画像を設定できます。
プラグイン不要で操作もとてもかんたんです。
- ページ・投稿の編集画面を開く
- 「＋」ボタンからブロックを追加→「カバー」を選択する
- 背景に使いたい画像をアップロードするかライブラリから選択する
- カバーブロック内にテキストや他のブロックを追加して完成
カバーブロックにはオーバーレイ（半透明の色のせ）機能もあるため、文字が読みにくくなる問題も合わせて解決できるのが大きなメリットです。
2026年現在のWordPressではブロックエディタが標準搭載されていますので、追加インストール不要でこの機能を利用できます（公式サイトで最新版をご確認ください）。
bodyクラスを使ってCSSでページごとに切り替える方法
WordPressはページごとに自動でbody要素に固有のクラスを付与します。
たとえばページIDが5のページには「page-id-5」というクラスが自動で付きます。
これを利用して追加CSSに以下のように記述すれば、特定ページだけ背景を切り替えられます。
.page-id-5 {
background-image: url('画像のURL');
background-size: cover;
}ページIDは投稿・固定ページの編集画面のURLに含まれている数字で確認できます（例：URLに「post=5」と表示されていればIDは5）。
プラグインなしで実現できるのでぜひ覚えておきましょう。
背景画像設定でよくある失敗と対処法
画像がうまく表示されない・崩れる
背景画像が表示されないときの原因として最も多いのは、画像URLのコピーミスやスペルの間違いです。
まず画像URLを再確認しましょう。
メディアライブラリで画像を選択し、右側の「ファイルのURL」を直接コピーするのが確実です。
また、プレビューでは表示されているのに公開後に表示されない場合は、キャッシュをクリアすることで解決することがあります。
利用しているキャッシュプラグインの「キャッシュを削除」ボタンを押すか、ブラウザのキャッシュをクリアして再確認してみてください。
背景画像のせいで文字が読みにくくなる
カラフルな背景画像を使うと本文テキストが読みにくくなる場合があります。
解決策は3つです。
- コンテンツエリア（記事本文の背景）を白や薄いグレーにして、背景画像と視覚的に分離する
- ブロックエディタのカバーブロックのオーバーレイ機能で暗さを調整する
- テキストカラーや文字シャドウをCSSで調整して読みやすくする
「背景はシンプルに、コンテンツは読みやすく」が鉄則です。
おしゃれさより読みやすさを常に優先するようにしましょう。
スマホで背景画像が崩れる場合の対処法
PCでは綺麗に見えてもスマホで崩れるケースはよくあります。
原因の多くは視差スクロール（parallax）を実現するための「background-attachment: fixed」という設定が、スマホのブラウザでは正しく動作しないことです。
スマホでの崩れを防ぐには、CSSのメディアクエリを使ってスマホだけ「background-attachment: scroll」に切り替える方法が有効です。
カスタマイズに慣れていない方は最初から「scroll」に統一しておくのが無難です。
まとめ
この記事では「WordPressの背景画像」の設定方法について、基本から応用まで解説しました。
要点を振り返りましょう。
- 背景画像の設定場所は3種類：サイト全体・特定ページ・特定ブロック
- 基本設定は「外観」→「カスタマイズ」→「背景画像」からかんたんに設定できる
- テーマによってカスタマイザーに項目がない場合は追加CSSで対応できる
- 特定ページだけ変えたいときはプラグインかbodyクラスのCSS指定が有効
- ブロックエディタのカバーブロックを使えばページ内セクションへの背景設定もかんたん
- 背景画像は横幅1920px以上・1MB以下に最適化して表示速度を守ること
- 「読みやすさ」を最優先に。背景のせいで本文が読みにくくなるのはNG
背景画像を上手に活用すると、サイトの印象が一気にプロらしくなります。
まずはテーマカスタマイザーからかんたんに試してみて、慣れてきたらCSSやプラグインにも挑戦してみてください。
あなたのサイトがより魅力的になることを応援しています！