SANGOをバージョンアップしたらCSSが全く効かなくなった話

WordPressテーマ「SANGO」をバージョンアップした直後、サイトのCSSがまったく効かなくなり、レイアウトが大きく崩れてしまったというご相談をいただきました。原因の切り分けから解決まで、手順として残しておきます。

起きていたこと（現象）

SANGOをバージョンアップした
直後からサイトのCSSが効かなくなり、表示が大きく崩れた
対策として「SANGO Gutenberg」プラグインの無効化はすでに完了していた
次に、キャッシュプラグイン「Autoptimize」のキャッシュ削除を試みたが、ボタンが反応しなかった

まず整理したこと（仮説）

考えられる原因を、次のように分けて考えました。

Autoptimizeの古いCSS/JSキャッシュが残っていて、新しいテーマのCSSと噛み合っていない
Autoptimizeの「キャッシュ削除」ボタン自体が、何らかの理由で正常に動作していない
キャッシュとは別に、SANGO本体側のCSS構造の変更と、Autoptimizeの最適化処理（連結・圧縮）が噛み合っていない

SANGOの公式リリースノートでも、アップデートに伴いCSSが調整されており、カスタマイズ内容によっては大きく表示が崩れる場合があると案内されています（出典は記事末尾）。そのため、まずは1・2の「キャッシュ起因」の可能性から確認することにしました。

確認した手順

手順1：キャッシュ削除ボタンが反応しないときの代替手段

「ボタンを押しても反応しない」場合の原因は、①ボタンがグレーアウトしている、②クリックしても画面が変わらない、③エラーが出る、のどれかで変わってきますが、いずれの場合でも使える代替手段があります。

Autoptimizeを一度「無効化→有効化」する プラグイン一覧から停止し、もう一度有効化するだけで、キャッシュファイルは自動的に破棄されます。ボタンを押すより確実で、最も手早い方法です。
設定画面の「変更を保存」を押し直す Autoptimizeは、中身を変更していなくても「設定を保存」を押すとキャッシュが再生成される仕様です。JS・CSS・HTMLの各タブのどこかで一度保存し直します。
サーバー側から直接キャッシュフォルダを削除する FTPやサーバーのファイルマネージャーが使える場合、wp-content/cache/autoptimize/ フォルダの中身（フォルダ自体は残す）を削除すると、管理画面のボタンに依存せず強制的にキャッシュをクリアできます。
ブラウザの開発者ツールでエラーを確認する ボタンが反応しない場合、テーマの更新でJavaScriptのどこかが壊れていて、キャッシュ削除のAjax通信自体がブロックされている可能性があります。ボタンを押した瞬間、F12（開発者ツール）の「Console」タブに赤いエラーが出ていないか確認します。
他のキャッシュ系プラグイン・サーバーキャッシュも確認する レンタルサーバー側のキャッシュ機能や、他のキャッシュ系プラグインを併用している場合、Autoptimize側だけクリアしても効果が出ないことがあります。契約しているサーバーの管理画面でもキャッシュクリアを行います。

手順2：キャッシュの状態を確認する

Autoptimizeのキャッシュ情報を確認したところ、「キャッシュ済みのスタイルとスクリプト：0個のファイル、合計0.00B」という表示でした。つまり、この時点ですでにキャッシュは空の状態です。ボタンの反応にかかわらず、結果的に「クリア済み」と同じ状態になっていたことになります。

手順3：ブラウザ側のキャッシュを疑う

キャッシュがすでに空でも、通常のブラウザには古いCSSがブラウザ側にキャッシュされたまま残っている可能性があります。そこで、

サイトのトップページをシークレットウィンドウ（プライベートブラウジング）で開く、または
通常のブラウザで Ctrl+Shift+R（強制リロード）を行う

を試しました。これでAutoptimizeがゼロから新しいCSS/JSキャッシュを作り直します。

ここで直っていれば、原因は「古いキャッシュが残っていたこと」で確定です
まだ崩れている場合は、キャッシュではなく、テーマ本体側のCSS構造の変更そのものが原因という可能性が高くなります

手順4：それでも直らない場合の確認ポイント

キャッシュが原因でない場合は、次の2点を確認します。

Autoptimizeの設定画面上部にある「CSSコードを最適化」「JSファイルを連結」のチェックボックスが、実際にオンになっているか
ブラウザの開発者ツール（F12）→「Network」タブでページを再読み込みし、CSSファイル（.cssで終わるもの）が赤字で404エラーになっていないか

今回は、Autoptimizeの**「CSSコードを最適化」のチェックを外す**ことで、レイアウトの崩れが解消しました。

真因

SANGOの大型アップデートでは、公式リリースノートでもCSSが調整されており、カスタマイズ内容によっては大きく崩れる場合があると案内されています。今回のケースでは、この本体側のCSS構造の変更に対して、Autoptimizeの「CSSコードを最適化」（連結・圧縮処理）が正しく処理しきれず、レイアウトを崩していた可能性が高いと考えています。

テーマの大型アップデート直後に、キャッシュ・最適化系プラグインの処理が追いつかず崩れる、というのはよくあるパターンだと思います。

運用の教訓

キャッシュ削除ボタンが反応しないときは、「プラグインの無効化→有効化」が一番早くて確実な代替手段になることが多い
「キャッシュ済み：0個」の表示が出ていれば、ボタンの反応にかかわらずキャッシュ自体はすでにクリアされている
キャッシュを疑うときは、必ずシークレットウィンドウか強制リロードで確認する。通常のブラウザだけで判断すると、ブラウザ側の古いキャッシュを見てしまうことがある
テーマの大型アップデート直後にレイアウトが崩れたら、キャッシュ系プラグインの「最適化（連結・圧縮）」機能を一時的にオフにしてみるのも有効な切り分け方法
最適化をオフにすると、CSSファイルの読み込みリクエスト数が増え、表示速度はわずかに落ちる。崩れの解消を優先しつつ、テーマ側が安定してから最適化を戻すかどうかを検討するとよい

この記事の著者

飯田市でホームページ制作・広告運用をサポート｜デザインスタジオiR

牧内理恵

まきうちりえ

詳しいプロフィール

プロフィール

飯田市在住、広告制作歴20年以上。これまで200名以上のクライアント様と向き合い、100件以上のサイト制作を手掛けてきたデザイナー兼エンジニアの牧内理恵です。御社の強みを引き出し、業績アップに繋がるWebサイト・ネットショップ・販促ツールをご提案します。拠点とする長野県内はもちろん、全国各地からのご依頼にも柔軟に対応しております。

「相談してよかった」と言っていただける、飯田下伊那地域のパートナーとして。

長野県飯田市を拠点に、ホームページ制作やECサイト構築、Web運用のトラブル解決を承っています。20年以上のキャリアで培った「伝わるデザイン」と「確かな技術」で、御社の業績アップを支えます。飯田・下伊那エリアはもちろん、全国からのオンライン相談も大歓迎です。

「ホームページを作りたい」「ホームページをリニューアルしたい」といったご依頼もお気軽にお声がけください。

まずは無料で相談してみる飯田市周辺の制作実績を見る

※強引な勧誘は一切ありませんので、安心してお悩みをお聞かせください。