【Cocoon編】ブログのモバイル表示がズレてしまった時の解決法

ブログ運営
なおきち
なおきち

うーん、ブログのモバイル表示が横にズレてしまう…。

なんでだろう…。

こんにちは、なおきちです。

実は三週間ほど、「ブログのモバイル表示が横にズレてしまう」という謎の現象で、悩んでいました。

悩みに悩み、ググりにググった結果、ついに解決できましたので、今回記事にします。

結論から言うと、「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を使っていて同じような状況でお悩みの方は、ぜひ試してみてください。

この記事がどなたかのお役に立てば幸いです。

ではまた。

タイトルとURLをコピーしました