『Googleに指摘されたので直しました』というブログの説明画像です。

Googleに指摘されたので直しました

Last Updated on 2021年12月28日 by webassistant

当社が運営しているサイトのページの右側に余白があることに気がついてはいたのですが、「っま、誰も気が付かないだろ」と紺屋の白袴のように気にもとめていなかったのですが、さすがGoogleです。
「右に余分なスペースがあります。すぐに改善しましょう」とアラートが来ました。

仕方なく(?)改善することにしましたので、その手順からご説明いたします。

原因を切り分ける

FireShotというページ全体をキャプチャするChromeのアドオンでページをキャプチャします。
その際にページのスクロールの様子をよく見ると、スクロール→右に移動、スクロール→右に移動・・・という挙動をするのが分かります。
右の余白もキャプチャしている=(イコール)右に余白があるということになります。

そこで原因が何か?ということですが、別のページも同じようにキャプチャしてみます。
つまり、このページだけ余白があるのか、それとも全ページに余白があるのかを切り分けて考えます。

すると全ページ(厳密にはTOPとよく使うページの2ページ)にほぼ同じ幅の余白があることが判明しました。
つまり、ページを直すのではなく、ヘッダーかフッターに余白があるということになります。

原因が分かれば対処法も分かる

ヘッダー部分の設定はどのテーマを使っていても大抵はダッシュボードのカスタマイズで設定します。
早速、カスタマイズの設定を見直しました。
パディングという項目がpx(ピクセル)単位で設定ができる仕様になっているため、この数値を微妙に調整していくとバッチリ仕上がりました。

まとめ

今回のポイントはGoogleにサイトを登録して、アラートを受け取ること。
アラートが来たら無視することなく対応すること。
原因を切り分けでどこが原因かが分かればすぐに解決できるということが分かりました。

この記事についてのお問い合わせはこちらからご遠慮なくご連絡ください。

当社では、WordPressを用いたWebサイト制作を行っております。
お問い合わせはこちらまでお気軽にご連絡ください。

制作実績はこちらからご確認ください。
⇒【View Now!】WordPress制作事例をチェック!

ノーコードで簡単ウェブ制作なら断然ELEMENTORが便利です。

この記事についてのご質問がある方はワードプレスの学校でお願いいたします。

当社では、WordPressを用いたWebサイト制作を行っております。
ホームページの制作については、こちらからお気軽にお問い合わせください。

制作実績はこちらからご確認ください。
⇒【View Now!】当社の制作事例をチェック!

ノーコードで簡単ウェブ制作なら断然ELEMENTORが便利です。

ワードプレスの学校

ワードプレスについて何時でも何度でも質問ができる「ワードプレスの学校」を開設しました。
本サイトで解決できなかった問題は直接ワードプレスの学校で質問ができます。
ぜひ、ワードプレスの学校をチェックしてみてください!

Join our newsletter

毎週金曜日に最新のワードプレスの情報を配信しています
いつでも解読できますので、お気軽に登録してください

Join Our School

ワードプレスについて何時でも何度でも質問ができる「ワードプレスの学校」を開設しました。
本サイトで解決できなかった問題は直接ワードプレスの学校で質問ができます。
ぜひ、ワードプレスの学校をチェックしてみてください!

— ワードプレスの学校でワードプレスについて一緒に学びませんか —

ブログを読むより、ユーチューブ動画を見るより、ワードプレスに精通した講師に直接聞いて問題を解決しましょう!ワードプレスの学校は、質問し放題のオンラインスクールです。