Cocoonの背景色を変える7つの方法｜変わらないときの原因と対処法も

WordPressでCocoonを使っていると、「なんだかデザインが味気ないな…」「背景の色を変えたいけど、どこを触ればいいの？」と感じること、けっこう多いと思います。

私もブログを始めた頃は、Cocoonの背景色の設定場所が分からず、ずっと真っ白なままの画面を眺めては「うーん…」と首をかしげていました。

この記事を読めば、次のことが分かります。

サイト全体・ヘッダー・フッター・カラムなど、どこの背景色を変えられるのか
Cocoonの設定画面だけでできる背景色の変更方法
メインカラムやサイドバー、特定ページだけ色を変えるCSSの書き方
おしゃれで読みやすい配色の決め方と具体例

結論を先に言うと、「どの場所の色を変えたいかを整理して、Cocoonの設定とCSSをうまく組み合わせれば、背景はかなり自由にカスタマイズできる」ということです。

Cocoonで変えられる背景色の種類を整理しよう
Cocoon設定で背景色を変える基本のやり方
CSSでメインカラム・サイドバーなどをカスタマイズ
cocoon 背景色をおしゃれに見せる配色ルールとコツ
背景色が変わらないときのチェックリスト
よくある質問（FAQ）
まとめ：cocoon 背景色を味方につけて、読みやすいブログにしよう

Cocoonで変えられる背景色の種類を整理しよう

ごとう

最初に、Cocoonでどこの背景色を変えられるのかをざっくり整理しておきます。いきなり設定画面を触るより、「どのエリアの色をいじるのか」が分かっていたほうが、迷子になりにくいです。

サイト全体・ヘッダー・フッター・カラムなど主なエリア

よく質問が多い背景部分を、ざっくり一覧にするとこんな感じです。

エリア	役割・見え方のイメージ	主な設定場所	難易度
サイト全体の背景	ブラウザ全体の下地になる色	Cocoon設定 → 全体 → サイト背景色	★☆☆
ヘッダー・ヘッダーメニュー	ブログタイトルやグローバルメニューの帯	Cocoon設定 → ヘッダー	★★☆
フッター	コピーライトやメニューが入る一番下の帯	Cocoon設定 → フッター	★★☆
メインカラム	記事本文が表示される中央のエリア	CSSカスタマイズ	★★★
サイドバー	プロフィールや広告、人気記事などが並ぶ細いエリア	CSSカスタマイズ	★★★
投稿一覧（アーカイブ）	記事カードが並ぶ一覧ページの背景	CSSカスタマイズ	★★★
記事内のボックスやセクション	吹き出し・囲み枠・グループブロックなどの背景	ブロックエディター＋CSS	★★☆

よくある勘違いとして、「Cocoonの設定だけで全部の背景色を変えられる」と思いがちですが、実際にはそうではありません。

テーマの画面だけで変えられる場所と、CSSを書かないと触りづらい場所に分かれています。

このあと、サイト全体 → テーマ設定で変えられる部分 → CSSでカスタムする部分、という順番で見ていきますね。

背景色を変える前に決めておきたいこと

背景をいじる前に、ざっくりでいいので次の3つを考えておくと、やり直しが少なくて済みます。

ブログ全体の雰囲気（ポップ・シック・かわいい・ビジネスライクなど）
メインカラー（ブランドカラーとして使いたい色）
読者に与えたい印象（安心感・スピード感・高級感など）

たとえば、次のようなイメージです。

ガジェットレビュー系 → 白〜グレーをベースに、アクセントは青系
コスメ・美容系 → ベージュや淡いピンクを背景にして、ポイントで濃いピンク
ビジネス系 → 白とネイビー、グレーを中心に落ち着いた配色

いきなり背景の色を変えるより、まず「どんな世界観にしたいか」と「主役にする色」をざっくり決めておくと、あとで微調整もしやすくなります。

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか？

稼げる広告
稼げるキーワード
稼げるライティング

これら全部を暴露します。

⇒まずはあっさり10万稼ぐためのメルマガ

Cocoon設定で背景色を変える基本のやり方

