そのCSS、なぜ効かない？
こんなお悩みありませんか？
- ブログのカテゴリーごとに雰囲気を変えたいのに、うまくいかない…
- 特定のカテゴリーページだけ背景色を変えて、特別感を出したい！
- CSSを試したけれど、なぜか全く色が変わらない…
- 高機能なWordPressテーマを使っていたら、簡単なはずのCSSが効かない！
なぜ、いつものCSSが効かないの？
「追加CSS」に body.category-〇〇 { background-color: #好きな色; } と書いたのに、うんともすんとも言わない…。その原因は、ほとんどの場合「テーマの全体設定が優先されている」からです。
多くの高機能テーマには、サイト全体のデザインを手軽に設定できる「カスタマイザー」機能が備わっています。ここで設定した「サイト全体の背景色」は、あなたが「追加CSS」に書いたコードよりも強力なため、個別の上書きをブロックしてしまうのです。
つまり、この問題を解決するには、テーマの強力な設定を一度リセットし、改めてCSSで色を指定し直すという手順が必要になります。
3ステップで解決！特定カテゴリーの背景色を変更する手順
ここからは、具体的な手順を3つのステップで解説します。今回は例として、「マニュアル」というカテゴリーページの背景色を変えてみましょう。
ステップ1：【準備】カテゴリーの「CSSクラス名」を調べる
まず、背景色を変えたいページを特定するための「IDカード」のようなものである「CSSクラス名」を調べます。
- 背景色を変更したいカテゴリーのページ（例: 「マニュアル」の一覧ページ）をブラウザで開きます。
- ページ上で右クリックし、メニューから「ページのソースを表示」を選択します。
- キーボードの Ctrl + F (Macは Cmd + F) を押すと検索窓が出てくるので、body と入力して検索します。
<body class="〇〇 〇〇 〇〇">という部分が見つかります。- class=”…” の中にたくさん書かれている文字列の中から、
category-〇〇という形式のものを探します。これが目的のクラス名です！ (例：category-manual,category-5など) - このクラス名をコピーするか、メモ帳に貼り付けておきましょう。
ステップ2：【最重要】サイト全体の背景色設定をクリアする
次に、CSSを有効にするための最も重要な作業です。テーマのカスタマイザーで設定されているサイト全体の背景色を一旦リセットします。
- WordPressのダッシュボードから「外観」→「カスタマイズ」を開きます。
- メニューの中から「サイト全体設定」や「カラー設定」といった項目を探し、その中にある「背景色」の設定画面を開きます。（※テーマによってメニュー名は異なります）
- 現在設定されている色の横にある「クリア」または「デフォルト」ボタンを押し、色が未設定の状態にします。
- 画面上部の「公開」ボタンを押して保存します。
※この時点でサイトの背景が真っ白になっても慌てなくて大丈夫です。次のステップで色を再設定します。
ステップ3：【仕上げ】「追加CSS」で色を指定し直す
最後に、「追加CSS」機能を使って、サイト全体の背景色と、特定カテゴリーの背景色をまとめて設定します。
- 引き続きカスタマイザーの画面で、メニューから「追加CSS」をクリックします。
- 表示された入力欄に、以下のコードをすべてコピーして貼り付けてください。
/* ===== カテゴリーごとに背景色を変更 ===== */
/* 1. サイト全体の基本となる背景色 */
body {
/* ここにサイト全体の背景色を指定 */
background-color: #f5f5f5;
}
/* 2. 背景色を変えたいカテゴリーページ */
body.category-manual {
/* ここに特定カテゴリーの背景色を指定 */
background-color: #e3f2fd;
}- コードをあなたのサイトに合わせて書き換えます。
background-color: #f5f5f5;の部分を、あなたのサイト全体の基本にしたい背景色のカラーコードに変更します。body.category-manualのcategory-manualの部分を、ステップ1で調べたあなたのクラス名に書き換えます。background-color: #e3f2fd;の部分を、そのカテゴリーページに設定したい背景色のカラーコードに変更します。
- 右側のプレビュー画面で、サイト全体の背景色と、対象カテゴリーページの背景色が正しく変わっていることを確認できたら、「公開」ボタンを押して完了です！
応用編：複数のカテゴリーを同じ色にしたい場合
もし、複数のカテゴリーを同じ色にしたい場合は、body.クラス名 の部分をカンマ（,）で区切って並べればOKです。
/* 複数のカテゴリーを同じ背景色にする場合 */
body.category-manual,
body.category-review,
body.category-column {
background-color: #e3f2fd;
}まとめ
お疲れ様でした！一見難しそうに見えますが、やってみると意外と簡単だったのではないでしょうか。
今回のポイントは、「テーマの全体設定をクリアしてから、追加CSSで再設定する」という点です。
この方法を覚えれば、カテゴリーページだけでなく、特定の固定ページや投稿ページのデザインも自由に応用できるようになります。
ぜひ、あなたのブログのブランディングや回遊率アップに役立ててみてくださいね！
Webサイト制作でお困りですか？
私たちは、WordPressサイトの制作やカスタマイズも得意としています。
お困りの際は、お気軽にご相談ください。