【Cocoon】カスタマイズのCSSが反映されない時の原因と確認事項【備忘録】

Cocoonカスタマイズ

ブログのカスタマイズをしていて、CSSを追加したのにうまく反映されず困っていませんか?

「コピペでOK」のコードを使っているのに、なんでうまくいかないんだろう?

そんな時にチェックしてもらいたいことをまとめました。
実際にカスタマイズ初心者の私が悩んで、調べて、アドバイスをいただいて、学んだことです。

同じように悩んでいる方がこの記事にたどり着かれた時、解決のキッカケになれたら幸いです。

スポンサーリンク

まずは基本のチェック

\ 高確率で解決できる7つの方法 /
最低限のチェック項目
  • HTMLやCSSの記述に間違いがないか、よく確認する
    (CSSの検証ツールも活用)
  • ブラウザのキャッシュを削除してみる

デベロッパーツールなどで原因を特定して修正できれば良いのですが、私を含め「よくわからないから、できるだけコピペ可能コードを使わせてもらおう」というカスタマイズ初心者さんにとっては「まずそれの使い方を調べないと……」という、ちょっと気が重い展開ですね。

だけど原因不明は原因がないのではなく、どこかにちゃんと潜んでいます。
部分部分はコピペでも、より自分らしいブログに育てるため、もうひと踏ん張りしてみましょう。

\ 検索ボタンをクリック /
\ CSSの検証に便利なツールの情報など /

基本のチェックで解決できない場合はこの先に解決のヒントがあるかも

「Cocoon設定」の優先が原因の場合もあります

当ブログではサイドバーとフッターの両方に設置したタグクラウドに対する追加CSSで「サイドバーでは成功したのにフッターではうまくいかない」ということがあり、その原因は「Cocoon設定」での色指定が優先されていたからだと判明しました。

CSSの反映には優先順位があります

カスタマイズの方法に関しては「子テーマのstyle.cssにCSSを追加する方法」のみ紹介されている記事も多いですが、実際にはいくつかの方法があり、「Cocoon設定」が優先されることもあります。

同じ部分に対して複数のスタイルを指定している場合、優先順位の高い方が反映されるので注意が必要です。

Cocoonの場合のCSS優先順位
  1. WordPressのカスタマイザーで追加したCSS【最優先】
    (管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択して入力)
  2. 固定ページ・投稿ページ内の「カスタムCSS」に入力したCSS【優先】
    (そのページにのみ反映される)
  3. Cocoon設定【優先】
    (全体設定、ヘッダー設定、フッター設定で指定した色など)
  4. 子テーマのstyle.cssに追加したCSS
    (カスタマイズのため追加したCSSで、ブログ全体に反映される)
  5. 親テーマ・子テーマのスキン
    (Cocoon設定でスキンを選んでいる場合)
  6. 親テーマのCSS
    (触っちゃダメなやつ)

子テーマのstyle.cssに追加したCSSが最優先だと思い込んでたっ

CSSの追加コードにミスがない場合
「Cocoon設定」でこの指定をしていませんか?
  • 「全体設定」→サイトキーカラーサイトキーテキストカラー
    サイト全体のポイントとなる部分に適用される
    ※フッター設定で文字色を設定した場合、フッターエリアではそちらが優先される
  • 「フッター設定」→「フッター文字色
    フッターエリア全体の文字色に適用される
    ※フッター文字色を設定していない場合、サイトキーテキストカラーを設定している場合はそちらが適用される

Cocoon設定で色を指定していたから追加CSSの色が反映されなかったのかぁ

「Cocoon設定」の色指定が反映されるところ

カスタマイズ初心者の場合「Cocoon設定」で色を指定している方も多いのではないでしょうか。

全体設定

「Cocoon設定」の「全体設定」画面

「サイト全体のポイントとなる部分に適用」って説明があるけれど、具体的にどこのことなのか理解せずに設定しちゃってた……

「サイトキーカラー」が適用される主な場所
  • 見出しの色
  • ページネーションボタン
  • 関連記事の枠の色
  • ブログカードの枠の色
  • サイドバーのカテゴリなどにカーソルを合わせた時の背景色
  • タイムラインのポイント色(丸いところ)
「サイトキーテキストカラー」が適用される主な場所
  • サイドバーに設置したウィジェットのタイトルの文字色
  • フッター全体の文字色
    ※フッター設定で文字色を設定した場合はそちらが優先され
\ 詳しく解説されています /

フッター設定

「Cocoon設定」の「フッター設定」画面
「フッター文字色」が適用される場所
  • フッターに設置したウィジェットのタイトルの文字色
  • フッターに設置したウィジェットの文字色
    (「カスタムHTML」で色指定をしていないテキストを含む)
    ※設定しない場合、サイトキーテキストカラーが設定済であればそれが適用される

「Cocoon設定」の優先が原因だった場合の対処法

色味の問題については「Cocoon設定」の優先が原因だった場合、「サイトキーカラー」「サイトキーテキストカラー」「フッター文字色」をクリアすれば、子テーマのstyle.cssに追加したCSSでの色指定が反映されます。

その場合、「Cocoon設定」での色指定を解除された部分が別の色に置き換わり、過去記事の見た目にも影響が出る可能性がありますのでご留意ください。

「Cocoon設定」の色指定を残したまま対処したいという方は下記の方法を試してみてください(デベロッパーツールを扱えないと難しいかと思います)

Cocoon設定と併用できる解決方法
反映させたいCSSの優先順位を上げる方法
  • より優先順位の高いセレクタを記述する
    (デベロッパーツールで確認しながら「この部分のここに対して」を詳しく指定する)
  • WordPressのカスタマイザーでCSSを追加する
    (管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択して入力するか、ツールバーから「カスタマイズ」を選択して入力)
  • !importantというキーワードを記述して最優先にさせる
    (カスタマイズ内容の管理上、多用はおすすめされない)

カスタマイズに詳しいweb関連職の方の記事ではカスタマイザーでのCSSの追加や!importantを記述する方法はおすすめされていない(いろいろと理由があるようです)ので、当ブログでの対処としては「より優先順位の高いセレクタを記述する」方法をとっています。
(実際にその対処をした具体的なカスタマイズ例もまた別記事にしたいと思います)

\ 勉強させていただきました /

ややこしいけど、原因不明から原因判明になるだけでもスッキリ

固定ページのデザインが崩れた場合は「ブロックのグループ化」が重複していないかもチェック

当ブログはトップページを固定ページで作成しているのですが、レイアウトが崩れてしまった時の原因が編集画面上(Gutenbergエディタ)で設定した「ブロックのグループ化」の重複でした。

見出しやショートコードなど複数のブロックをグループ化したもの(自動でdiv括りになる)に対して「高度な設定」の中にある「追加CSSクラス」を入力して専用のCSSを追加していたのですが、すでにグループ化した部分の選択や判別が難しく2重になっていると気づくまで時間がかかりました。

この場合CSSに問題はなかったので、余分な「グループを解除」で解決できました

スポンサーリンク
スポンサーリンク

コメント

スポンサーリンク