ごとう

ここからは、Cocoonの設定画面だけで変更できる背景部分の操作方法をまとめていきます。CSSに触れる前に、まずはこの範囲を一通り押さえておくと、かなり見た目が変わります。

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

ブログ全体の「下地の色」を変えたいときは、Cocoon設定の「全体」タブから操作します。

大まかな流れは次の通りです。

ステップ	操作内容の目安	ワンポイントメモ
1	WordPress管理画面にログインする	ログインURLはブックマークしておくと楽です
2	左メニューから「Cocoon設定」→「全体」を開く	メニューの下のほうにあります
3	「サイト背景色」のカラーピッカーをクリックする	初期状態では白か薄いグレーになっていることが多いです
4	好きな色を選ぶか、カラーコードを入力する	`#f5f5f5`などの薄いグレーは使いやすいです
5	ページ下部の「変更をまとめて保存」をクリックする	保存しないと反映されないので要注意です
6	ブログを別タブで開き、背景が変わっているか確認する	スマホ表示もできればチェックしておきましょう

最初のうちは、真っ黒や原色系ではなく、白に少しだけ色が混ざったくらいのトーンから試すのがおすすめです。

あまり濃い色を背景にしてしまうと、文字が読みにくくなったり、長時間読むと目が疲れたりしやすくなります。

ヘッダー・メニュー・フッターの背景色を変える

次に、サイトの上下にある「帯」の色を整えていきます。ここはブログの印象を大きく左右するので、Cocoonの背景色の中でも特にこだわりたい部分です。

やることはざっくり3つです。

ヘッダー全体の背景色を決める
グローバルメニューの背景と文字色を整える
フッターの背景色と文字色をセットで調整する

操作のイメージはこんな感じです。

「Cocoon設定」→「ヘッダー」で、ヘッダー全体の色やロゴ周りの背景を変更
メニューの色は、「外観」→「メニュー」や色関連の設定から調整
フッターは「Cocoon設定」→「フッター」で、背景色と文字色を一緒に変更

おすすめなのは、ヘッダーとフッターの背景を「同じ色」か「同系色」にしておくことです。

たとえば、ヘッダーを濃いめの紺、フッターを少し明るい紺、サイト全体の背景を薄いグレーにすると、落ち着いたブログになります。

記事内ブロックの背景色を変える（ボックス・セクションなど）

Cocoonはブロックエディターとの相性が良く、記事内のボックスやセクション、吹き出しなども簡単に背景色を変えられます。

よく使う場面を挙げると、こんな感じです。

注意書きだけを目立たせるために、背景を薄い黄色にする
補足説明のボックスを淡いグレーにして、本文と区別する
見出し直下に置く「要点のまとめ」ボックスを、ほんのり色付きにする

ブロックエディターでは、

段落ブロック
グループブロック
カラムブロック

などを選択し、右側の「ブロック設定」→「色」→「背景色」から好きな色を選びます。

ここで色を増やしすぎると、ページ全体が落ち着かなくなるので、

ベースの色
アクセント用の色
注意書き用の色

くらいの3種類に抑えておくと、画面がすっきり見えます。

【ちょっと一息♪】

私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？

⇒今すぐ秘密を見る

CSSでメインカラム・サイドバーなどをカスタマイズ

ごとう

ここからは、Cocoonの標準設定では触りづらい「メインカラム」「サイドバー」「投稿一覧」の背景を、CSSでカスタマイズする方法を紹介します。少しだけハードルは上がりますが、ポイントさえ分かれば、背景をかなり細かくコントロールできるようになります。

子テーマと追加CSS、どちらを使うか

CSSを書く場所は大きく分けて2パターンあります。

方法	設定場所の例	メリット	デメリット
子テーマのstyle.css	外観 → テーマファイルエディター → 子テーマ	しっかり管理でき、本格的なカスタマイズに向いている	慣れるまで少し怖く感じる、誤操作に注意が必要
追加CSS	外観 → カスタマイズ → 追加CSS	すぐ試せて、元に戻すのも簡単で初心者向き	書く量が増えると、どこに何を書いたか分かりにくくなりがち

