WordPressの背景色の変更方法！変わらない時・一部だけの対策も

背景色を変えたいのに、どこを触ればいいのか分からなかったり、設定した色が反映されなくてイライラしていませんか。

WordPressの背景色を変更したいときに、思った場所だけうまく変えたり、反映されない原因をきちんと押さえておくと、デザイン調整のストレスが一気に減ります。

WordPressの背景色を変える前に全体像を整理しよう

背景色で変えられる主な場所をざっくり把握しよう

同じ「背景色」でも、実際にはいくつかの場所があります。

場所	具体例	主な設定方法のイメージ
サイト全体の背景	ブラウザ全体に広がる色、左右の余白の色など	テーマの「サイト全体」設定やCSS
コンテンツエリアの背景	記事本文が乗っている白い箱の部分	ブロックエディターの設定やテーマの配色設定
ブロックやボックスの背景	吹き出し、囲み枠、カラムレイアウトなど	各ブロックの「背景色」オプション
テキストの一部の背景	ラインマーカーのようなハイライト	テキストの装飾機能やCSS
表（テーブル）の一部の背景	ヘッダー行だけ色を付ける、合計行だけ目立たせるなど	テーブルブロックの設定、またはCSS
特定ページだけの背景	LPだけ背景色を変える、特定カテゴリーページだけ変更	ページID・カテゴリIDを指定したCSS

「どこを変えたいのか」が分かれば、必要な操作も自然と決まってきます。

このあと、場所ごとに具体的な変更方法を見ていくので、自分がやりたいのはどのパターンか、なんとなく頭の中でチェックしておいてください。

自分のテーマとエディターのタイプを確認しよう

次に、自分のWordPress環境がどのタイプなのかをざっくり確認しておきましょう。

ここを把握しておくと、「説明と画面が違う…」という混乱をかなり減らせます。

種類	見た目の特徴・見分け方	背景色の主な設定場所
ブロックテーマ＋サイトエディター	「外観 → エディター」があり、サイト全体をブロックで編集できる	エディター内の「スタイル → 色」など
クラシックテーマ＋カスタマイザー	「外観 → カスタマイズ」がメインで、細かい項目が一覧で並んでいる	カスタマイザー内の「色」「背景画像」など
テーマ独自オプションあり	「外観 → テーマ設定」「外観 → ○○設定」など独自メニューがある	テーマ専用の設定画面

• 管理画面の「外観」メニューを開き、「エディター」があるかどうかを見る
• 「外観 → カスタマイズ」が中心ならクラシックテーマ寄りの可能性が高い
• 「テーマ設定」や「デザイン設定」など独自メニューがあれば、そこに色設定が隠れていることも多い

私も最初のころは、ここを曖昧にしたままいじってしまい、「カスタマイザーを触っているのに、実はサイトエディター側の設定に上書きされていた」という遠回りを経験しました。

今のうちに、自分のサイトがどのタイプなのか軽くメモしておくと、あとで迷いにくくなります。

WordPress 背景色 変更の基本ステップ（全体とブロック）

サイト全体の背景色を変更する手順

サイト全体の背景色を変える方法は、大きく3つのパターンがあります。

• サイトエディターから変える
• カスタマイザーから変える
• CSS（追加CSSや子テーマ）で直接指定する

それぞれ、ざっくりとした手順はこんなイメージです。

• サイトエディターの場合

• 「外観 → エディター」に進む
• 左上などにある「スタイル」アイコンを開く
• 「色」や「背景」などの項目から、サイト全体の色を選ぶ

• カスタマイザーの場合

• 「外観 → カスタマイズ」を開く
• 「色」「背景画像」といったメニューがあればそこをクリック
• カラーピッカーやスライダーで好みの色を選ぶ

• CSSで指定する場合（例）

