ワードプレスで背景画像を設定したいけど、どこから操作すればいいかわからない…そんな悩みを持っていませんか？
背景画像はサイトの第一印象を大きく左右する重要な要素です。
この記事では、ワードプレスの背景画像を設定する方法を、管理画面の操作手順からCSSを使った応用テクニックまでわかりやすく解説します。
初心者の方でも迷わず設定できるよう、ステップごとに丁寧に説明しますので、ぜひ最後まで読んでみてください。
ワードプレスの背景画像とは？基本を押さえよう
背景画像がサイトの印象を左右する理由
サイトを開いた瞬間に目に飛び込んでくる背景画像は、訪問者の第一印象を決定づける重要な要素です。
背景画像が適切に設定されているサイトは、プロフェッショナルな印象を与え、読者の滞在時間を延ばす効果があります。
逆に、背景画像が乱れていたり、文字と被って読みにくかったりすると、すぐにページを離れられてしまいます。
背景画像の選び方ひとつで、サイトのクオリティは大きく変わります。
たとえば、飲食店のブログなら食材の写真を薄く配置したり、シンプルなパターン模様を使ったりすることで、サイト全体に統一感が生まれます。
2026年現在、スマートフォンからのアクセスが多数を占めるため、モバイルでの見え方も意識した背景画像の設定が求められます。
WordPressで背景画像を設定できる3つの場所
WordPressでは、背景画像を設定できる場所が大きく3つあります。
| 設定場所 | 特徴 | 難易度 |
|---|---|---|
| テーマカスタマイザー | 管理画面から簡単に設定できる。サイト全体の背景に適用される | 初級 |
| 追加CSS | 特定のセクションや要素に背景画像を設定できる。柔軟性が高い | 中級 |
| ページビルダー | ElementorなどのプラグインからGUI操作で直感的に設定できる | 初〜中級 |
初心者の方はまずテーマカスタマイザーから試してみてください。
慣れてきたら、CSSを使って細かいカスタマイズにも挑戦してみましょう。
テーマカスタマイザーで背景画像を設定する手順
カスタマイザーを開く方法
テーマカスタマイザーは、WordPress管理画面から簡単に開けます。
手順は以下のとおりです。
- WordPressの管理画面にログインする
- 左側メニューの「外観」をクリックする
- 「カスタマイズ」を選択する
- カスタマイザーの画面が開く
カスタマイザーを開くと、右側にサイトのプレビューが表示され、左側に各種設定メニューが並んでいます。
リアルタイムでプレビューを確認しながら設定できるので、初心者でも安心して操作できます。
なお、使用しているテーマによってメニューの名称や項目が若干異なる場合があります。
背景画像のアップロードと表示設定の手順
カスタマイザーを開いたら、背景画像の設定に進みましょう。
- 左側メニューから「背景画像」または「サイト全体の設定」を探してクリックする
- 「画像を選択」ボタンをクリックする
- メディアライブラリからすでにアップロード済みの画像を選ぶ、または新しく画像をアップロードする
- 「画像を選択」ボタンをクリックして確定する
- 「公開」ボタンをクリックして保存する
画像のアップロードはJPGまたはPNG形式が推奨です。
ファイルサイズは後ほど詳しく説明しますが、できるだけ200KB以下に圧縮しておくと表示速度が落ちにくくなります。
繰り返し・サイズ・位置の調整方法
背景画像をアップロードしたら、表示オプションを調整して仕上げましょう。
主な設定項目は以下のとおりです。
| 設定項目 | 内容 | おすすめの設定 |
|---|---|---|
| 繰り返し | 小さい画像を並べて表示する | 大きな画像の場合は「繰り返しなし」 |
| サイズ | 画像の表示サイズを調整する | 「カバー」で画面全体をカバー |
| 位置 | 画像の表示位置を決める | 「中央」が無難でおすすめ |
| 固定 | スクロールしても背景が固定される | おしゃれな演出に使える |
「サイズ：カバー」「繰り返し：繰り返しなし」「位置：中央」の組み合わせが、最もきれいに表示できる定番設定です。
設定したらプレビューで確認し、問題なければ「公開」を押して保存してください。
CSSを使った背景画像のカスタマイズ方法
追加CSSから背景画像を設定する手順
テーマカスタマイザーの「背景画像」では、サイト全体の背景しか変更できません。
特定のセクションや記事エリアだけに背景画像を設定したい場合は、CSSを使った方法が便利です。
追加CSSは以下の手順で開けます。
- カスタマイザーを開く
- 左側メニュー最下部の「追加CSS」をクリックする
- CSSコードを入力する欄が表示される
- コードを入力して「公開」を押す
CSSを初めて使う方は「難しそう…」と感じるかもしれませんが、コピペするだけで使えるので安心してください。
WordPressのカスタマイズにはCSSの基本知識があるととても便利なので、少しずつ覚えていきましょう。
コピペで使えるCSSコードのサンプル集
よく使う背景画像のCSSコードをご紹介します。
以下のコードは追加CSSにそのまま貼り付けて使えます。
【サイト全体に背景画像を設定する基本コード】
body {
background-image: url(‘画像のURL’);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
【特定のエリアだけに背景画像を設定するコード】
.site-content {
background-image: url(‘画像のURL’);
background-size: cover;
}
「画像のURL」の部分は、メディアライブラリにアップロードした画像のURLをコピーして貼り付けてください。
画像URLはメディアライブラリで画像をクリックすると右側に表示されます。
使用するテーマによってクラス名が異なるため、Chromeの開発者ツールで対象要素のクラス名を確認してから設定しましょう。
背景画像設定で失敗しないための注意点
画像の容量とサイトスピードへの影響
背景画像の設定で最も多い失敗が、ファイルサイズが大きすぎてページの表示が遅くなることです。
大きな画像ファイルをそのままアップロードすると、ページの読み込みに時間がかかり、訪問者が離脱する原因になります。
背景画像に使う画像は、アップロード前に必ず圧縮しましょう。
目安として、ファイルサイズは200KB以下になるよう調整するのがおすすめです。
画像圧縮には無料のオンラインツールが多数あるほか、WordPressのプラグインを使えば自動で圧縮してくれるため、管理がとても楽になります。
サイトスピードはSEOにも直結する要素なので、背景画像の最適化は必ず行うようにしてください。
スマホ表示での崩れを防ぐ方法
パソコンでは綺麗に表示されていても、スマートフォンで確認すると背景画像が崩れていることがあります。
これはスクリーンサイズの違いによるものです。
スマホでの崩れを防ぐには、以下の点を意識しましょう。
- 横幅1920px以上の大きな画像を使う（縮小しても画質が落ちにくい）
- CSSで
background-size: coverを指定する - 設定後は必ずスマホでの表示を実機またはプレビューで確認する
- Chromeの開発者ツールでモバイルプレビューを活用する
カスタマイザーのプレビューにはモバイル表示の切り替えボタンが用意されています。
設定後はパソコン・タブレット・スマホの3つのサイズで必ず確認する習慣をつけましょう。
テキストとの可読性を確保するコツ
背景画像の上にテキストが重なる場合、文字が読みにくくなることがあります。
可読性を確保するためのコツを3つご紹介します。
- 明るい背景には暗い文字、暗い背景には明るい文字を使う
- 背景画像の上に半透明の色レイヤー（オーバーレイ）を重ねて文字を読みやすくする
- テキストエリアには背景画像を使わず、コンテンツ部分に白背景を設定してメリハリをつける
読みやすさを最優先に考えるなら、そもそも背景画像とテキストが重ならないレイアウトにするのが一番シンプルな解決策です。
背景画像はあくまでデザインの脇役なので、コンテンツの邪魔にならないことを最優先に考えましょう。
背景画像に使えるおすすめ無料素材サイト
定番フリー素材サイトの特徴と使い方
背景画像に使える高品質な無料素材は、インターネット上にたくさんあります。
その中でも特に背景用途に使いやすいサイトをご紹介します。
| サイト名 | 特徴 | 利用規約の目安 |
|---|---|---|
| Unsplash | 高品質な写真が豊富。英語サイトだが使いやすい | 商用利用可・クレジット不要 |
| Pixabay | 写真・イラスト・ベクター素材が充実。日本語検索に対応 | 商用利用可・クレジット不要 |
| 写真AC | 国内最大級。日本の風景や人物素材が充実 | 無料会員登録が必要 |
利用する際は、必ず各サイトの最新の利用規約を確認してから使いましょう。
商用利用可のサイトであっても、用途によって条件が異なる場合があります。
背景画像を選ぶ際の3つのポイント
素材サイトで背景画像を選ぶときは、以下の3つのポイントを意識してください。
- サイトのテーマやジャンルと合っているか確認する：料理ブログに宇宙の写真は違和感を生みます。サイトの世界観に合った画像を選びましょう。
- テキストを邪魔しない色使いか確認する：複雑なパターンや鮮やかすぎる色は、文章を読みにくくします。なるべくシンプルな画像を選ぶのがコツです。
- 十分な解像度があるか確認する：低解像度の画像は大画面モニターでぼやけて表示されます。横幅1920px以上の画像を選ぶことを推奨します。
背景画像はコンテンツを引き立てる脇役です。派手にしすぎず、サイトの世界観に溶け込むような画像選びを心がけましょう。
最初は単色に近いシンプルなテクスチャや、明るめの風景写真から試してみると失敗が少なくなります。
まとめ
この記事では、ワードプレスの背景画像を設定する方法について詳しく解説しました。
最後にポイントをまとめておきます。
- 背景画像はサイトの第一印象を決める重要な要素。設定場所はテーマカスタマイザー・追加CSS・ページビルダーの3つ
- 初心者はテーマカスタマイザーの「背景画像」から設定するのが最も簡単でおすすめ
- 表示オプションは「サイズ：カバー」「繰り返しなし」「位置：中央」が定番の組み合わせ
- CSSの追加CSSを使えば、特定のセクションだけに背景画像を設定できる
- 背景画像はファイルサイズを200KB以下に圧縮してからアップロードしてサイトスピードを守る
- 設定後はスマホ表示を必ず確認し、崩れがないかチェックする
- 背景画像の素材はUnsplash・Pixabayなどの無料素材サイトを活用し、利用規約を必ず確認する
背景画像をうまく活用すれば、あなたのWordPressサイトがぐっとプロフェッショナルな印象になります。
まずはテーマカスタマイザーから気軽に試してみてください！