私のおすすめは、最初は「追加CSS」で少しずつ試して、落ち着いてきたら子テーマにまとめるやり方です。

いきなりテーマファイルを直接いじると緊張すると思うので、まずは追加CSSに1〜2行だけ書いてみて、感覚をつかんでいきましょう。

メインカラム・サイドバーの背景色を変えるCSS例

メインカラムやサイドバーの背景を変えるには、Cocoonが用意しているIDやクラスに対して、背景色を指定します。

サイトの構造によって多少違いはありますが、代表的な例は次の通りです。

メインカラムの背景を変える例：

#main {
  background-color: #ffffff;
}

サイドバーの背景を薄いグレーにする例：

#sidebar {
  background-color: #f7f7f7;
}

このようなコードを「追加CSS」に貼り付けて保存すると、メイン部分とサイドバーだけ背景色を変えられます。

思ったよりベタっとした印象になってしまった場合は、#f5f5f5や#fafafaなど、より淡いグレーを試してみてください。

境目をはっきりさせたいなら、枠線を加えるのもありです。

メインカラムにうっすら枠線をつける例：

#main {
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
}

背景と枠線をセットで整えると、「箱」の中に記事が収まっているように見えて、読みやすさがアップすることが多いです。

特定ページだけ背景色を変える方法

「トップページだけ背景の色を変えたい」「特定の固定ページは真っ白にしたい」といった場合は、ページごとのIDやクラスを使って指定します。

大まかな流れは次の3ステップです。

ブラウザの検証ツールでページID（bodyのクラス）を調べる
該当のクラス名をメモしておく
そのクラスに対して背景色を指定するCSSを書く

用途ごとにイメージをまとめると、こんな感じになります。

用途	ねらい	CSSで指定するイメージ
トップページだけ背景を変える	最初の印象を変えたい	`.home #main { background-color: #ffffff; }`
特定の固定ページだけ白くする	LPなどをシンプルに見せたい	`.page-id-○○○ #main { background-color: #ffffff; }`
特定カテゴリの記事だけ背景を変える	ジャンルごとに雰囲気を切り替えたい	`.category-スラッグ #main { background-color: #fafafa; }`

page-id-○○○ の数字はページごとに異なります。

管理画面のURL（post=123 といった部分）や検証ツールから確認し、実際の番号に置き換えて使ってください。

こうしたピンポイントのカスタマイズを覚えておくと、「このセールページだけ雰囲気を変えたい」といったときにとても便利です。

【稼げるキーワード教えます】
▼　　▼　　▼

★ちょっとだけ宣伝させてください★

「ブログで10万」と聞くと、

センスが必要
文章力が要る

と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。

⇒ブログで10万稼ぐ勝ちパターンとは

cocoon 背景色をおしゃれに見せる配色ルールとコツ

ごとう

ここでは、単に色を変えるだけでなく、「おしゃれで読みやすい見た目」にするための考え方をまとめます。デザインの専門家ではなくても、ちょっとしたルールを知っているだけで、全体の印象がぐっと良くなります。

ジャンル別のおすすめ配色パターン

ブログのジャンルによって、相性のよい色の組み合わせは少しずつ変わります。

ざっくりとしたイメージを表にすると、こんな感じです。

ジャンル例	背景のベース	メインカラー（強めの色）	補助カラー（リンク・ボタンなど）
ガジェット・IT系	真っ白〜薄いグレー	濃いブルー・ネイビー	明るいブルー・シアン
コスメ・美容系	ごく薄いピンク・ベージュ	ピンク・ローズ系	ゴールド・グレー
子育て・ライフスタイル	白〜クリーム色	オレンジ・グリーン	やわらかいパステルカラー
ビジネス・金融系	白〜薄いグレー	ネイビー・ダークグリーン	青系・グレー系
ハンドメイド・雑貨	ベージュ・生成り色	ブラウン・くすみカラー	淡いパステル

ここでのポイントは、次のように役割を分けることです。

