先日ブログサイトを確認していたらブログのトップページをスクロールすると、下部に画面が真っ白になる程大きな空白があることに気づきました。
トップページの下に空白があと見栄えが悪く、流石に訂正しなければと思い様々な方法を試して修正する事ができました。
この記事でトップページ下に大きな空白が出る原因とプラグインの操作だけで解決する方法をまとめることにしました。
僕と同じ様にブログサイトの下部に大きな空白が出た人は参考に最後まで読んでみてください。
ブログサイトのトップページ下に空白が出た原因はプラグイン
結論からお話しすると、ブログのトップページ下に空白ができた原因はインストールしているAsync JavaScriptというプラグインでした。
ブログサイトに意図しないものが表示されるのは大きく分けてプラグインかCSSコードが原因である事が多いです。
その中で、プラグインが悪さをしていると判断したのは、僕は基本的にCSSコードを触っておらず、同じプラグインを入れている別のブログでは問題が起きていない事を把握した為です。
この事から、プラグインの設定がトップページ下に空白を出している原因につながっていると考えました。
そして、Async JavaScriptが原因だと突き止められていたのは過去にも悪さをしていたからです。
なので、別ブログで利用しているAsync JavaScriptの設定と同じにする事で問題が解決しました。
トップページ下に空白を解決したAsync JavaScriptの設定方法
トップページ下の空白を解決した方法は以下の通りです。
- Async JavaScriptの設定画面を開いてAsyncをDeferに変更
- キャッシュを削除
Async JavaScriptの設定ではAsyncとDeferに切り替えれる箇所がありますが、Deferを選択しましょう。
AsyncとDeferはJavaScriptなどのプログラムを実行するタイミングの違いにあります。
AsyncはScriptの解析が終わった直後に実行して、DeferはHTMLが解析した後に実行します。
Deferにする事によって全体のコードを読み取って正しく表示できる様になったと考えています。
Async JavaScriptの設定を変更した後はキャッシュを削除してトップページ下の空白は無くなりました。
当サイトではWP-Optimizeというプラグインでキャッシュ削除をしています。
まとめ
今回はブログトップページ下に空白が出来る原因と解決法についてご紹介しました。
- トップページ下に空白が出来る原因はAsync JavaScript
- 設定画面を開いてAsyncからDeferに変更したら解決
- 設定変更後はキャッシュを削除
プラグインはとても便利ですが、使いすぎると不具合が出てしまい、原因を探すにも多くの労力が必要となります。
なので、プラグインは最小限使う様にしましょう。
