Simplicityの表示崩れ問題を解決する方法

この記事は、WordPressのSimplicityテーマを使用している方向けの記事です。

散々悩んだり調べたりして試行錯誤した結果、一度はこの問題の解決をあきらめてしまいました。

ところが、今回妙に色々拘っている自分でも、納得できる対策を発見したので紹介します。

スポンサーリンク

Simplicityの表示崩れ問題とは

Simplicityに表示崩れ問題が存在しているのを知っていますか?

こちらの記事のように相性の悪いプラグインが、Simplicityにはいくつか存在しているのです。

これはPageSpeed Insightsで高評価を狙いたい人にとっては致命的ですよね。

なぜならほぼ全ての項目で相性の悪いプラグインが存在しているからです。

もう役満です。

ちなみに公式の解決方法はこちら。

プラグイン停止です(解決してない)

プラグインを導入するということは、実装したい機能があるということですよね。
それを使わなければ問題が発生することもあるまいというわけです。

いやでも使いたい機能があるわけで…。

特にキャッシュプラグイン使うのやめろって、ブログで収入得るのは諦めようって言ってるようなもんじゃないですか。
Google評価とユーザーエクスペリエンスをキャッシュと一緒にまとめて捨てろみたいな話です。

一応、使えるキャッシュプラグインも以下の記事で紹介されています。

推奨されているプラグインは2つ。

・W3 Total Cache
・WP Fastest Cache

どちらかを使えば解決するのでしょう、普通は。
ぐぐってもあまり困っている人はいなそうだったので…。

ちなみに僕の場合ですが、どっちを使っても変わらず表示崩れが発生してしまいました。
スマホなのにPCのレイアウトになってしまうんですね。

これがあまりにも致命的だったので、1ヵ月以上もやもやと悩んでいたのです…。

Simplicityの表示崩れ対策

実を言うと根本的な解決方法はありません。

プラグインを使うな。

公式が推奨する方法がなぜ根本的解決ではないのか?
恐らくそんな便利な解決方法がないからでしょう。
あったらデフォルトで搭載してますよね。

問題を具体化してみる

まず、表示崩れ問題の中身をはっきりさせましょう。

うちのブログの具体的な問題は以下のとおりでした。

・スマホ表示のときに横にスクロールできてしまう。
・PCのダブルレクタングルがスマホでも表示されてしまう。
・モバイル広告が表示されない。

レイアウトはともかく広告の表示は、将来食っていくのを考えればあまりにも致命的でした。
収入に直結する問題ですからね…。
スマホ利用者7割以上だし…。

そしてレイアウト云々以前に最も危険だったのが、2番目。

PCのダブルレクタングルがスマホでも表示されてしまう

これ、どういうことかというと…。
PCで横表示になっているダブルレクタングルが、スマホで縦に連続して表示されてしまうということなんです。

つまり、アドセンスの規約違反です。

これには本当に頭を抱えました。

あきらめてキャッシュ切ったりしました。

ところが、ある時ふと気づいたのです。
なんで表示崩れが発生するのに、この3つしか問題が発生していないんだろうか?

記事の幅もPCのサイズになっていてもおかしくないはず。

これはまさか…CSSは利いているのか?

問題を解決した方法

ダブルレクタングル問題

ダブルレクタングル問題はこれで解決でした。

@media(max-width:670px){
  .ad-hoge{
   display:none;
  }
}

広告を非表示にする!!

メディアクエリ使えると分かっていれば最初からこうしていました…。

そもそも公式やら何やらでプラグイン停止するとか、ファイルいじるとか色々書いてあったのが事の発端ですよね。
相性が悪い理由とか色々書いてあって自分で解釈しようと頑張ってみました。

でもどこにも…表示崩れはメディアクエリでなんとかなるとは書いてなかったのです…。

完全に意識外に追いやられていて、巧妙に視点をずらされていたのです!

まさしくミステリで人を騙すときに使う手法ですね!(違)

ちなみにアドセンス広告はCSSで隠してしまうのを利用規約で禁止しています。

え、これまずいのでは?

と思うかもしれませんが、メディアクエリでの非表示は容認されているんですね。

これでダブルレクタングルの問題は解決です。

モバイル広告表示されない問題

書き忘れていたのですが、この表示崩れ問題には一つ厄介な事象が存在しています。

ブログに訪問した直後は、表示崩れなしでちゃんとモバイル表示されてしまうのです。
そして別の記事に遷移したりするうちに、表示崩れが発生します。

一度発生すると、問題のなかったページに戻ってもPC表示が適用されてしまうんですね…。

Simplicityのヴィジェットにはこのようなものが存在しています。

モバイル用広告ヴィジェット

たぶんこれはWordpressに定義されている関数で、is_mobileを使っているんだと思います。

で、表示崩れ問題が発生すると、パソコンだと認識されてis_mobileが利かなくなるわけです。
なので、思い切って「モバイル用広告ヴィジェット」を使用するのは、やめてしまいます。

代わりにテキストヴィジェットを追加して、そこにアドセンスコードを貼り付けてしまいましょう。

そうすると、このテキストヴィジェットはPCでもスマホでも表示されるようになります。

そこですかさず、メディアクエリを導入してしまいましょう。

@media(min-width:671px){
  #ad-hogehoge{
  display:none;	
  }
}

こうすることで、パソコンの画面サイズには表示されないモバイル広告ユニットが出来上がります!

広告がはみ出していたせいで発生していた「横にスクロールできてしまう問題」も同時に解決!

ここまで本当に長かった…。

まとめ

要するに、PC表示でもモバイル表示でも問題のない外観になるようにCSSを書いてしまおうということなのでした。(結構当たり前なこと)

これでWP Fastest Cacheが使えるので本当に嬉しいです。
ようやくPageSpeed Insightsに本腰入れられるな~って、もうすぐブログ開設2ヵ月になるのに…!

余談ですが、「モバイル用広告ヴィジェット」を廃止したら、今のところスマホでPC表示されなくなってるんですよね。
まさかこいつが原因だったという可能性は…。

ま、まあ、とりあえず解決したので良しとしましょう。