こんにちは、マサシです。
WordPressのサイトを作っていたとき、Cocoonの子テーマの style.css にCSSを書いたのに、何度リロードしても見た目が変わらないことがありました。
書く場所は合ってる。
スペルも合ってる。
なのに変わらない。
当時の僕はよく分からないまま !important を付けて解決した気になっていたんですが、正直モヤモヤが残っていました。
で、今回あらためて検証用のWordPressを立てて、最新のCocoonで「何が起きているのか」を実際に確かめてみました。
結論から言うと、**原因の9割はCSSの読み込み順ではなく、セレクタの書き方（詳細度）**です。
再現してみる：たしかに「効かない」
検証環境はWordPress最新版＋Cocoon 2.9.3系＋スキン適用ありです。
子テーマの style.css に、見出しの背景色を変えるCSSを書いてみます。
書く場所はWordPress管理画面の「外観 → テーマファイルエディター」で、テーマの選択が「Cocoon Child」になっていることを確認してから。
h2 {
background-color: #d6f0f7;
border-left: 6px solid #2a9db5;
}
保存してブログ記事を開くと——変わりません。
見出しはスキンの色のままです。
はい、当時のモヤモヤがそのまま再現されました。
原因はCSSの「詳細度」
なぜ効かないのか。
CSSには、同じ要素に複数のルールが当たったとき**「より具体的に指定したほうが勝つ」**というルールがあります。
これが詳細度（specificity）です。
- 自分が書いたのは
h2 { ... }——「h2タグ全部」というざっくりした指定 - Cocoonのスキンが持っているのは
.article h2 { ... }——「記事エリアの中のh2」という一段具体的な指定
この勝負、読み込み順に関係なく具体的なほうが勝ちます。
だから子テーマのCSSがあとから読み込まれていても、ざっくり指定の h2 は負けるんです。
えっ、あとから読んだCSSが勝つんじゃないんですか？
「あとから勝ち」が効くのは、詳細度が同点のときだけなんだ。まず詳細度で勝負して、引き分けなら後勝ち。この順番を知らないと今回みたいにハマるよ。
ちなみに今回検証していて分かったんですが、現行のCocoonは子テーマの style.css を親テーマよりもスキンよりもあとに読み込んでいました。
つまり読み込み順では、子テーマはちゃんと優遇されています。
それでも効かないのは、順番ではなく詳細度の問題だから、ということです。
直し方：相手と同じ詳細度で書く
やることはシンプルで、Cocoon側と同じ形のセレクタで書くだけです。
.article h2 {
background-color: #d6f0f7;
border-left: 6px solid #2a9db5;
}
.article は、Cocoonが記事本文を囲んでいるクラスです。
これで詳細度が同点になり、あとから読み込まれる子テーマが勝ちます。
保存してリロードすると、今度はちゃんと変わりました。
!important は使っていません。
それでも効かないときのチェックリスト
セレクタを直しても変わらないときは、上から順に確認してみてください。
- ブラウザのキャッシュ——スーパーリロード（WindowsはCtrl+F5、MacはCmd+Shift+R）で古いCSSを捨てる。実はこれが一番多いです
- Cocoonの高速化設定——「Cocoon設定 → 高速化」でCSS縮小化がONだと、CSSが1つに結合されて出力されます。挙動が怪しいときは一度OFFにして切り分ける
- 相手のセレクタを実際に見る——ページ上で右クリック →「検証」で見出しを選ぶと、Stylesの欄で「どのルールが勝って、どれが打ち消し線で負けているか」が見えます。負けている自分のCSSに打ち消し線が付いていたら詳細度負けです
- 書いた場所——親テーマ（Cocoon）側の
style.cssに書いていないか。親テーマはアップデートで上書きされるので、書くのは必ず子テーマ側です
!importantはいつ使うか
最後の手段としては、ありです。
.article h2 {
background-color: #d6f0f7 !important;
}
スキンの中には自分のルールに !important を付けているものがあって、そうなると通常のセレクタでは勝てません。
また、Cocoonはバージョンや設定の組み合わせで読み込み順が変わることもあるので、どうしても効かない場面は残ります。
ただ、最初から !important に頼ると、あとで「その指定をさらに上書きしたい」となったときに !important の重ね掛け合戦になって、CSSがどんどん壊れやすくなります。
順番としては、セレクタを合わせる → ダメなら検証ツールで相手を確認する → それでもダメなら !important。
昔の自分に教えてあげたい順番です。
まとめ
Cocoonの子テーマでCSSが効かないときは、読み込み順やテーマの不具合を疑う前に、まずセレクタを見る。
h2ではなく.article h2のように、Cocoon側と同じ形で書く- 変わらなければスーパーリロード
- 検証ツールで「誰に負けているか」を確認する
!importantは最後の手段
同じ画面の前で「なんで変わらないの……」となっている人に届けば、うれしいです。
※この記事はWordPress＋Cocoon 2.9.3系（スキン適用あり）の検証環境で実際に再現・確認した内容です。Cocoonはアップデートが活発なテーマなので、挙動が違うときは公式サイトの情報もあわせて確認してくださいね。