PR

Cocoonの見出しが白文字になるときの直し方｜追加CSSをDevToolsで確認

Cocoonの白い見出し文字を濃い文字へ直す前後比較のイラスト ブログ運営
記事内に広告が含まれています。

CocoonのH2を透明背景に変えたいのに、文字色が白のまま残る。この場合、問題は「白文字を使ったこと」ではなく、複数のCSSが別々のプロパティを上書きしていることです。

Unplifeの公開ページでは、Cocoonの設定から生成された.article h2のルールにより、H2へ次の値が指定されていました。

color: rgb(255, 255, 255)
background-color: rgb(154, 107, 30)

この配色だけなら真鍮色の背景に白文字なので読めます。しかし、独自CSSで背景を透明にするなら、文字色も同時に指定しなければなりません。CSSはプロパティごとに勝ち負けが決まるからです。

この記事では、DevToolsで実際に勝っているCSSを調べ、投稿ページのH2だけを必要最小限の追加CSSで直すところまで説明します。テーマファイルは直接編集しません。いつでも元へ戻せるよう、変更前のCSSを保存してから作業します。

先に結論：背景と文字色を同時に指定する

まず試すコードは、対象を個別投稿の本文に限定し、H2の文字色と背景色だけを指定します。

/* 個別投稿本文のH2だけを修正 */
body.single-post #main .article h2 {
  color: #1a1917;
  background-color: transparent;
}

borderやpaddingまで変えるコードは、白文字を直すための最小修正ではありません。見出しデザインも変えたい場合だけ、後述の任意コードを使います。

サイト内のすべてのH2へ無差別に当てると、固定ページやサイドバーまで変わります。色や罫線は調整できますが、文字色と背景色は必ず一組で確認します。

検証した環境と、確認できた競合

今回の確認条件は次の通りです。

項目内容
確認日2026年10月4日
WordPress7.1.2
テーマCocoon 2.9.0.1（親テーマ。Cocoon Childを使用）
対象unplife.comの個別投稿ページ
確認方法Chrome DevToolsのStyles・Computed

確認時、H2にはCocoonの設定から生成された.article h2のルールが当たり、Computedでは背景がrgb(154, 107, 30)、文字がrgb(255, 255, 255)になっていました。この配色だけなら、真鍮色の背景に白文字なので読めます。

一方、変更前の独自CSSには.article h2 { background: transparent; }があり、文字色は明示されていませんでした。このように背景と文字を別のルールへ任せると、読み込み順や詳細度が変わったときに「透明背景に白文字」という組み合わせが生まれます。本記事では、過去の崩れた状態を再現値として断定せず、現在確認できる競合と修正後の値を示します。

最終修正後のH2は、Computedで次の値になりました。

color: rgb(26, 25, 23)
background-color: transparent
border-left: 3px solid rgb(154, 107, 30)

見た目で読めることだけでなく、ブラウザが最終的に採用した値まで確認しています。

DevToolsで、どのCSSが勝っているか調べる

追加CSSを何度も足す前に、まず原因を特定します。Chromeでは次の順で確認できます。

  1. ログアウト状態で、問題が出ている公開記事を開く
  2. 読めない見出しを右クリックし、「検証」を選ぶ
  3. Elementsで選択された要素が<h2>または<h3>であることを確認する
  4. Stylesでcolor、background、background-color、borderを探す
  5. 取り消し線のない宣言と、そのセレクタ・CSSファイル名を控える
  6. Computedでcolor、background-color、border-leftの最終値を見る

Stylesの取り消し線は、その宣言が最終値として負けた印です。Computedでは継承や上書き後の値を確認できます。さらにデバイスツールバーをスマートフォン幅にし、メディアクエリで色が戻らないかも見ます。

WordPressの追加CSSへ反映する

作業前に追加CSSの全文を選択してコピーし、additional-css-2026-10-04.txtのような日付入りファイルへ保存します。一部だけではなく、変更前の全文を残してください。そのうえで、変更箇所の先頭へ日付と目的をコメントで残します。

Cocoonで従来のカスタマイザーを使える場合は、管理画面から「外観」→「カスタマイズ」→「追加CSS」を開きます。WordPress公式ドキュメントでは、カスタマイザーの変更は公開前にプレビューでき、追加CSSは現在のテーマのCSSを上書きするための項目と説明されています。

追加CSSの末尾へ、最小修正コードを貼り付けます。

/* 2026-10-04: 個別投稿本文のH2を読みやすい配色へ固定 */
body.single-post #main .article h2 {
  color: #1a1917;
  background-color: transparent;
}

プレビューで問題の記事へ移動し、H2を確認します。意図した表示になっても、すぐ公開せず次の箇所も見ます。

  • 長い見出しが2行以上になった箇所
  • リンクを含む見出し
  • PC、タブレット、スマートフォン幅
  • トップページ、固定ページ、サイドバー
  • ダークモードや独自スキンを使っている場合の表示

問題がなければ追加CSSを公開し、使用中のキャッシュを削除してからログアウト状態で再読み込みします。

Unplifeと同じ装飾にする任意コード

