ありがたいことにこのブログのいくつかの記事がgoogle検索結果の上位に表示されているのですが、ふと自分でgoogle検索結果から記事にアクセスしてみると、あれ・・・？なんかおかしい・・・？？
なんじゃこりゃ！！！！
ワードプレスのテーマが反映されてない！！！！
このブログにはJINという有料テーマを入れています。
本来の見え方はこうなるはずなんです。
表示が崩れるのはgoogle検索から記事にアクセスした場合のみ。
ブックマークからブログにアクセスしたり、記事のURLを直接クリックした場合、表示崩れは起こらない状態でした。
スマホからブログを見るときはブックマークからアクセスしていたので、数ヶ月この状態だったことに気づきませんでした・・・涙
結論から言うとこの表示崩れはAMPを導入したことが原因でした。
「AMP？なにそれおいしいの？」という方はこのあとは読まなくてもOK。
ただし、安易に導入しないように注意してください！
以下に該当する方はこれから私がブログの見え方を元に戻した方法を解説していくので、このまま読み進めていってください。
- ブログの表示が崩れてしまった方
- ワードプレステーマが反映されない方
- ブログの見え方が文字だけになってしまった方
- ワードプレステーマJINを使っている方
- AMPを導入しようか迷っている方
目次
ブログ表示崩れの原因にたどり着くまで
不具合が起こったらまずはググる！
しかし最初は何が原因で表示崩れがおこっているのか検討もつかないので、とにかく思いつくキーワードでググりました。
同じように困っている方がこの記事にたどり着いてくれるように検索したワードを載せておきます。
・ワードプレステーマ 反映されない
・ブログ ワードプレス 表示 おかしい
・JIN テーマ スマホ 表示されない
・ブログ スマホ表示 崩れる
・ワードプレス モバイル表示 文字だけ
・ブログ 文字だけしか表示されなくなった
などなど。
原因特定のために試したこと
色々とググってまず試してみた策がこちらです。
キャッシュをクリアしてみる
chromeのキャッシュを消してみました。
スマホからは「右下の・・・→履歴→閲覧履歴データを削除→キャッシュされた画像とファイル→閲覧履歴データの削除」で削除できます。
キャッシュ削除を実行してchromeを再起動したものの、表示崩れは改善されず。
safariでも試しましたがだめでした。
JIN・ワードプレス・プラグインを更新
次に試してみたのが更新作業。
ワードプレス自体を最新verにし、JINテーマも更新。
プラグインも全部更新してみましたが表示崩れは改善されませんでした。
ちなみに・・・
テーマ更新中に誤ってブラウザを閉じてしまった私。
ブログの編集画面にアクセスしたら「現在メンテナンス中のため、しばらくの間ご利用いただけません」というエラーメッセージが出て大混乱（号泣）
これもググってなんとか解決しました・・
解決策はこちらの記事を参考にさせていただきました。
みなさんはブログのテーマやプラグインの更新中は絶対にブラウザを閉じないでくださいね！
プラグインが悪さをしていないか調べてみる
次に表示崩れの原因として疑ったのがプラグイン。
プラグインを停止したら表示崩れが直った！という記事をいくつか見つけました。
私が見つけた限りですが、表示崩れの原因になりうるプラグインをまとめておきます。
Autoptimize
WPtouch Mobile Plugin
JetPack
WP Fastest Cache
WP Super Cache
もしブログの表示崩れに困っている方で上記のプラグインを使っている場合は「WP Super Cache 表示崩れ」とかでググると解決策が出てくるかもしれません！
私の場合、上記のどれも使っていなかったのでプラグインが原因ではないのかも・・・
もう一度URLを確認してみる
ここで疑問なのが、表示崩れはgoogle検索から記事にアクセスした場合のみ起こること。
ブログ記事のURLに直接アクセスした場合はスマホからでも綺麗に表示されていました。
そこで、google検索からジャンプしたページのURLを改めて確認してみると・・
https://rashiku-design.com/archives/834/amp/〜〜〜・・・.com/
ん？？なんかURLのうしろに余計なものついてる？？
ampって・・もしかして最近導入したあれか！！！
AMPとは？
AMP(Accelerated Mobile Pages)とは、簡単に言うと「スマホ用のページを速く表示させるための方法」です。
Googleがユーザーの利便性を高めるために最近進めている施策みたいです。
なぜ私がブログにAMPを設定したかというと、アドセンスにAMPを導入した方がいいよ！という案内が出ていたから。
ページが0.1秒でも速く表示されるほうがユーザーにとっては見やすいサイトになりますよね！
装飾とか画像とかを省けばそりゃあ速く表示されるサイトになりますよね！
でも綺麗に表示されなきゃ意味ないよGoogleさん〜〜！（泣）
AMPを停止する方法
原因が分かったらそれを取り除くのみ！
AMPの設定はこちらのプラグインを利用して行っていました。
「プラグインが原因なら消すだけで元に戻るはず！」
と、思ったのも束の間。
AMPを停止し、Google検索から記事にアクセスしてみると404エラーが出てくるではありませんか！！（大号泣）
もうどうしたらいいの・・・
と思い調べたところ、こちらの記事に解決策が書いてありました。
簡単に説明すると、
AMPのプラグインを消してもGoogleの検索結果にはAMP対応ページのURLが残ったまなので、AMP対応ページから元のURLに自動転送する処理をしなければいけないようです。
私は最初にAMPプラグインを削除してしまったんですが、本当はプラグイン削除は最初にやっちゃだめみたいです！
詳しいやり方はこちらの記事に丁寧に解説されているので、困っている方はご覧ください！
上記記事では解決方法として
①プラグインを使う方法
②.htaccessにコードを打ち込む方法
の2種類が解説されています。
私は②の方法で解決しました。
.htaccessにコードを打ち込む際は # BEGIN WordPress の上に入れたらうまくいきました。
(なお、使っているサーバーはロリポップです)
まとめ
泣きながら4時間ほど格闘の末、ひとまずGoogle検索からアクセスしても正規ページに転送されるようになったので一安心。
AMPの設定解除後、Googleの検索結果に正規のブログURLが反映される（つまり元に戻る）には1週間程度かかるようです。
私は昨日設定したばかりなのでちゃんと元に戻るか不安ですが、同じようにブログの表示が崩れて困っている方の参考になればとすぐにこの記事を書きました。
よかれと思って設定したAMPでまさかこんなことになるとは・・
今後プラグインを導入するときはデメリットやテーマとの相性をしっかり調べてから入れようと心に誓いました。
この記事がどなたかの参考になれば幸いです！
