うーん、ブログのモバイル表示が横にズレてしまう…。
なんでだろう…。
こんにちは、なおきちです。
実は三週間ほど、「ブログのモバイル表示が横にズレてしまう」という謎の現象で、悩んでいました。
悩みに悩み、ググりにググった結果、ついに解決できましたので、今回記事にします。
結論から言うと、「Cocoon設定」の「高速化」でわたしの場合は簡単に解決できました。
この記事をおススメする方
- Cocoonを使っていて、モバイル表示がうまくいかない
- すべてのページではなく、特定の記事のみモバイル表示がうまくいかない
図解入りで説明しますね♪
こんなに簡単に解決するとは思いませんでした…
※解決方法をはやく知りたい方は、二番目の見出し
解決策は「Cocoon設定」の「高速化」にあった
からお読みください。
もくじ
ブログサイトのモバイル表示が横にズレてしまう…
わたしが三週間ほど悩んでいた当ブログの状況は、次のような感じでした。
どういうわけだか、モバイルのヘッダーとフッターが横長に表示。
本文の部分のみが、モバイルの幅で表示されてしまいます。
そのためスマホで記事をスクロールしようとすると、右側に余計な余白があるため、横方向にズレてしまうという状況でした。
さらにどういうわけだか、スクロールを中盤まで続けると、この状況も直ります↓
Cocconのスキンが影響してるのか、CSSが問題なのか、モバイルの設定が間違っているのか、など色々考えうることをググってみましたが、原因はさっぱり分かりません。
しかも、すべてのページで起こるわけではなく、特定のページでのみ起こります。
わけがわからない…。
ググっていくうち、モバイルフレンドリーテストなるものをやった方がいい、ということが分かり、さっそくやってみます。
予想通り、モバイルフレンドリーではないという結果が出ました。
お手上げ状態でしたが諦めずにさらに調べていくと、やっと解決策が見つかりました。
解決策は「Cocoon設定」の「高速化」にあった
ググりにググりまくった結果、解決策は「Cocoon設定」の「高速化」にありました。
次の手順で設定をし直した結果、ブログのモバイル表示は、無事ずれることがなくなりました。
1.Cocoon設定→高速化をクリック
まず、WordPressのダッシュボード、「Cocoon設定」の「高速化」をクリックします。
2.ふたつの項目のチェックを外す
「高速化」をクリックすると、いろんな項目が出て来ます。
モバイル表示がずれていた当時の設定を見返すと、すべての項目にチェックが入っている状態でした。
ググりにググった結果、
「Lazy Loadを有効にする」
「Googleフォントの非同期読み込みを有効にする」
このふたつの項目だけチェックを外すと、”サイトがより高速化する”というヒントを得ました。
もしかしたらこれで、モバイル表示のずれも解決できるかもしれません。
さっそくやってみます。
↑このあたりはチェックを入れたままにする。
↓「Lazy Loadを有効にする」と、「Googleフォントの非同期読み込みを有効にする」だけチェックを外してみる。
3.「変更を保存」をクリック
チェックを外したら、最後に「変更を保存」をクリックします。
変更を保存したところで、さっそくモバイルフレンドリーテストをやってみます。
おおー！
モバイルフレンドリーになってる…！
右側のプレビュー表示も、ずれてない！
やりました！
三週間くらい悩みに悩んだ、「モバイル表示のズレ」も、これで解決できました…！
解決策は「高速化」にあったんですね。
ちなみに参考にさせて頂いたブログ記事はこちらです↓
Lazy Load設定についてや、なぜ上記のふたつのチェックを外すのかなどは、上記の記事がとても詳しく分かりやすいです。
ぜひご一読を。
参考にさせて頂き、ありがとうございました！
まとめ
【Cocoon編】ブログのモバイル表示がズレてしまったら
- Cocoon設定→高速化をクリック
- 「Lazy Loadを有効にする」と「Googleフォントの非同期読み込みを有効にする」
のチェックを外す - 「変更を保存」をクリック
約三週間ほど悩んでいた「ブログのモバイル表示が横にずれてしまう」という現象も、おかげさまで解決しました。
Cocoon設定の高速化から簡単に解決できましたので、Cocoonを使っていて同じような状況でお悩みの方は、ぜひ試してみてください。
この記事がどなたかのお役に立てば幸いです。
ではまた。
