WordPressを利用していて、トップページの下部に余分な空白を発見したことがありますでしょうか?
わたしが運用しているサイト(WordPress テーマ JIN)のトップページ下部に、上のイメージのような記事とフッター部分の間に、余分な空白が発生する現象が発生しました。
こちらの対策を行ったので、同様な現象でお困りの方が改善できるよう、今回の記事を準備しました。
余分な空白を削除するための対策方法(プラグイン:a3 Lazy Load)
余分な空白を削除するためには、画像読み込み速度を変更するプラグインの修正が必要になります。
わたしのサイトでは「a3 Lazy Load」というプラグインを使用しているので、そちらの対策方法を紹介します。
まずWordPressメニューの[設定] – [a3 Lazy Load]をクリックしてください。
「a3 Lazy Load」のプラグインの設定画面が表示されます。
設定画面内の「Lazy Load Image」という項目の「Enable Lazy Load for Images」を「ON」→「OFF」に変更してください。
「Enable Lazy Load for Images」を「OFF」に変更したら、設定画面下部にある「Save changes」をクリックして、設定変更してください。
次に対策完了後の前後比較を紹介します。
トップページ下部の余分な空白が発生する現象の対策結果前後比較
トップページ下部の余分な空白が発生する現象の対策結果前後比較を紹介します。
トップ画面下部(現象発生:対策後)の画面にある通り、余分な空白が消えているのを確認できます。
次の項目では、なぜこのような空白が発生するのか原因を紹介します。
余分な空白が発生する原因とは
余分な空白が発生する原因は、サイトの画面描写を読み込むJavaScriptというプログラムが、上手く機能していないために発生している現象です。
正直WordPressの内部プログラムを修正する技能がない方には、何がなにやらという状況だと思います。わたし自身もそうです。
画面表示の読み込み速度を変更するプラグインがあるので、プラグインで画像読み込みの遅延処理(遅れ)をすることで改善します。
次の項目ではWordPressのテーマJINで、この現象の公式見解ページがあるので紹介します。
余分な空白が発生する現象について解説ページ紹介(テーマ JIN)
トップページの余分な空白が発生する現象について、解説ページがWordPress テーマ JINの公式ページで紹介されているので合わせてご確認ください。
https://jin-theme.com/manual/top-list/
あとがき
この記事を参考にトップページの余分な空白が、改善されましたでしょうか?
WordPressのテーマが異なっていたとしても、同様な現象は発生する可能性があります。
この記事を参考に、自身の環境に合わせて対策していただければ、改善すると思います。
ここまで読んでいただきありがとうございました。