ブログのカスタマイズをしていて、CSSを追加したのにうまく反映されず困っていませんか？
「コピペでOK」のコードを使っているのに、なんでうまくいかないんだろう？
そんな時にチェックしてもらいたいことをまとめました。
実際にカスタマイズ初心者の私が悩んで、調べて、アドバイスをいただいて、学んだことです。
同じように悩んでいる方がこの記事にたどり着かれた時、解決のキッカケになれたら幸いです。
まずは基本のチェック
デベロッパーツールなどで原因を特定して修正できれば良いのですが、私を含め「よくわからないから、できるだけコピペ可能コードを使わせてもらおう」というカスタマイズ初心者さんにとっては「まずそれの使い方を調べないと……」という、ちょっと気が重い展開ですね。
だけど原因不明は原因がないのではなく、どこかにちゃんと潜んでいます。
部分部分はコピペでも、より自分らしいブログに育てるため、もうひと踏ん張りしてみましょう。
基本のチェックで解決できない場合はこの先に解決のヒントがあるかも
「Cocoon設定」の優先が原因の場合もあります
当ブログではサイドバーとフッターの両方に設置したタグクラウドに対する追加CSSで「サイドバーでは成功したのにフッターではうまくいかない」ということがあり、その原因は「Cocoon設定」での色指定が優先されていたからだと判明しました。
CSSの反映には優先順位があります
カスタマイズの方法に関しては「子テーマのstyle.cssにCSSを追加する方法」のみ紹介されている記事も多いですが、実際にはいくつかの方法があり、「Cocoon設定」が優先されることもあります。
同じ部分に対して複数のスタイルを指定している場合、優先順位の高い方が反映されるので注意が必要です。
- WordPressのカスタマイザーで追加したCSS【最優先】
（管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択して入力） - 固定ページ・投稿ページ内の「カスタムCSS」に入力したCSS【優先】
（そのページにのみ反映される） - Cocoon設定【優先】
（全体設定、ヘッダー設定、フッター設定で指定した色など） - 子テーマのstyle.cssに追加したCSS
（カスタマイズのため追加したCSSで、ブログ全体に反映される） - 親テーマ・子テーマのスキン
（Cocoon設定でスキンを選んでいる場合） - 親テーマのCSS
（触っちゃダメなやつ）
子テーマのstyle.cssに追加したCSSが最優先だと思い込んでたっ
Cocoon設定で色を指定していたから追加CSSの色が反映されなかったのかぁ
「Cocoon設定」の色指定が反映されるところ
カスタマイズ初心者の場合「Cocoon設定」で色を指定している方も多いのではないでしょうか。
全体設定
「サイト全体のポイントとなる部分に適用」って説明があるけれど、具体的にどこのことなのか理解せずに設定しちゃってた……
フッター設定
「Cocoon設定」の優先が原因だった場合の対処法
色味の問題については「Cocoon設定」の優先が原因だった場合、「サイトキーカラー」「サイトキーテキストカラー」「フッター文字色」をクリアすれば、子テーマのstyle.cssに追加したCSSでの色指定が反映されます。
その場合、「Cocoon設定」での色指定を解除された部分が別の色に置き換わり、過去記事の見た目にも影響が出る可能性がありますのでご留意ください。
「Cocoon設定」の色指定を残したまま対処したいという方は下記の方法を試してみてください（デベロッパーツールを扱えないと難しいかと思います）
カスタマイズに詳しいweb関連職の方の記事ではカスタマイザーでのCSSの追加や!importantを記述する方法はおすすめされていない（いろいろと理由があるようです）ので、当ブログでの対処としては「より優先順位の高いセレクタを記述する」方法をとっています。
（実際にその対処をした具体的なカスタマイズ例もまた別記事にしたいと思います）
ややこしいけど、原因不明から原因判明になるだけでもスッキリ
固定ページのデザインが崩れた場合は「ブロックのグループ化」が重複していないかもチェック
当ブログはトップページを固定ページで作成しているのですが、レイアウトが崩れてしまった時の原因が編集画面上（Gutenbergエディタ）で設定した「ブロックのグループ化」の重複でした。
見出しやショートコードなど複数のブロックをグループ化したもの（自動でdiv括りになる）に対して「高度な設定」の中にある「追加CSSクラス」を入力して専用のCSSを追加していたのですが、すでにグループ化した部分の選択や判別が難しく2重になっていると気づくまで時間がかかりました。
この場合CSSに問題はなかったので、余分な「グループを解除」で解決できました
コメント