本記事は以下を目的としております。
Cocoonテーマを利用し、スマホで見る時に限り表示がおかしくなる方へ。CDNの接続をやり直し、CSSの表示を改善する方法をお届けします。
ブログがスマホで見るとおかしくなる
WordPressをいじり始めて1週間が経ちました。Cocoonのテーマを導入し、スキンを複数回変更したところ、スマホでアクセスした時のみ変更したスキンが混ざって表示されるバグと遭遇しました。解決までに4,5日かかったので、改善方法を紹介します。
Cocoonスキンの「Bizarre-food（ピンクワイン）」と「いつもの深海」が混ざって表示されています。スマホでアクセスするとこのように表示されます。しかし、PCのGoogle Chromeのスマートフォン表示モードで確認すると正常に表示されます。
LiteSpeed Cacheが原因
結論から言いますが、LiteSpeed Cacheのプラグインをオフにしたところ、この現象が表示されなくなりました。どうやらLiteSpeed CacheのCDNがCSSに悪さをしているようで、CDN機能をオフにすると正常になります。
しかし、LiteSpeed Cacheプラグインをオフにすると、LiteSpeed Webサーバーのレスポンススピードが遅くなります。そこで、LiteSpeed CacheのCSSの設定の切り替えやQUIC.cloud上のキャッシュをパージなどを試しましたが、正常に表示することができません。2,3日放置しても改善されなかったため、QUIC.cloudの接続をやり直すことにしました。ここからは手順について、ご紹介します。
LiteSpeed Cacheはサイトの表示を高速化するプラグインです。GTmetrixで計測したところ、プラグイン機能オンとオフで約2倍程度の速度の差があり、パフォーマンスが向上しています。プラグインの使用を諦めたくありません。
環境
WordPress 5.7.2
– テーマ Cocoon 2.3.0
– 子テーマ 1.1.2
LiteSpeed Cache 3.6.4
ドメイン Google Domain (カスタムネームサーバーをQUIC.cloudに指定)
DNS QUIC.cloud
スマホ Pixel 3a, P20 Lite
改善手順
1. LiteSpeed Cacheの一般設定にあるQUIC.cloudのマイダッシュボードにアクセスをクリックします。
2. 設定しているドメインをクリックし、CDN-QUIC.cloud CDNに遷移します。
3. Disable CDN、Disableをクリック。
4. QUIC.cloudのSettingsでDelete Domain、Yes, delete domainの順にクリック。QUIC.cloud上のDNSを使用しているのでそのまま続けます。
*QUIC.cloudを使用するために、他サービスのDNSにCNAMEレコードを設定している場合はAレコードに直してから実行してください。
5. WordPressのドメインキーの更新をクリックし、届くまで待機。
6. ドメインキーの更新が実行され、承認が下りてもwordpress上にドメインキーが表示されないことがあります。その場合、再申請します。
7. ドメインキーが付与されたらQUIC.cloudへのリンクをクリック。
8. すでにログインしているアカウントと紐づけるため、Yesを選択し、Continueをクリックします。
9. ダッシュボードからCDNに飛んでも、そのままではEnable CDNをクリックすることができません。 WordPress上のプラグインでQUIC.cloud CDNが設定上オフになっているので、先にオンにして保存します。
10. エラーの告知が無くなり、Enable CDNがクリックが可能に。続いてContinueをクリックします。
11. システムが認識し、OverviewでOKになるまで待機。
12. スマホでアクセスして問題なければ復旧完了です。お疲れさまでした。
まとめ
WordPressとQUIC.cloudを接続し直すことで、スマホ上の表示が元に戻りました。再度、Cocoonテーマのスキンを変更した際に同様の問題が起こりかねないので、今回は記事にしました。どなたかの参考になれば幸いです。