背景色は「下地」として控えめに
メインカラーはロゴや見出しで存在感を出す役
補助カラーはリンクやボタンでほどよく目立たせる役

背景そのものを派手な色にするより、

背景は白〜淡い色
メインカラーで世界観を作る
補助カラーでアクセントをつける

といったバランスを意識したほうが、落ち着いた画面になりやすいです。

読みやすさとコントラストのバランス

背景を変えるときに必ず意識したいのが、「コントラスト」です。背景と文字の色の差が小さいと、読者が文字を読むのに余計な力を使うことになり、ストレスの原因になります。

ざっくりした目安は次の通りです。

背景が白系なら、本文の文字は黒〜濃いグレー
背景が暗めなら、文字は白〜かなり淡いグレー
淡い背景に淡い文字色は避ける（スマホでは特に読みにくいです）

私がよく使う組み合わせは、

背景：#ffffff
本文文字：#333333
補足や注釈：#666666

といったあたりです。

これくらいのコントラストだと、長文でも読みやすく、目への負担もそこまで大きくありません。

カラーパレットを決めておくと編集が楽

Cocoonでは、ブロックエディター用に「よく使う色」を登録しておくことができます。先にカラーパレットを決めておくと、毎回カラーコードを探す手間が減り、サイト全体の統一感も出ます。

パレットを決めるときは、次の役割で考えると整理しやすいです。

ベースカラー：背景に使う、ごく薄い色
メインカラー：見出しやボタンに使う、サイトの顔になる色
サブカラー：リンクや強調に使う、少し抑えめの色
注意カラー：警告や重要ボックスに使う色（赤〜オレンジ系など）

たとえば、

ベース：#fafafa
メイン：#0f4c81（やや濃い青）
サブ：#4a90e2（少し明るめの青）
注意：#ff9800（オレンジ）

といった具合に、3〜4色に絞っておくと迷いにくくなります。

「この記事だけ雰囲気が違う…」という状態を防ぐ意味でも、Cocoonの背景設定と合わせて、色のルールも決めておくのがおすすめです。

★ブログでは公開できない裏情報★

私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。

例えば、

実際に10万稼いだキーワード
今やるべきおススメ広告

などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。

⇒あっさり10万稼ぐためのメルマガ

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

ごとう

ここでは、「設定したはずなのにCocoonの背景が変わらない」というときのチェックポイントをまとめます。私も最初はここでよくつまずいたので、この項目をそのまま上から確認してもらえれば大丈夫です。

まず確認したい基本設定とキャッシュ

背景が変わらない原因として多いのが、「設定は合っているけれど、古い表示が残っている」というパターンです。

症状	よくある原因	対処の目安
背景を変えたのに画面が変わらない	ブラウザのキャッシュが残っている	シークレットウィンドウで開き直す
PCでは変わっているがスマホでは変わらない	キャッシュ系プラグインの影響	プラグインのキャッシュ削除ボタンを実行する
特定のページだけ色が変わっていない	そのページだけ別テンプレートを使っている	固定ページや投稿のテンプレート設定を確認する
一部のエリアだけ色が変わらない	スキンの設定が優先されている	スキン側の配色設定も合わせて確認する

特に、高速化プラグインやキャッシュ系プラグインを入れている場合は、設定を変えたあとに

プラグイン側の「キャッシュ削除」を実行する
ブラウザのシークレットウィンドウで表示を確認する

という流れをセットにしておくと、トラブルがぐっと減ります。

CSSが効かないときに疑うポイント

CSSでCocoonの背景を変更しようとしても反映されない場合は、次のあたりを疑ってみてください。

状況・症状	考えられる原因	対処のヒント
まったくデザインが変わらない	CSSを書いた場所が違っている	「追加CSS」に書いたか、子テーマかを再確認する
一部のページだけ効いていない	セレクタが限定されすぎている	`.home`など条件のクラスを外して試す
想定していない場所まで色が変わってしまう	セレクタが広すぎる	より具体的なクラスやIDに絞って指定する
どうしても上書きされてしまう	優先度の高いCSSが別に書かれている	`!important`を一時的に使って効き方を確認する