【メモ】CloudFront+WordPress環境でSimplicity2がスマホでレスポンシブにならない【#np2020】

WordPressでテーマとしてSimplicity2を入れて運用しているブログがあるのですが、スマホでレスポンシブになりません。PCと同じ表示になって小さく表示されてしまう。何か設定が間違っているのかな……と思ったら、どうやらキャッシュが影響しているようです。詳しい理由は作者さんのサイトに記載されていました。



Simplicityが「ファイルを生成するキャッシュプラグイン」と相性が悪い理由(※適切に設定すれば使えます)

それは、パソコンとモバイルで、それぞれスタイルを分けているからです。完全レスポンシブではなくスタイルを分けている(モバイルの時はmobile.cssが適用される)から、「ファイルを生成するキャッシュプラグイン」を使用していると、そのページのファーストビューの端末のキャッシュファイルが作成され、次からはそれが表示されてしまいます。



つまり「パソコン用の表示である」ということ自体がキャッシュされてしまい、スマホで閲覧しても正しく表示されないということらしいです。僕の場合はキャッシュプラグインは使用していませんが、サーバにアクセスした時点でCloudFrontがキャッシュを返しているんで、それが影響してるんでしょうね。



解決方法

なぜそういう設計にしているかについても説明がありますが、アドセンス関連のはなしなので僕にはあまり関係なさそうです。

というわけで、解決方法。


1. カスタマイズ > レイアウト(全体・リスト) > 完全レスポンシブ表示を有効をオンにする

20190429_1842.png

2. CloudFrontのキャッシュを削除



これで直ります。


もしアドセンスを使っていて完全レスポンシブに出来ないよという人は、キャッシュをオフにするしかないかなあ(未検証)