Unplifeでは白文字の修正と同時に、H2・H3の装飾も統一しました。次は不具合修正の最小コードではなく、サイト独自のデザイン変更です。既存の罫線や余白を消すため、そのまま貼らず、必要な宣言だけ採用してください。

/* Unplifeの投稿本文用デザイン。テーマ側の装飾も明示的に置き換える */
body.single-post #main .article h2 {
  padding: .12em 0 .18em .8em !important;
  color: #1a1917 !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 3px solid #9a6b1e !important;
  box-shadow: none !important;
}

body.single-post #main .article h3 {
  padding: 0 0 .45em !important;
  color: #1a1917 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #e7e3db !important;
  box-shadow: none !important;
}

なお、ブロックテーマではカスタマイザーが表示されないことがあります。WordPress公式ドキュメントも、対応するブロックテーマではカスタマイザーが隠れる場合があると説明しています。その場合はサイトエディターの「スタイル」にある追加CSSなど、現在のテーマが案内する編集箇所を使います。本記事の検証対象はCocoonです。

なぜセレクタを長くしたのか

CSSで宣言が競合すると、出所、重要度、詳細度、記述順などから採用値が決まります。今回のセレクタは、対象範囲の限定と詳細度の確保を兼ねています。

body.single-post #main .article h2

body.single-postは個別投稿、#mainはメイン領域、.articleは本文、h2は第2見出しを示します。単なるh2より対象が明確です。ただし、セレクタは長ければよいわけではありません。MDNも詳細度を高くしすぎないことを勧めています。実際の競合を確認し、必要な範囲まで絞ります。

!importantは常用しない

今回確認できた、Cocoonの設定から生成された.article h2は通常宣言です。したがって、最小修正コードは詳細度の高いセレクタだけで勝てるため、!importantを付けません。

Unplifeの任意コードでは、テーマや設定変更後も装飾一式を固定する目的で!importantを使っています。これはサイト運用上の選択であり、白文字を直すための必須条件ではありません。通常の宣言より優先され、増やすほど競合を追いにくくなるため常用はしません。

使う前に、セレクタの一致、CSSの文法、キャッシュ、後から読み込まれる宣言を確認します。通常の詳細度と記述順で直せるなら外し、必要な場合も個別投稿本文のcolor、background、borderだけに絞ります。

反映されないときの確認順

CSSを追加しても変わらないときは、次の順で切り分けます。

  1. カスタマイザーで「公開」まで完了したか
  2. ブラウザ、プラグイン、サーバー、CDNのうち使用中のキャッシュが残っていないか
  3. 対象のH2が実際に#main .article内にあるか
  4. Stylesで自分の宣言に取り消し線が付き、別の宣言が勝っていないか
  5. 閉じ波括弧}の不足など、追加CSSの構文が壊れていないか

強いセレクタをすぐ重ねず、テーマ設定やスキン側で同じ色を指定していないかも確認します。

元の表示へ戻す方法

追加CSSでの変更は、テーマファイルを直接編集するより戻しやすいのが利点です。

  1. 「外観」→「カスタマイズ」→「追加CSS」を開く
  2. 2026-10-04: 個別投稿本文のH2というコメントから、今回追加したブロックだけを削除する
  3. プレビューでCocoon本来の見出しへ戻ったことを確認する
  4. 公開する
  5. 使用中のキャッシュを削除し、ログアウト状態で再確認する

別の崩れ方をしたら、作業前に保存した追加CSSへ戻します。以前からあるルールまでまとめて消してはいけません。テーマファイルの直接編集は更新で失われる場合があるため、本記事では使いません。

この方法の限界

このコードは、Cocoon 2.9.0.1とCocoon Childを使うUnplifeで確認したHTML構造に合わせています。すべてのCocoonサイトへ同じまま使える保証はありません。

  • Cocoonのスキンが別のルールを追加している
  • 子テーマに独自の見出しCSSがある
  • 投稿本文のクラス構造が異なる
  • ブロック単位でインラインスタイルを指定している
  • ダークモードで別の文字色が必要になる

これらの環境では、DevToolsで実際の要素とComputedを見て調整します。背景が濃いサイトに#1a1917をそのまま使うと、今度は黒い文字が読めません。今回直すのは表示上の競合であり、見出し階層などHTML構造の問題は別に直す必要があります。

修正後の確認表

確認対象期待する状態
H2の文字色ページ背景と区別できる濃い色
H2の背景透明
H2の左罫線任意コードを使った場合だけ、意図した色と太さで表示
H3任意コードを使った場合だけ、文字色と下罫線が意図どおり
PC・モバイル長い見出しでも文字が欠けない
トップ・固定ページ意図しない変更がない
Computedcolor、background-color、borderが指定値
キャッシュ削除後ログアウト状態でも同じ表示

見出しが消えたら、コードを足す前にComputedを見る。そこで文字色と背景色の組み合わせを確認すれば、修正範囲を必要最小限にできます。

サイトの見た目を整えた後にURLも見直すなら、WordPressの日本語URLを英語へ変更する方法で、公開前後に分けた安全な変更手順をまとめています。

参考資料

更新履歴

  • 2026-10-04: 初稿作成。Cocoonの公開ページで確認した見出しの配色競合と、修正後のComputed値を反映
タイトルとURLをコピーしました