ワードプレスのモバイル表示が崩れた時の直し方が知りたい！スマホで見え方がおかしい時はどうすればいいの？という事について解決していきますね。
私の結論を先にお伝えすると、ワードプレスのモバイル表示が崩れた時は、プラグインを見直すことで元通りに戻ります。
私の場合、パソコンでの表示は何も問題がないため気付くのが遅れてしまいましたが、スマホで自分のサイトをチェックすると
- ヘッダー画像が表示されない
- アイキャッチ画像の表示がいつもと違う
- 見出しの表示も崩れてる
こんな感じでパソコン表示と違い、記事全体が殺風景になっていました。
そこで今回は、私のワードプレスでモバイル表示が崩れた時の直し方をご紹介していきます。
私と同じように『スマホ表示の見え方がおかしい…』と思っても、簡単に解決できたので、この記事を読みながらあなたも一緒に元通りに直す作業を進めてみてくださいね！
Contents
【有料テーマは注意】ワードプレスのモバイル表示が崩れた原因
私が実際に経験した、ワードプレスのモバイル表示が崩れた原因をご紹介していきますね。
パソコンでモバイル表示を確認するとキレイに表示されている
まず私の場合なんですが、パソコンでワードプレスを更新した内容を、スマホ表示として確認できる機能があります。
パソコンでワードプレスをいじった内容を、スマホを使わなくてもパソコンでモバイル表示を確認できる便利な機能なんです！
ところが、モバイル表示が崩れてるのに、その通りには確認することができずパソコン版のようにキレイに表示されていました…。
そのため私は、モバイル表示が崩れていることにすぐに気付けず遅れてしまったんです！
だから今回の件で勉強になったことは、パソコンでモバイル版を確認できる機能は便利だけど、自分のスマホでもキレイに表示されているか確認することが大切！ということでした。
ワードプレスのモバイル表示が崩れた原因はプラグインだった
それでも、スマホで直接自分のサイトをまったく確認してないというわけではなく、前回スマホから直接自分のサイトを確認した時には、パソコン版と同じように表示されていました！
じゃあ何でスマホ版での見え方がおかしくなったの？と思いますよね。
- ヘッダー画像が表示されない
- アイキャッチ画像の表示がいつもと違う
- 見出しの表示も崩れてる
- 目次もなんかおかしい
- リンクの色も違う
このような変化が急に表れるのはどう考えてもおかしいです。
ワードプレスで最近更新した内容を思い返してみると…思い当たることがありました。
それは新しいプラグインを導入したこと！です。
そのプラグインの名前は、WPTouch Mobile Pluginと呼ばれるもの。
簡単に機能を説明すると、WordPressをスマートフォン対応にするプラグインです。
2020年現在スマートフォンは私たちの生活に欠かせないものになっていますよね！
その影響もあり、スマホを利用したサイト閲覧が６割～7割とも言われています。
スキマ時間などの時間を有効活用するためにも、手軽に検索できるスマホはあなたもきっと最大限に活用してますよね？
でもWPTouch Mobile Pluginというプラグインを使ってユーザビリティをあげていこう！と思ったのに裏目に出てしまっていたわけです。
プラグインは導入してみるまでは相性の良し悪しはわかりません。
新しいプラグインを利用するときは、パソコンからだけでなくスマホでもしっかりと問題なく作動してるかチェックをしましょう。
パソコン版は大丈夫なのにスマホの見え方がおかしい…のはなぜ？
先述しているWPTouch Mobile Pluginというプラグインを使うと、なぜスマホの見え方がおかしくなってしまうの？と思うはずです。
結論を先にお伝えすると、レスポンシブWEBデザインに対応している有料テーマを使っているとプラグインとの相性が悪い場合があって、キレイにスマホ表示がされなくなります。
サイトに訪問した人のデバイスに合わせて、表示サイズを最適化してくれること。
WPTouch Mobile Pluginはスマートフォン対応にするために、おすすめされていたプラグインの1つのため、利用者も多いと思います。
だからそもそもの機能は優れているんですよね！
ということは、私のサイト内ではその優れた機能を発揮できない何か理由があるということ！
その理由こそが、私の有料テーマとWPTouch Mobile Pluginの相性によるものでした。
具体的に言うと、スマホでの見え方がおかしい原因はコレでした☟
すでにレスポンシブWEBデザインに対応してくれている有料テーマなのに、さらにレスポンシブWEBデザインに対応するためのWPTouch Mobile Pluginを導入してしまったために、お互いに本来の持ち味が発揮できない結果になってしまった…という感じです。
レスポンシブWEBデザインに対応している有料テーマ
有料テーマには、すでにレスポンシブWEBデザインに対応してくれているものが多くあります。
など有名どころは時代に合わせてレスポンシブWEBデザイン機能を搭載しているものばかりです。
機能性が高い有料テーマを使っている場合、プラグイン不要で対策できてることもたくさんあるので、プラグインを新しく導入する際には、パソコンとモバイルの両方からあなたのサイトが崩れずに綺麗に表示されてるか確認しましょう。
【解決】ワードプレスのモバイル表示が崩れた時の直し方
それでは原因がわかったところで、ワードプレスのモバイル表示が崩れた時の直し方を、画像を用いて説明していきますね。
といっても、有料テーマを消すわけには行かないのでプラグインを無効にするだけです。
あなたのワードプレスのダッシュボードから『プラグイン』をクリック。
WPTouch Mobile Pluginを無効化する。
これで完了です。
私のように最近新しくプラグインを導入して、スマホ表示が崩れたと感じたら、そのプラグインを無効化することで、元の綺麗な表示に戻ることもあるので、試してみてくださいね！
まとめ
「ワードプレスのモバイル表示が崩れた時の直し方！スマホで見え方がおかしい時に私が解決した方法がコレ」という内容についてお伝えしてきました！
パソコンでモバイル表示を確認するとキレイに表示されてるが、実際にスマホから自分のサイトをチェックすると見え方がおかしい！？ということがあります。
その際は、先述した直し方を試してみてくださいね！
syoko
