【Simplicity】モバイルデザインが崩れた原因はAMPプラグインだった

みなさんこんにちは、まるこです。

先日ワードプレスで運営しているブログのモバイルデザインがいきなり崩れました。

Simlicityを利用しているとなんらかの原因でモバイルデザインが崩れてしまうことがあるようです。

今回はモバイルデザインの崩れの原因を紹介していきます。

モバイルデザインが崩れた理由はAMPプラグインだった

Simlicityのモバイルデザインが崩れた原因はプラグインにありました。

画像を見ていただければわかる通り広告も表示されず、色もタイトルCSS、ブログカードなども反映されていません。

プラグインやCSSを変更していないのにモバイルデザインが崩れることは考えにくいです。

何が原因なのか調べたところ、デザインが崩れる前日に新しいプラグインを追加していました。それがAMPプラグインです。

Simplictyは相性の悪いプラグインがある

Simlicityには相性の悪いプラグインがあります。特に有名なのがcush系のプラグインです。

ファイル生成のcush系のプラグインを使用するとPC用のダブルレクタンブルの広告がモバイルで縦に表示されてしまったりと不具合がでます。（アドセンス違反になる）

cush系のプラグインはいれないように気をつけていましたが、AMPプラグインとも相性が悪いようです。今回、相性の悪かったプラグインは「Accelerated Mobile Pages」です。

「Accelereted Mobile Pages」を停止したら元に戻った！

「Accelerated Mobile Pages」プラグインを停止したら元通りになりました！これで一安心です！

人によってはこのプラグインを使用しても不具合が出ない方もいるようです。

私のように、みんなが普通に利用できるプラグインで不具合を起こす可能性もあります。

でもやはりAMP機能に対応させるとアクセスアップを見込めるようなので、どうしても導入したいですよね。

Simlicityでも使用可能なプラグインや方法調べてみました！

プラグインを停止して、SmplicityのAMP機能を使おう

SimlicityにはもともとAMP機能が備わっています。

Simlicityのテーマを利用してる人は、AMPプラグインを全て外しシンプリシティのAMP機能を使用しましょう。

これでデザインが崩れることなく、サイトをAMP対応にすることができます。

SimlicityのAMP機能はβ版なので、不具合が出る可能性もあるのだとか…

不具合修正に追われるかもしれませんが、アクセスアップを期待して導入を決意しました。

SimplictyのAMP設定方法

「外観」→「カスタマイズ」→「AMP（β版）」→「AMPの有効化」にチェック。

チェックを入れたら上の「公開ボタン」を選択して完了です。

その他にも入力部分やチェックする箇所がありますがそのままで大丈夫なようです。

今後不具合が出る可能性もあるので、不具合がでた時には報告を追加していきます。

まとめ

設定した後はどのような変化が起こっているのかわからないですが、変更後はアクセスの推移や、検索結果の変化、記事にエラーが起きていないかなどの確認が必要です。

AMP機能を追加したことで、モバイル版のアクセスアップに繋がることを祈ります。