【wordpress】スマホで囲み枠やGoogleAdsenseの広告が反映されない時はＡＭＰの設定を確認してみよう。

どうも、おときちです。

wordpressでブログを運営していると本当に様々なトラブルに見舞われます。大体は症状をそのままググれば解決策が出てくるのですが、検索のキーワードによっては自分の求めている情報以外のものが出てきたりしてなかなか解決に至らないケースもあります。

今回私が直面した症状は『自分のサイトをスマホで見た際、デザインが著しく崩れ、Adsensの広告なども表示されなくなる』という症状でした。

結論から言うと、表示がおかしくなっていたのはwordpressテーマのアップデートや、自分で知らない間に設定してしまった等の要因でＡＭＰの設定を有効にしてしまっていた事が原因でした。

ＡＭＰとは何かの説明の前に、実際どのような画面になったかはこちらの画像をご覧ください。

元々の表示はこんな感じでされていました、広告がしっかりと表示されています。

ＡＭＰのに対応した場合の表示はこちら、タイトルの部分が青くなっているのでわかりやすい、広告も表示されてません。

広告だけでなく、記事のデザインもかなり簡略化されてしまいます。

これが

こんな感じに。

文字を囲っているボックスなどのスタイルシートと呼ばれる部分がまるっきり表示されず、かなり寂しいデザインに、てかそもそも見栄えをよくして記事を読みやすくするためにしているのにこれでは全く意味がありません。

今の時代スマホからのアクセスのほうが多いですしね。

ちなみにスタイルシートとはこういうやつ↓

この表示が一切表示されないうえに広告の表示もされない状態に。このままではダメだと原因を探るべく色々調べてみることに。

調べてみた結果、このサイトがＡＭＰという設定に対応していたからという事がわかりました。

ＡＭＰ(アンプ)とは簡単に言えばモバイル端末でウェブサイトを高速表示させるためのプロジェクトです、GoogleとTwitterが共同開発したそうな。

このＡＭＰに対応しているサイトはめっちゃ速度が速いです、タップした瞬間に表示されますね、速度が出れば検索結果の評価も良い方向に働きそうですし、その部分だけ見れば良いことのように感じます。

イナズマのマークとＡＭＰの文字が表示されているのが目印。

ですが、このＡＭＰの問題は高速化を優先するあまり、サイトの無駄な情報を勝手に省略して表示してしまう所です。

そのせいでＳＮＳのシェアボタンが消えたり広告が表示されなくなり、せっかく頑張って作ったデザインが全部消えちゃったりというような症状が起こってしまったわけなんですね。

じゃあ直すにはどうしたらいいのか？答えは簡単。

AMPの設定を無効化してしまえばOKです。

wordpressのプラグインの設定画面に行って。

AMPを停止してしまえば今回の症状は改善されました。

実際の所はAMP用の広告や、AMPに対応しながらもデザインを崩さずにする方法もあるようなのですが、webに疎い私にはまだまだ難しそうな内容だったのと、早急に対応するべき状況だったので今回の方法を選びました。

AMPに対応しつつデザインも見栄えがいいというのが理想的な状態であることは間違いないので、いつかは挑戦していきたいと思います。

今回は突然スマホサイトのデザインが崩れてしまった際の対処法を紹介させていただきました。

というのも今回の症状で「wordpress　スマホ　表示されない」

とか

「wordpress　スマホ　表示がおかしい」

とかでググってみてもどのサイトもレスポンシブデザインについて触れていて、全く自分の直面している症状が出てこなくて何日も解決策が見つからずに迷宮入りしそうになっていたので、同じような症状で悩んでいる方がいれば少しでも役に立てるんじゃないかと思いこの記事をかいてみました。

知っている人からすれば当たり前のような内容なんでしょうが、まだブログの初心者の方などには少しは役に立ってくれれば幸いです。