「WordPressの背景画像や背景色を変えたいけど、どこから設定すればいいの？」そんな悩みを抱えていませんか？
実は、WordPressの背景変更は初心者でもたった1分で完了できる作業です。
2026年現在、WordPressはブロックエディター（サイトエディター）が標準となり、背景のカスタマイズ方法も進化しています。
この記事では、クラシックテーマとブロックテーマの両方に対応した背景画像・背景色の設定方法を、ステップバイステップで解説します。
さらに、AIツールを使ったおしゃれな背景画像の作り方や、表示速度を落とさない最適化テクニックもお伝えしますので、ぜひ最後まで読んでみてください。
\n\n
WordPressの背景を変更する2つの方法【2026年版】
\n\n
クラシックテーマの場合：カスタマイザーから変更
\n
Cocoon・SWELL・JIN:Rなど、従来型のクラシックテーマを使っている場合は、「カスタマイザー」から背景を変更します。
カスタマイザーとは、WordPressに標準搭載されているデザイン編集機能のことです。
\n
手順はとてもシンプルです。
\n
- \n
- WordPress管理画面の左メニューから「外観」→「カスタマイズ」をクリックする
- 左パネルに表示されるメニューから「背景画像」または「色」を選択する
- 背景画像をアップロードするか、背景色のカラーコードを指定する
- 右側のプレビューで確認し、「公開」ボタンを押して保存する
\n
\n
\n
\n
\n
たったこれだけで背景の変更は完了です。
作業時間は本当に1分もかかりません。
\n\n
ブロックテーマの場合：サイトエディターから変更
\n
Twenty Twenty-FiveなどのWordPress公式ブロックテーマを使っている場合は、サイトエディター（フルサイト編集）を使います。
2026年現在、WordPressはブロックテーマを推奨しており、今後はこちらが主流になります。
\n
- \n
- 管理画面から「外観」→「エディター」をクリックする
- 左メニューの「スタイル」アイコン（半月マーク）をクリックする
- 「色」→「背景」からカラーパレットを選ぶか、カスタムカラーを入力する
- 背景画像を設定したい場合は、対象のブロック（グループブロックやカバーブロック）を選択し、ブロック設定から画像を追加する
\n
\n
\n
\n
\n
ブロックテーマでは、セクションごとに異なる背景を設定できるのが大きなメリットです。
ページ全体を一色にするだけでなく、ヘッダー・メインコンテンツ・フッターで別々の背景を使い分けることも可能です。
\n\n
どちらの方法を使えばいいか迷ったら
\n
自分のテーマがどちらのタイプかわからない場合は、管理画面の「外観」メニューを確認してみてください。
\n
| メニュー表示 | テーマタイプ | 背景変更方法 |
|---|---|---|
| 「カスタマイズ」がある | クラシックテーマ | カスタマイザーを使用 |
| 「エディター」がある | ブロックテーマ | サイトエディターを使用 |
\n
どちらの場合も、操作は直感的なので安心してください。
\n\nスポンサードリンク
背景画像を設定する具体的な手順
\n\n
背景画像のアップロードと表示設定
\n
背景画像を設定するには、まず画像ファイルを用意してアップロードします。
クラシックテーマの場合、カスタマイザーの「背景画像」を開くと「画像を選択」というボタンが表示されます。
\n
- \n
- 「画像を選択」をクリックする
- メディアライブラリから既存の画像を選ぶか、新たにファイルをアップロードする
- 画像を選択したらプリセット（デフォルト・フルスクリーン・繰り返し・カスタム）を選ぶ
- プレビューで表示を確認し「公開」を押す
\n
\n
\n
\n
\n
プリセットの「フルスクリーン」を選ぶと、画面全体に画像が表示されます。
パターン系の画像なら「繰り返し」を選ぶと、タイル状に敷き詰められてきれいに見えます。
\n\n
背景画像の表示オプションを調整する
\n
カスタマイザーでは、背景画像の表示方法を細かく調整できます。
\n
| 設定項目 | 内容 | おすすめの設定 |
|---|---|---|
| 画像の位置 | 中央・左上・右下など9方向 | 中央 |
| 画像サイズ | 元のサイズ・フルスクリーン・幅に合わせる | フルスクリーン |
| 画像の繰り返し | 繰り返す・繰り返さない | 写真はオフ、パターンはオン |
| スクロール追従 | 固定・スクロール | 固定（パララックス効果） |
\n
「スクロール追従を固定」にすると、いわゆるパララックス効果（背景が固定されたままコンテンツだけがスクロールする演出）が得られます。
おしゃれなサイトに見せたいなら、ぜひ試してみてください。
\n\n
背景画像を削除・変更したい場合
\n
一度設定した背景画像を元に戻したい場合も簡単です。
カスタマイザーの背景画像設定画面で「画像を削除」をクリックするだけで、デフォルトの状態に戻ります。
別の画像に変更したい場合は、「画像を変更」から新しい画像をアップロードしてください。
\n\n
背景色を変更する方法とカラー選びのコツ
\n\n
カスタマイザーで背景色を変更する
\n
背景色を変更したい場合は、カスタマイザーの「色」セクションを使います。
\n
- \n
- 「外観」→「カスタマイズ」→「色」を開く
- 「背景色」のカラーピッカーでお好みの色を選ぶ
- もしくはカラーコード（例：#f5f5f5）を直接入力する
- プレビューで確認し「公開」を押す
\n
\n
\n
\n
\n
テーマによっては「色」ではなく「基本設定」や「デザイン設定」の中に背景色の項目がある場合もあります。
見つからない場合は、テーマ固有の設定パネルも確認してみてください。
\n\n
読みやすさを損なわない背景色の選び方
\n
背景色を変更する際に最も大切なのは、テキストとのコントラスト比です。
背景色と文字色のコントラスト比が4.5:1以上あると、読みやすさが確保できます。
\n
おすすめの背景色パターンを紹介します。
\n
| 背景色 | カラーコード | 印象 |
|---|---|---|
| ホワイト | #ffffff | 清潔感・スタンダード |
| ライトグレー | #f5f5f5 | 柔らかい・目に優しい |
| アイボリー | #fffff0 | 温かみ・ナチュラル |
| 薄いブルー | #f0f7ff | 信頼感・ビジネス向け |
| 薄いグリーン | #f0faf0 | 癒し・健康系サイト向け |
\n
ブログやビジネスサイトでは、真っ白よりもほんの少しだけ色を入れた「オフホワイト系」がおすすめです。
目が疲れにくく、長時間読んでもらいやすいサイトになります。
\n\n
CSSで細かくカスタマイズする方法
\n
カスタマイザーの標準機能だけでは物足りない場合、追加CSSを使えばより細かい調整ができます。
「外観」→「カスタマイズ」→「追加CSS」に以下のようなコードを記述します。
\n
body { background-color: #f9f9f9; }
\n
グラデーション背景にしたい場合はこちらです。
\n
body { background: linear-gradient(180deg, #ffffff 0%, #e8f4f8 100%); }
\n
CSSを使えば、グラデーションや半透明のオーバーレイなど、カスタマイザーだけでは実現できないデザインも可能になります。
\n\nスポンサードリンク
AIツールで背景画像を作成する【2026年最新テクニック】
\n\n
ChatGPTのDALL-E機能で背景を生成する
\n
2026年現在、AIを使えばオリジナルの背景画像を数秒で作成できます。
最も手軽なのは、ChatGPTに搭載されているDALL-E（画像生成AI）を使う方法です。
\n
- \n
- ChatGPTを開く
- 「ブログの背景に使えるシンプルな幾何学模様を作ってください。色はライトブルーとホワイトで」とプロンプトを入力する
- 生成された画像をダウンロードする
- WordPressのカスタマイザーからアップロードする
\n
\n
\n
\n
\n
著作権フリーのオリジナル画像が作れるので、素材サイトで探す手間が省けます。
\n\n
おすすめのAI画像生成プロンプト例
\n
背景画像に向いたプロンプトの例をいくつか紹介します。
\n
| 用途 | プロンプト例 |
|---|---|
| ビジネスサイト | Minimal abstract geometric background, light gray and white, clean professional feel, seamless pattern |
| ブログ | Soft watercolor texture background, pastel colors, subtle and elegant, high resolution |
| ポートフォリオ | Dark gradient background with subtle bokeh lights, modern and sophisticated |
| カフェ・飲食店 | Warm wood texture background, natural and cozy atmosphere, seamless tileable |
\n
ポイントは「seamless」「tileable」「subtle」といったキーワードを含めることです。
これにより、繰り返し表示しても違和感のない、控えめなデザインの背景が生成されやすくなります。
\n\n
無料の背景素材サイトも活用しよう
\n
AIで作るのが面倒な場合は、従来の素材サイトも引き続き使えます。
\n
- \n
- Subtle Patterns（subtlepatterns.com）：シンプルなパターン背景が豊富
- Unsplash（unsplash.com）：高品質な写真素材が無料
- Hero Patterns（heropatterns.com）：SVGパターンをカスタムカラーでダウンロード可能
- Cool Backgrounds（coolbackgrounds.io）：グラデーションやパーティクル背景をワンクリック生成
\n
\n
\n
\n
\n
特にHero Patternsは、好きな色を指定してSVGパターンを生成できるので、サイトのテーマカラーに合わせた背景を簡単に作れます。
\n\n
背景画像で失敗しないための注意点
\n\n
画像サイズと表示速度の最適化
\n
背景画像を設定するときに最も注意すべきなのが、画像ファイルのサイズです。
大きすぎる画像はページの読み込み速度を低下させ、SEOにも悪影響を及ぼします。
\n
背景画像の推奨スペックは以下の通りです。
\n
| 項目 | 推奨値 |
|---|---|
| ファイルサイズ | 200KB以下 |
| 画像サイズ（写真） | 1920×1080px |
| 画像サイズ（パターン） | 200×200px〜500×500px |
| ファイル形式 | WebP推奨（JPEG・PNGも可） |
\n
2026年現在はWebP形式が標準です。
JPEGやPNGと比べてファイルサイズが30〜50%小さくなるため、必ずWebP形式に変換してからアップロードしましょう。
WordPressプラグインの「EWWW Image Optimizer」や「ShortPixel」を使えば、アップロード時に自動でWebP変換してくれます。
\n\n
スマホ表示での見え方を必ず確認する
\n
2026年のWebアクセスの約80%はスマートフォンからです。
PCで見て良い感じの背景画像でも、スマホでは文字が読みにくくなったり、画像が崩れて表示されることがあります。
\n
背景を変更したら、必ず以下の方法でスマホ表示を確認してください。
\n
- \n
- カスタマイザーのプレビュー画面下部にあるスマホアイコンをクリックしてモバイル表示を確認する
- 実際にスマートフォンでサイトを開いて確認する
- Google Chromeのデベロッパーツール（F12）でレスポンシブ表示を確認する
\n
\n
\n
\n
特に写真を背景に使う場合は、スマホでは背景画像をオフにするという選択肢も検討してみてください。
追加CSSで以下のように記述すれば、スマホでは背景色のみの表示にできます。
\n
@media (max-width: 768px) { body { background-image: none !important; } }
\n\n
テーマとの相性に注意する
\n
テーマによっては、背景画像の設定が反映されない場合があります。
これは、テーマ側のCSSが背景設定を上書きしているケースがほとんどです。
\n
反映されない場合は、追加CSSで「!important」を付けて優先度を上げましょう。
\n
body { background-image: url('画像URL') !important; background-size: cover !important; }
\n
それでも反映されない場合は、テーマ固有の設定パネルに背景の項目がないか確認してみてください。
SWELLやCocoonなど人気テーマでは、独自の背景設定機能を持っていることがあります。
\n\nスポンサードリンク
まとめ
\n\n
WordPressの背景画像・背景色の変更方法について解説しました。
最後に、この記事の要点を振り返ります。
\n
- \n
- クラシックテーマは「外観」→「カスタマイズ」→「背景画像」または「色」から変更できる
- ブロックテーマは「外観」→「エディター」→「スタイル」から背景を設定する
- 背景画像はプリセットや表示オプションで見た目を細かく調整できる
- 背景色はコントラスト比4.5:1以上を意識して、読みやすさを確保する
- 2026年はAIツール（ChatGPT等）でオリジナル背景画像を作るのが手軽でおすすめ
- 画像はWebP形式・200KB以下にして表示速度を最適化する
- 変更後は必ずスマホ表示を確認すること
\n
\n
\n
\n
\n
\n
\n
\n
背景の変更はWordPressカスタマイズの第一歩です。
たった1分の作業で、サイト全体の印象がガラリと変わります。
ぜひこの記事を参考に、あなたのサイトにぴったりの背景を設定してみてください。
