SWELLで追加CSSに書いたのに、デザインが変わらない。キャッシュを消しても直らない場合、多くは「後から読み込まれる別のCSSに上書きされている」か「セレクタの強さ（詳細度）で負けている」のどちらかです。
本記事では、SWELLで作っている株式会社アマノートのサイトで実際に確かめたCSSの読み込み順と、追加CSSが効かなかった事例をもとに、確認する順番を整理します。
- SWELLでCSSを書ける主な場所
- 子テーマ・追加CSS・投稿別カスタムCSSが読み込まれる順番
- 追加CSSが反映されないときに確認する順番
- 詳細度や!importantで負けていたときの直し方
SWELLでCSSを書ける主な場所
SWELLのサイトでCSSを書く場所は、主に次の4つです。
| 場所 | 効く範囲 | 向いている用途 |
|---|---|---|
| 子テーマの style.css | サイト全体 | テーマ更新の影響を受けたくない全体の調整 |
| カスタマイザーの「追加CSS」 | サイト全体 | 管理画面から手早く足す全体の調整 |
| 投稿・固定ページの「カスタムCSS & JS」 | そのページだけ | LPなど、1ページだけの意匠 |
ページ本文内の <style>（カスタムHTMLブロック） | そのページ（またはブログパーツの呼び出し先） | ブロックやパーツに閉じた装飾 |
同じ要素に複数の場所から指定がある場合、どれが勝つかは「読み込み順」と「詳細度」で決まります。
SWELLのCSSの読み込み順を実際のページで確かめた
当社のサービス紹介ページ（SWELL使用）のHTMLを取得し、それぞれのCSSが出力される位置を調べると、<head> 内の順番は次のとおりでした。
| 順番 | 出力されるもの | HTML上の目印 |
|---|---|---|
| 1 | SWELL本体のCSS | swell/build/css/main.css |
| 2 | 子テーマの style.css | swell_child/style.css |
| 3 | カスタマイザーの追加CSS | <style id="wp-custom-css"> |
| 4 | 投稿・固定ページのカスタムCSS | <style id="swell_custom_css"> |
CSSは、詳細度が同じなら後から読み込まれたものが勝ちます。つまり、同じセレクタで指定した場合は「投稿別カスタムCSS ＞ 追加CSS ＞ 子テーマ」の順で優先されます。
よく「追加CSSが最優先」と説明されますが、それは子テーマのCSSと比べた場合の話です。ページごとのカスタムCSSは、追加CSSよりさらに後に出力されます。
自分のサイトで順番を確かめる方法
ブラウザでページを開き、ページのソースを表示して wp-custom-css と swell_custom_css を検索します。先に見つかったほうが先に読み込まれています。プラグインやテーマの設定によって順番が変わる可能性もあるため、一度は自分のサイトで確認しておくと安心です。
SWELLで追加CSSが反映されないときに確認する順番
当社では、次の順番で原因を切り分けています。
- キャッシュが残っていないか
- そのページに投稿別のカスタムCSSが入っていないか
- セレクタの詳細度で負けていないか
- !important 同士でぶつかっていないか
- 記述ミスがないか
キャッシュが残っていないか
キャッシュ系のプラグインやサーバーのキャッシュが有効だと、変更前のCSSが表示され続けます。まずはブラウザのシークレットウィンドウで表示し、それでも変わらなければキャッシュを削除します。
そのページに投稿別のカスタムCSSが入っていないか
当社で実際にあったのが、このケースです。サイト全体の追加CSSでボタンや見出しの色を直したのに、一部のLPだけ変わりませんでした。原因は、LP側の投稿別カスタムCSSが同じ要素に色を指定していたことです。前述のとおり、投稿別カスタムCSSは追加CSSより後に読み込まれるため、同じ強さの指定なら負けてしまいます。
特定のページだけ反映されないときは、そのページの編集画面を開き、カスタムCSSの欄に同じ要素への指定がないかを確認してください。
セレクタの詳細度で負けていないか
後から読み込まれるCSSでも、セレクタの詳細度が低ければ負けます。SWELLの見出しや本文のスタイルは .post_content h2 のように本文のクラスを含むセレクタで指定されていることが多く、h2 だけの指定では上書きできません。
開発者ツールで対象の要素を選ぶと、適用されているCSSと、打ち消し線の付いた負けているCSSが並んで表示されます。勝っている行のセレクタを確認し、同じかそれ以上の強さで書き直します。
!important 同士でぶつかっていないか
両方に !important が付いている場合は、あらためて詳細度で比べ、同じなら後から読み込まれたほうが勝ちます。
当社では、追加CSSに .post_content .is-style-section_ttl + p:not(.has-border):not([class*="is-style-"]) という強いセレクタと !important でリード文を中央に寄せる指定があり、ページ側で左寄せにしようとしても効きませんでした。ページ側でも同じ形のセレクタで書き直すと、読み込み順の差でページ側が勝ち、左寄せが反映されました。
記述ミスがないか
閉じ括弧 } の抜けや、全角スペースが混ざっていると、その行以降のCSSがまとめて無効になることがあります。直前に足した部分から順に見直します。
SWELLの追加CSSを管理するときの注意
追加CSSは全文を貼り替えない
追加CSSを手元のファイルで管理している場合、手元の版と本番の版がずれていることがあります。当社でも、管理画面から直接追記された分が手元のファイルに入っていなかったことがありました。全文を貼り替えると、その追記が消えてしまいます。修正は追記で行い、貼り替える前には必ず本番の内容と見比べてください。
ページ専用の意匠は投稿別カスタムCSSに寄せる
LPのように1ページだけの装飾をサイト全体の追加CSSに書くと、他のページに思わぬ影響が出ます。当社では、サイト全体に効かせたい調整は追加CSS、ページ専用の意匠は投稿別カスタムCSSと、書く場所を決めています。
SWELLのCSSに関するよくある質問
子テーマの style.css と追加CSS、どちらに書くべきですか？
どちらもサイト全体に効きます。コードを版管理したい場合は子テーマ、管理画面から手早く足したい場合は追加CSSが向いています。同じ要素への指定を両方に分散させないことが大切です。
ブログパーツの中に書いたCSSはどう効きますか？
ブログパーツの本文に書いた <style> は、パーツを呼び出したページの本文内に出力されます。クラス名にパーツ専用の接頭辞を付けておくと、テーマのCSSとぶつかりにくくなります。詳しくはSWELLのブログパーツでCTAを全ページに置く方法で解説しています。
まとめ：SWELLでCSSが効かないときは、順番と強さを確かめる
- 当社のSWELLサイトでは、子テーマ→追加CSS→投稿別カスタムCSSの順に読み込まれていた
- 同じ強さなら後から読み込まれたものが勝つため、投稿別カスタムCSSが追加CSSより優先される
- 反映されないときは、キャッシュ→投稿別CSS→詳細度→!important→記述ミスの順に確認する
- 追加CSSは全文を貼り替えず、追記で修正する
株式会社アマノートは、SWELLなどの既存テーマを使ったサイト制作と、公開後の改善を支援しています。テーマのCSSとぶつからない設計や、ページごとの意匠の管理方法も含めてご相談いただけます。詳しくはWordPressサイト制作のページをご覧ください。
