SWELLで追加CSSを書いても色や余白が変わらないときは、保存されているか、ページに読み込まれているか、対象の要素に適用されているかの3段階に分けると原因を絞れます。
キャッシュの削除は有効な確認方法ですが、クラス名の間違いやCSSの優先順位までは直しません。この記事では、公開ページの状態を見ながら、変更する場所を判断する手順を説明します。
症状から最初に調べる場所を選ぶ
| 症状 | 確認する場所 |
|---|---|
| プレビューでは変わるが公開ページは変わらない | 保存状態、公開URL、SWELL・サーバー・CDNのキャッシュ |
| 一部の指定だけ効かない | セレクター、競合する宣言、CSSの構文 |
| PCでは変わるがスマホでは変わらない | メディアクエリ、モバイル用の別要素、別キャッシュ |
| 公開ページでは変わるが編集画面は変わらない | 公開側とエディター側のCSSの読み込み先 |
| 更新やテーマ切り替え後に戻った | 編集したファイル、現在有効なテーマ、対象要素の構造 |
まず対象ページのURL、変更したCSS、期待する見た目、PCとスマホの違いをメモします。「全部効かない」と「1つの要素だけ効かない」を分けておくと、不要な設定変更を減らせます。
1．保存先と、確認しているページを揃える
追加CSS、子テーマのstyle.css、プラグインのCSS欄など、どこへ記述したかを確認します。複数の場所に同じ指定がある場合は、それぞれを把握してから修正してください。
- 編集画面で保存・公開が完了しているか確認する。
- 対象の本番サイトを開いているか、ステージングや別ドメインと見比べる。
- 子テーマのファイルを編集したなら、その子テーマが現在有効か確認する。
- ページ単位のCSS欄なら、そのページにだけ適用される設定か確認する。
CSS専用の入力欄では、通常は<style>タグを付けずにCSSの宣言を書きます。HTMLを入力する欄とは扱いが異なるため、利用している機能の説明も確認してください。
親テーマのファイルを直接編集すると、テーマ更新で変更箇所が失われることがあります。記述場所を見直す際は、既存のコードを保存し、追加CSSや子テーマなど、更新時の扱いを把握できる場所へ整理します。
2．SWELLと、その外側のキャッシュを確認する
SWELLの公式マニュアルには、変更が反映されない場合にキャッシュクリアを試す案内があります。管理画面の「SWELL設定」にあるキャッシュ削除の操作を確認してください。項目の配置や表示名は導入版によって異なる場合があります。SWELL公式：キャッシュ機能について
SWELLのキャッシュを削除しても変わらなければ、次の順で範囲を広げます。
- 対象ページを再読み込みし、別のブラウザーでも確認する。
- 高速化プラグインでページキャッシュやCSS最適化を使っていないか確認する。
- レンタルサーバーのキャッシュ、CDNのキャッシュを確認する。
- 可能なら全削除ではなく、対象URLのキャッシュ削除から試す。
毎回すべての高速化機能を止める必要はありません。1つずつ変更し、「どの操作の後に表示が変わったか」を残します。ログイン中とログアウト中ではキャッシュの使われ方が異なる構成もあるので、最後は両方の状態で確認します。
3．検証ツールで「読み込み」と「適用」を分けて見る
Chromeなら、変更したい要素を右クリックして「検証」を開きます。Elementsパネルで対象のHTML要素を選び、Stylesに自分のCSSが表示されるかを調べます。最終的に使われている値はComputedでも確認できます。Chrome公式：CSS機能リファレンス
| 検証ツールの状態 | 考えられること | 次の確認 |
|---|---|---|
| 自分のルールが見つからない | CSS未読み込み、対象要素や条件の不一致 | CSS本文に記述があるか、クラス名が一致するか |
| 宣言に取り消し線がある | 別の宣言が優先されている可能性 | 採用された宣言の場所と条件 |
| 宣言が無効と表示される | プロパティ名・値・構文の問題 | スペル、単位、括弧、セミコロン |
| 値は適用されているのに見た目が変わらない | 見えている部分を別の要素が描画している可能性 | 子要素、疑似要素、背景や余白の担当要素 |
検証ツール上で値を書き換えて見た目が変わっても、それは通常、そのブラウザー内の一時的な変更です。正しい指定が分かったら、元のCSSの保存先へ反映して再読み込みします。
4．セレクターと優先順位を確認する
たとえばsample-boxという独自クラスを付けたブロックだけを変更するなら、次のように範囲を限定できます。これは説明用のクラス名で、SWELL固有のクラスではありません。
.sample-box {
background-color: #eef6fa;
padding: 24px;
}対象要素にsample-boxが付いていなければ、このCSSは効きません。ブロックの追加CSSクラス欄には通常sample-box、CSS側には先頭にドットを付けた.sample-boxを使います。
CSSは単純に「下に書けば必ず勝つ」という仕組みではありません。同じ優先条件の中では詳細度や記述順が関係し、重要度やカスケードレイヤーなどの条件も影響します。競合するルールが分からないまま!importantを足し続けると、後から修正しにくくなります。まず検証ツールで採用された宣言を確認しましょう。MDN：CSSの詳細度
5．スマホだけ効かないときは、幅とHTMLを見比べる
PCとスマホでは、同じように見えるメニューでも別のHTMLが使われている場合があります。PCで調べたクラス名を、そのままスマホ側に当てはめないでください。
メディアクエリを使っているなら、対象の画面幅が条件に入っているかも確認します。次は説明用に767px以下へ限定した例で、SWELLの標準ブレークポイントを示すものではありません。
@media (max-width: 767px) {
.sample-box {
padding: 16px;
}
}パソコンの画面を狭くする確認に加え、実際のスマートフォンでも対象ページを開きます。横向き、メニュー展開時など、問題が起きた状態も揃えて見比べます。
直った後に残す確認項目
- 対象ページだけでなく、同じ部品を使うページも確認した。
- PC・スマホ、ログイン・ログアウトで見た目を確認した。
- 一時的に停止した高速化機能を戻して再確認した。
- 検証用のCSSや不要になった重複指定を整理した。
- 変更した場所と、元に戻すためのコードを記録した。
よくある質問
編集画面だけ見た目が違うのは不具合ですか？
公開ページ用のCSSが、エディターにも同じように読み込まれるとは限りません。まず公開側が意図どおりかを確認し、編集画面にも必要な場合はエディターへCSSを反映する方法を別に検討します。
キャッシュを削除しても直らなければテーマの不具合ですか？
まだ断定できません。CSSが読み込まれているか、セレクターが一致しているか、別の宣言が優先されていないかを確認します。相談時は対象URLと、追加したCSSの最小限の部分を揃えると状況を共有しやすくなります。
設定やCSSの調査が難しい場合は、WordPressの不具合対応サービスをご確認ください。変更箇所と発生条件が分かれば、確認する範囲を絞れます。
