SWELLのサイトで表示が崩れたときは、まず「いつから・どのページで・どの端末で」崩れるのかを確かめます。
崩れ方によって、キャッシュ、高速化の設定、プラグインの競合、更新の影響のどこから調べるかが変わるためです。
この記事は、SWELLでサイトを運用していて、原因の見当を自分でつけたい方に向けたものです。
自分で追加したCSSが効かない場合は、SWELLのCSSが反映されない原因と直し方で詳しく説明しています。
設定項目の名前は、SWELL 2.19.0に含まれる設定画面の定義と、SWELL公式マニュアルで確認しました（2026年10月15日時点）。
実際のサイトで崩れを再現して試した結果ではありません。
崩れ方から、最初に調べる場所を決める
次の表で、いまの崩れ方に近いものを探してください。
| 崩れ方 | 疑う範囲 | 最初の確認 |
|---|---|---|
| 全ページが急に崩れた | 直前の更新、キャッシュ | 何を更新したか、キャッシュの削除 |
| ログイン中は正常で、ログアウトすると崩れる | ページキャッシュ | キャッシュ系プラグインやサーバーのキャッシュ |
| 特定のページだけ崩れる | そのページのブロック、埋め込み、ページ単位のCSSやスクリプト | 崩れている部分のブロックを特定する |
| スマホだけ崩れる | 画面幅ごとのCSS、スマホ用のメニュー | 実機と、PCで幅を狭めた表示を比べる |
| 別のページへ移動したときだけ崩れ、再読み込みで直る | ページ遷移高速化（Pjax） | 高速化の種類を変えて比べる |
| 表示した直後は崩れ、数秒後や操作した後に整う | スクリプトの遅延読み込み | 遅延対象のキーワード |
| 960px前後の幅でヘッダーだけ崩れる | ヘッダーに並べた要素の幅 | ヘッダーの要素の数と長さ |
ヘッダーが特定の幅で崩れる場合は、960px付近のヘッダーの表示崩れ対策も参考になります。
設定を変える前に、記録とバックアップを残す
原因を探す途中で設定を何度も変えると、どの操作で直ったのかが分からなくなります。
最初に、次の内容をメモしておきます。
- 崩れているページのURL
- 端末、ブラウザー、画面の幅
- ログインしている状態か、ログアウトしている状態か
- 崩れ始めた日時と、その直前に行った作業（更新、プラグインの追加、設定の変更、CSSの追加など）
- 崩れている部分のスクリーンショット
設定やプラグインを変える前に、ファイルとデータベースのバックアップを取ります。
本番サイトで試すのが不安なら、サイトを複製したステージング環境で確かめる方法もあります。
確かめた内容を本番へ反映するときの注意は、ステージングから本番へ反映するときの注意点にまとめています。
キャッシュを内側から順に消す
設定が正しくても、古いキャッシュが表示されていて崩れて見えることがあります。
キャッシュはSWELL、プラグイン、サーバー、CDN、ブラウザーと何層にもなっていることがあるため、内側から順に消します。
- SWELLのキャッシュを消す。管理画面の「SWELL設定」の「リセット」タブにある「キャッシュを削除する」を押す
- ログイン中なら、画面上部の管理バーにある「SWELL設定」から「キャッシュクリア（コンテンツ）」を選んでも消せる
- キャッシュ系や高速化系のプラグインを使っているなら、そのプラグインのキャッシュを消す
- レンタルサーバーやCDNのキャッシュを使っているなら、その管理画面でキャッシュを消す
- シークレットウィンドウや別のブラウザーで、ログアウトした状態の表示を確かめる
SWELLのキャッシュは、ブラウザーではなくデータベースに保存される仕組みです（SWELL公式：キャッシュ機能について）。
公式マニュアルでは、テーマを更新したときにSWELLのキャッシュがいったんすべて削除されると説明されています。
ブログカードのキャッシュは別に保存されているため、ブログカードだけ表示がおかしいときは「キャッシュのクリア（ブログカード）」も使います。
キャッシュを消して直ったなら、原因はキャッシュに残っていた古い表示です。
同じことが何度も起きる場合は、ページキャッシュを使っているプラグインやサーバーの設定を見直します。
SWELLの高速化設定を1つずつ戻して比べる
「SWELL設定」の「高速化」タブには、CSSやスクリプトの読み込み方を変える設定があります。
表示を速くするための設定ですが、サイトの構成によっては一部の表示が崩れる原因になります。
1つだけ設定を戻して保存し、キャッシュを消してから表示を比べてください。
| 設定（SWELL 2.19.0の名称） | 崩れ方の例 | 確かめ方 |
|---|---|---|
| ファイルの読み込み：コンテンツに合わせて必要なCSSだけを読み込む | 一部のブロックや装飾にだけ見た目が付かない | 一時的にオフにして比べる |
| ファイルの読み込み：フッター付近のCSSを遅延読み込みさせる | ページの下のほうだけ崩れて見える | 一時的にオフにして比べる |
| 遅延読み込み機能：スクリプトを遅延読み込みさせる | スライダーや埋め込みが、しばらく表示されない | 遅延対象にするスクリプトのキーワードを見直す |
| 遅延読み込み機能：画像等のLazyload | 画像が表示されない、表示中に位置がずれる | 方式を変えて比べる |
| ページ遷移高速化：Pjaxによる遷移（非推奨） | 別のページへ移動した後だけ、表示やプラグインの機能が崩れる | 高速化の種類を「使用しない」か「Prefetch」にして比べる |
Pjaxは、別のページへ移動してもページ全体を読み込み直さない仕組みです。
SWELL公式は、プラグインなどで追加された機能がうまく動かない可能性があると案内しています（SWELL公式：ページ遷移高速化機能の使い方と注意点）。
SWELL 2.19.0の設定画面でも、Pjaxによる遷移には「非推奨」と書かれています。
特定のページだけで問題が出るなら、「Pjaxで遷移させないページのURL」にそのページを指定する方法もあります。
スクリプトの遅延読み込みについても、遅延させると正常に動かなくなるスクリプトがあると公式マニュアルに書かれています（SWELL公式：「スクリプトの遅延読み込み」機能の使い方）。
遅延対象に追加したキーワードを1つずつ外していくと、どのスクリプトが関係しているかを絞り込めます。
崩れている部分のCSSが読み込まれていないのか、読み込まれても別の指定に上書きされているのかは、ブラウザーの開発者ツールで確かめられます。
見方は、SWELLのCSSが反映されない原因と直し方の「検証ツール」の節で説明しています。
SWELLと役割が重なるプラグインを確認する
SWELLには、キャッシュや遅延読み込みなどの高速化機能が含まれています。
同じ役割のプラグインを併用すると、二重に処理されて表示や動作が崩れることがあります。
SWELL公式の推奨・非推奨プラグインのページでは、次のような例が挙げられています（SWELL公式：推奨プラグインと非推奨・不要・注意すべきプラグインについて、2026年3月31日更新）。
| 公式が挙げている例 | 公式の説明の要点 |
|---|---|
| Flying Scripts | スクリプトの遅延読み込みがSWELLの機能と重なる。iOSでリンクを1回押しても移動しない不具合が起きる可能性が高い |
| Autoptimize、Async JavaScript | 過去の報告から、不具合が起きる可能性が高い |
| Jetpack | 画像の遅延読み込みなどがSWELLと重なり、両方を有効にすると不具合が起きる |
| Lazy Loadなどの画像遅延読み込みプラグイン | SWELLの標準機能と重なっており、ほとんどの場合は不要 |
| WP Super Cache、W3 Total Cacheなどのキャッシュ系 | 仕組みを理解しないまま導入すると、変更が反映されない原因になりやすい |
使っているプラグインが表にあれば、そのプラグインの該当する機能を一時的に止めて表示を比べます。
表にないプラグインでも、CSSやJavaScriptを圧縮・結合・遅延させる機能があれば、同じように確かめます。
プラグインの選び方は、入れるべきWordPressプラグイン／入れてはいけないプラグインでも整理しています。
ほかのプラグインとの競合を切り分ける
高速化とは関係のないプラグインが原因のこともあります。
本番サイトでプラグインを停止すると、訪問者にも崩れた画面や止まった機能が見えてしまいます。
できれば、ステージング環境で次の順に確かめます。
- 停止する前に、有効になっているプラグインの一覧を記録する
- プラグインを1つ停止し、キャッシュを消してから崩れている部分を確認する
- 崩れが消えなければ、そのプラグインを有効に戻してから次のプラグインで同じことをする
- 崩れが消えたら、そのプラグインを有効に戻し、もう一度崩れることを確かめる
- 原因のプラグインが分かったら、ほかのプラグインがすべて元に戻っているかを一覧と照らし合わせる
プラグインの数が多い場合は、半分ずつ停止して範囲を狭めると早く絞り込めます。
原因のプラグインが分かったら、そのプラグインの設定や更新状況を確認し、作者のサポート窓口に相談します。
すべてのプラグインを止めても崩れる場合は、テーマや子テーマ、追加したCSSの側を調べます。
WordPress公式ディレクトリで配布されているHealth Check & Troubleshootingには、自分のログイン中の画面だけでプラグインを止めて確かめる「トラブルシューティングモード」があります（WordPress.org：Health Check & Troubleshooting）。
ただし2026年10月15日に確認した配布ページには、直近3つのメジャーリリースのWordPressでテストされていないという表示がありました。
使う場合は、その時点の配布ページの表示を確かめ、バックアップを取ってから判断してください。
ブラウザーの開発者ツールでエラーを見る
メニューが開かない、スライダーが動かないなど、動きのある部分が崩れるときは、JavaScriptのエラーが関係していることがあります。
WordPress公式の手順では、ChromeやEdgeならF12キーで開発者ツールを開き、「Console」タブでエラーを確認します（WordPress公式：Using Your Browser to Diagnose JavaScript Errors）。
エラーが出ていたら、メッセージの全文と、エラーが出たファイル名・行番号を記録します。
ファイルの場所に「/wp-content/plugins/」に続くフォルダー名があれば、そのプラグインが原因の候補になります。
同じページを別のブラウザーでも開き、同じエラーが出るかを確かめます。
画面が真っ白になる、「重大なエラー」と表示されるといった場合は、PHPのエラーの可能性があります。
その場合は、WordPressのエラーログの場所と出力方法を参考に、エラーログを確認してください。
更新した直後に崩れたとき
WordPress本体、SWELL、プラグインのどれを更新した後に崩れたのかを確かめます。
自動更新を有効にしていると、気付かないうちに更新されていることがあります。
プラグインやテーマの一覧で現在のバージョンを確かめ、配布元の変更履歴と照らし合わせます。
子テーマにSWELLのテンプレートファイルを複製して書き換えている場合は、とくに注意が必要です。
親テーマのHTMLの構造が更新で変わると、子テーマに残した古いテンプレートやCSSが合わなくなることがあるためです。
ステージング環境で、子テーマが上書きしているファイルを一時的に外して表示を比べると、原因かどうかを確かめられます。
WordPress 7.1とSWELLの対応状況は、WordPress 7.1の変更点とSWELLの対応にまとめています。
原因が分からず、サイトの運営に支障がある場合は、更新前のバックアップから戻す方法もあります。
データベースまで戻すと、バックアップ以降に投稿した記事や届いたコメントも消えるため、戻す範囲を決めてから作業してください。
直ったあとに確認すること
- 崩れていたページと、同じブロックや部品を使っているほかのページ
- PCとスマホ、ログイン中とログアウト中の表示
- 一時的に止めた高速化設定やプラグインを、必要なものだけ元に戻したか
- 元に戻した設定で、もう一度崩れが出ないか
- 原因と直した内容を、次の更新に備えて記録したか
よくある質問
SWELLのフォーラムで質問するときは、何を伝えればよいですか？
SWELL公式は、プラグインが動かないときの報告について、何が起こり、いまどういう状況になっているかを説明してほしいと案内しています。
この記事で残した記録（URL、端末、崩れ始めた日時、直前の作業、試した切り分けの結果）をそのまま伝えると、状況を共有しやすくなります。
キャッシュ系プラグインは止めたままでもよいですか？
SWELLには独自のキャッシュ機能があり、公式マニュアルでは、それをオンにするだけでも十分な表示速度が出せるという考えが示されています。
止めたままにするかは、表示速度を測って比べてから決めてください。
測り方は、サイトが重い原因を調べる方法で説明しています。
自分で切り分けるのが難しい場合は、WordPressの不具合対応サービスをご確認ください。
崩れ始めた日時と直前の作業が分かれば、調べる範囲を絞れます。
