WordPressカスタマイズ 追加CSSがスマホに反映されないとき

レスポンシブデザインのWordPressサイトをスマートフォンをで見た時に思い通りのサイトになっていない時があります。私もそれでハマったのでその修正の仕方を書いておきます。

以前に、Twenty Seventeen 投稿記事の行間、文字間隔などの調整で当サイトを修正をしたのですが、スマートフォン(iPhoneSE)で確認したところ調整されていませんでした。

カスタマイズ画面からライブビューでスマートフォンやタブレットのサイトを確認すると、思い通りの調整がされているのです。しかし、私の所有するiPhoneSEやiPadで当サイトを見てみると調整がされていない。

「そもそもTwenty Seventeenというテーマに問題があるんじゃないか」と思い、別のテーマをインストールしてゴニョゴニョしてみました。そしてiPhoneSEで見てみると、テーマを変えたはずなのに全く同じデザインの当サイトが表示されました。

「どうやらテーマに問題があるんじゃない!別のプラグインか何かだ!」と問題の切り分けが出来ました。そしてプラグインを順番に見ていくことにしました。

そしてようやく見つけました。

追加CSSがスマートフォンに反映されない原因はJetpackが影響していたからでした。上掲の画像の「スマートフォン向けにサイトを最適化」をオフにしてやりました。すると、iPhoneで見てみると、追加CSSで調整してスマートフォンのライブビューで見たのと同じデザインのサイトになりました。

Jetpackって色々な機能がついていて便利なんで当サイト開始当初から使っていた(過去形)んですが、ちょこちょこ他のプラグインにちょっかいを出してくるので疎遠になってきています。

今回もCSSまでスマートフォン用に最適化していただいていたなんて、ありがた迷惑でした。