WordPressテーマ「Cocoon」を使ってサイトデザインを調整していると、
「CSSを書いたのに何も変わらない」
「一度だけ反映されたのに、その後まったく効かない」
「背景やナビを透過したいだけなのに、なぜこんなに難しい？」
――そんな場面に何度も遭遇しました。
最初は自分のCSSの書き方が悪いのかと思い、セレクタを変え、!important を付け、キャッシュを疑い、それでも直らずに時間だけが溶けていく。Cocoonを触ったことがある人なら、一度は通る道だと思います。
この記事は、
- Cocoonで背景色・グラデーションが効かない
- ナビだけがどうしても透過しない
- スクロールすると見た目が変わる
- ロゴサイズがCSSで変更できない
といった 実際にハマった問題と、その切り分け・解決までの全過程 を、試したCSSコードそのままで記録したものです。
同じ沼にハマったとき、「あ、これだ」と思い出せる 自分用の備忘録 として、そしてこれからCocoonを触る人の 遠回りを減らすショートカット になればと思い、まとめました。
1. 背景色を変えたい → 変わらない
最初にやったのは、ごく基本的なこれ。
body {
background-color: #f5f5f5;
}
しかし Cocoon では 何も変わらない。
原因
Cocoon は body の内側に .site という白い板を敷いており、
背景はそちらで完全に覆われている。
解決
.site を透明にする必要がある。
body {
background-color: #f5f5f5;
}
.site {
background: transparent;
}
2. 背景画像・グラデーションも見えない
背景画像やグラデーションも同様に「効いてないように見える」。
切り分け用テスト
body {
background: linear-gradient(90deg, red, blue) !important;
}
.site {
background: transparent !important;
}
これで見えれば CSSは効いている。見えなければ キャッシュ。
3. 実際に使う背景グラデーション（薄グレー → 白）
最終的に落ち着いたのがこれ。
body {
background: linear-gradient(180deg, #f5f5f5, #ffffff);
}
.site {
background: transparent;
}
「気づくか気づかないか」レベルが、長く使える。
4. コンテンツ・サイドバーに影を付ける
背景をいじると、逆に中身が平坦に見える。
そこで影を追加。
.main,
.sidebar {
background: #fff;
box-shadow: 0 6px 20px rgba(120,120,120,0.2);
}
影は黒ではなく グレー＋透明度 が正解。
5. ロゴ画像サイズがCSSで変わらない問題
.site-logo img {
max-width: 150px;
}
……が効かない。
原因
Cocoonではロゴの img に別クラスが付くことが多い。
正解例
.site-logo-image {
width: 120px;
height: auto;
}
まず 検証ツールで class 名を確認する のが最短ルート。
6. ナビを透過したい → 透過しない
#navi {
background: transparent;
}
これでもダメ。
原因
.navi-inula::before疑似要素
どこか別の要素が塗っている。
強制透過セット（切り分け用）
#navi, #navi .navi-in, #navi ul, #navi li, #navi a {
background: transparent !important;
}
#navi::before, #navi::after,
#navi .navi-in::before, #navi .navi-in::after {
background: transparent !important;
opacity: 0 !important;
}
7. スクロールしたときだけナビの見た目が変わる
これは 追従ヘッダー（固定ヘッダー） が原因。
スクロール後、body に別クラスが付与され、
別CSSが当たる。
対策
.fixed-header #navi,
.fixed-header #navi .navi-in,
.is-fixed #navi,
.is-fixed #navi .navi-in {
background: transparent !important;
}
もしくは、Cocoon設定で 追従ヘッダー自体をOFF。
8. キャッシュという最大の敵
今回いちばん多かった原因。
- 一度だけ変わる
- その後何をしても変わらない
これは ほぼ100%キャッシュ。
最低限やること
- Ctrl + F5 / Cmd + Shift + R
- Cocoon設定 → 高速化 → CSS縮小/結合 OFF
- キャッシュ系プラグインの削除
- 可能なら「追加CSS」に書く
まとめ：Cocoonで詰まらないための考え方
- 「CSSが効かない」より「上に何か乗ってる」
.siteはほぼ必ず犯人- ナビは 内側・疑似要素・スクロール後 を疑う
- まずは派手な色で切り分ける
Cocoonは悪くない。
読みやすさ重視の設計なだけ。
構造が見えた瞬間、CSSはちゃんと従ってくれます。
同じ沼にハマった人の、少し先を照らせたら成功です。
コメント