• 「外観 → カスタマイズ → 追加CSS」を開く
• 次のようなコードを追加する
  body { background-color: #f5f5f5; }

CSSにあまり慣れていない場合は、まずサイトエディターもしくはカスタマイザーから試してみて、どうしても細かく調整したくなったタイミングでCSSに手を出すくらいで十分です。

投稿・固定ページのコンテンツ背景を変える手順

「サイト全体」ではなく、「記事本文が載っている箱の部分だけ色を変えたい」というケースもよくあります。

ブロックエディターを使っている場合は、次のような考え方だと分かりやすいです。

やりたいこと	使うブロック・機能	ポイント
記事全体を少し色付きの箱にしたい	グループブロック	本文全体をグループで包んで背景色を設定する
特定の段落だけ背景色を付けて目立たせたい	段落ブロックの「ブロック」タブ → 背景色	テキスト色とのバランスを見ながら色を決める
注意書きだけ黄色いボックスにしたい	カラムや「ボックス」系のブロック	テーマ標準の装飾ブロックを使うと手っ取り早い
CTAやまとめ部分を別の色にしたい	グループ＋見出し＋ボタン	グループ全体に背景色を付けるとデザインに統一感が出る

基本的には、対象のブロックを選択した状態で、画面右側の「ブロック」設定にある「色」「背景」などの項目から設定していきます。

背景色の設定項目が見当たらないブロックの場合は、そのブロックを「グループ」ブロックで包んで、グループ側に背景色を付けると、ほとんどのケースで対応できます。

テーマ独自の「色設定」を使うときのポイント

テーマによっては、「外観 → テーマ設定」「外観 → ○○設定」などの中に、背景色に関する専用の項目が用意されていることがあります。

• サイト全体の背景色
• ヘッダーやフッターの背景色
• サイドバーの背景色
• 記事本文エリアの背景色

こういったテーマ独自の色設定がある場合、カスタマイザーや追加CSSよりもそちらが優先されることも少なくありません。

私の場合は、まずテーマの色設定で大枠を決めてしまい、そのうえで細かい装飾だけブロック単位で行う、というやり方が一番しっくりきています。

このほうが「どこでこの色を変えればいいんだっけ？」という迷子状態を減らしやすく、サイト全体のトーンも崩れにくくなります。

WordPress 背景色が変わらないときのチェックリスト

まずは基本の確認とキャッシュ削除

「変わらない」と感じたときは、いきなり難しいことを疑う前に、基本的なところから確認していきましょう。

確認項目	やることの例
ブラウザキャッシュ	ページの再読み込み（ハードリロード）やキャッシュ削除を試す
キャッシュ系プラグイン	一時的に停止してみる、または「キャッシュを削除」ボタンを押す
サーバー側のキャッシュ機能	サーバー管理パネルにキャッシュ削除機能がないか確認する
シークレットウィンドウでの確認	別ブラウザやシークレットモードで同じページを開いてみる
モバイルとPCで見比べる	PCとスマホの両方で色が変わっているかチェックする

特にキャッシュ系プラグインやサーバーキャッシュを使っている場合、管理画面のプレビューでは変わっているのに、実際の公開ページだけ古い状態のまま、ということがよく起こります。

一度キャッシュをすべてリセットしてから確認してみて、それでもダメなら次のステップに進みましょう。

テーマやCSSの優先度で背景色が上書きされている場合

キャッシュを消しても背景色が変わらないときは、テーマやCSSの「優先度」が影響している可能性が高いです。

• テーマの色設定が、カスタマイザーやブロック設定より優先されている
• 別のCSSファイルで !important 付きの指定がされている
• インラインスタイル（HTMLのstyle属性）で色が固定されている

CSSの世界では、どのルールが優先されるかを決める「強さ」の考え方があります。かなりざっくりまとめると、次のようなイメージです。

• より具体的なセレクタが優先される（例：body より .content-area のほうが強い）
• id指定（#main） ＞ class指定（.main） ＞ タグ指定（body）
• あとから読み込まれたCSSが優先されやすい
• !important が付いている指定は、かなり強く優先される

追加CSSで背景色を指定しても反映されないときは、次のような対策を試してみてください。

• セレクタを少し具体的にしてみる（例：body → body.page や .site-main など）
• 一時的に background-color: #f5f5f5 !important; のように !important を付けてみる
• ブラウザの開発者ツールを開き、実際にどのCSSが当たっているか確認する

開発者ツールは最初こそとっつきにくいですが、「この要素はどのCSSで色が決まっているのか」を目で見て確かめられるので、慣れてくると原因特定がかなり早くなります。

プラグイン・ブラウザ・スマホだけなど隠れた原因

背景色が変わらない原因は、テーマやCSS以外のところに潜んでいることもあります。

• デザイン系プラグインが独自のCSSを出力している
• テスト用のプラグインが、一部のユーザーだけ別のデザインを表示している
• スマホ用のCSS（メディアクエリ）が、PCとは別の背景色を指定している
• ブラウザのダークテーマや表示補正が影響している

特に多いのが、「PCでは背景色が変わっているのに、スマホだけ変わらない」という相談です。

その場合は、次のように切り分けてみてください。

• 別のスマホ（家族の端末など）でも同じように見えるか
• Wi-Fiとモバイル回線の両方で表示を確認してみる
• テーマのスマホ専用設定や、レスポンシブ設定の中に色指定がないか探す

私の経験上、スマホ用に別の色設定が用意されていて、そこを見落としていたというパターンがかなり多いです。

一度テーマのマニュアルもあわせて確認してみると、思わぬところに「モバイル用の配色設定」が書いてあったりします。

WordPress 背景色を一部だけ変える4つのパターン

テキストの一部だけマーカーを引くように色を付ける

文章の中の一言だけを目立たせたいときは、「ハイライト」や「テキストの背景色」機能を使うのが簡単です。

• 段落ブロックのテキストをドラッグして選択する
• 表示された小さなツールバーから「装飾」や「A」マークなどをクリックする
• 「ハイライト」や「背景色」などの項目があれば、好みの色を選ぶ

テーマやエディターのバージョンによってメニュー名は少し違いますが、多くの場合「文字色」と「背景色」が別々に用意されています。

もう少しこだわりたい場合は、CSSで自分好みのマーカー風スタイルを作ってしまうのも手です。

• 追加CSSに、たとえば次のようなクラスを用意する
  .marker-yellow { background-color: #fff3b0; }
• エディター側の「追加クラス」欄に marker-yellow と入力し、そのクラスを当てたいテキストブロックに設定する

こうしておくと、「大事なところはいつも同じ黄色マーカー」のように、サイト全体で装飾を統一しやすくなります。

段落やボックス全体に背景色を付ける

「注意」「補足」「ここがポイント」など、まとまった塊を目立たせたい場合は、段落やボックス全体に背景色を付けるのがおすすめです。

やり方としては、次のどちらかが多いと思います。

• 段落ブロック自体に背景色を付ける
• グループブロックで囲んで、グループに背景色を付ける

そのうえで、次のようなポイントを意識すると、読みやすさを保ちやすくなります。

• 背景色を多用しすぎると、どこも目立たなくなるので「ここぞ」に絞る
• テキスト色と背景色のコントラストをしっかり確保する
• スマホで見たとき、上下の余白が窮屈になっていないかを確認する

私がよく使うのは、「薄い黄色＋黒文字」「薄い水色＋黒文字」「薄いグレー＋やや濃いグレー文字」のようなシンプルなパターンを3つくらい決めておき、それ以外はあまり増やさない方法です。

色の種類を増やしすぎないだけでも、サイト全体の印象が落ち着いて見えます。

表（テーブル）の一行・一部のセルだけ色を変える

表の「ヘッダー行だけ背景色を変えたい」「合計の行だけ目立たせたい」という要望もよくあります。

基本的な考え方は次のとおりです。

• ヘッダー行のセルを選択し、「背景色」や「行スタイル」を変更する
• セル単位で色を変えられる場合は、対象のセルを選んで背景色を指定する
• それが難しいテーマでは、CSSで th や特定クラスに色を当てる

たとえば、次のようなCSSを書いておくと、表のヘッダーを簡単に目立たせられます。

• 追加CSS例
  table.my-table thead th {
    background-color: #f0f0f0;
    font-weight: bold;
  }

あとは、記事中のテーブルに「my-table」というクラス名を付けてあげればOKです。

頻繁に表を使うブログなら、こうした「よく使う表デザインのCSS」を1つ用意しておくだけで、作業がかなり楽になります。

特定ページ・カテゴリだけ背景色を変えるCSS

「トップページだけ背景色を変えたい」「あるカテゴリの記事だけ背景色を変えたい」という場合は、ページIDやカテゴリIDを使ったCSS指定が便利です。

• 特定ページのみ
  .page-id-123 {
    background-color: #fffdf0;
  }
• 特定カテゴリのみ
  .category-news {
    background-color: #f5fbff;
  }

page-id-123 や category-news の部分は、自分のサイトに合わせて置き換えます。

ページIDは編集画面のURL（post=○○ や page_id=○○）から確認できることが多く、カテゴリスラッグは「投稿 → カテゴリ」画面で確認できます。

こうしたCSSを使えば、「LPだけ背景を変えてキャンペーン感を出す」「コラム記事だけ背景色を少し変えて雰囲気を変える」といったことも簡単です。

背景色と配色のコツでデザインを整える（wordpressの背景色を変更の応用）

読みやすい背景色の基本ルール

まずは、読みやすさを優先した背景色の基本ルールを押さえておきましょう。

• 本文は「黒に近い濃い色」×「白〜薄いグレー」の背景が基本
• ビビッドな原色や蛍光色は、アクセントやボタンなど部分使いにとどめる
• リンクやボタンの色は、背景としっかり差を付ける
• 背景と文字のコントラストが弱いと、目が疲れて離脱につながりやすい

色選びに自信がない場合は、まず次のようなシンプルな組み合わせから試してみてください。

• 背景：#f5f5f5、本文ボックス：#ffffff、テキスト：#333333
• 背景：#ffffff、見出し背景だけ薄いグレー：#f0f0f0
• 注意書きボックス：薄い黄色背景＋黒文字

「おしゃれな配色」にこだわりすぎるよりも、「読みやすい配色」になっているかどうかを優先したほうが、結果的にユーザーに喜ばれることが多いです。

サイトの雰囲気別おすすめ配色例

最後に、サイトの雰囲気に合わせた、おすすめの背景色とアクセントカラーの組み合わせ例を表にしておきます。

サイトのイメージ	背景（全体）	コンテンツ背景	アクセント・ボタン色	コメント
ビジネス・コーポレート系	#f5f5f5	#ffffff	#0073aa	落ち着いたグレー系＋青で信頼感を出しやすい
個人ブログ・雑記系	#fffaf5	#ffffff	#ff8a5c	ほんのりベージュ背景で、柔らかい印象になる
デザイン系・クリエイティブ系	#ffffff	#f5f7ff	#4a6cff	余白多め＋淡いブルーでスッキリした印象
女性向けメディア	#fff7fb	#ffffff	#e65c9c	やわらかなピンク系、文字は濃いグレーで読みにくさを防ぐ
テック・ガジェット系	#0f1115	#1a1c22	#00c4ff	ダーク背景＋明るいアクセントでクールな印象に

このあたりの配色を参考にしつつ、自分のメディアの雰囲気に合いそうな組み合わせを1〜2パターン選んでみてください。

あとは、その配色に合わせて、ブロックやボックスの背景色をそろえていくと、サイト全体の統一感が自然と出てきます。

よくある質問：WordPress 背景色 変更・一部だけ反映させる疑問

Q1. 背景色を変更したのに、スマホだけ色が変わりません。どうすればいいですか？

A. スマホだけ背景色が変わらない場合は、次の3つを順番にチェックしてみてください。

• キャッシュ系プラグインやサーバーキャッシュを削除する
• 別のスマホやブラウザ（Chrome、Safariなど）でも同じ表示か確認する
• テーマに「スマホ用の色設定」や「レスポンシブ用の配色」が別にないか調べる

特に、スマホ用のデザイン設定がPCと分かれているテーマだと、「PCの色だけ変えて満足していた」というケースがよくあります。

一度テーマの設定画面をじっくり見直してみて、スマホ専用の項目がないか探してみてください。

Q2. テキストの一部だけ背景色を付けたいのですが、どこを触ればいいですか？

A. テキストの一部だけ背景色を付けたいときは、ブロックエディター上で該当の文字をドラッグして選択し、「文字装飾」「ハイライト」「背景色」といったメニューを探してみてください。

もし標準機能でうまくいかない場合は、次のような別案もあります。

• その一文を段落ブロックとして分け、段落ブロックの背景色を変える
• グループブロックで囲んで、グループ全体の背景色を変える
• CSSで .marker-○○ のようなクラスを作り、そのクラスを当てる

「どのレベルで一部を変えたいのか」を意識しながらブロックを分けていくと、思い通りの装飾がしやすくなります。

Q3. 追加CSSで背景色を指定しても変わりません。書き方が悪いのでしょうか？

A. 書き方のミスもゼロではありませんが、多くの場合はCSSの優先度が原因です。

追加CSSで背景色を指定しても変わらないときは、次の点を確認してみてください。

• 対象の要素に合ったセレクタを使っているか（bodyなのか、.contentなのかなど）
• 他のCSSファイルで、より強いセレクタや !important 付きの指定がされていないか
• 自分の追加CSSが、テーマのCSSより後に読み込まれているか

一時的に background-color: #f5f5f5 !important; のように書いてみて、それで反映されるようなら「優先度の問題だったな」と判断できます。

本番運用ではなるべく !important に頼らず、セレクタの書き方や読み込み順を見直していくのがおすすめです。

まとめ：WordPress 背景色 変更で迷ったらここから

この記事のポイントを整理しておきます

今日からの最初の一歩としては、次の流れを試してみてください。

• まず「自分はどの部分の背景色を変えたいのか」をメモに書き出してみる
• 管理画面の「外観」メニューを開き、自分のサイトがサイトエディター型かカスタマイザー型かを確認する
• テスト用の固定ページを1つ作り、この記事で紹介した方法で背景色の変更と一部だけの変更をひと通り試してみる

この3ステップを踏むだけでも、「なんとなく触っていた背景色の設定」から一歩抜け出して、自分の意図通りにデザインをコントロールしやすくなります。

ぜひ、自分のサイトに合った背景色を見つけて、読者が長居したくなる、居心地のいいデザインを育てていきましょう。