• この記事を書いた人
u83941or0

小林 祐也(ぷーさん)

◆日々の困り事を解決するライフハックノウハウから、応用分子化学科卒の知見から突き詰めたヘルスケアノウハウ、次の時代を担う"ティール組織"や"価値主義"、身近な生活を便利にしてくれる"スマートホーム"や"ホットクック"といった便利家電などを幅広く紹介する伝道者◆実は30以上のプログラム言語を経験し、NewsPickerとして常に最先端技術のニュースを収集する外資コンサルタントSE

ブログ運営

Search Consoleで「モバイル ユーザビリティ」の問題「コンテンツの幅が画面の幅を超えています」が出たので確認してみた

2020/04/06にGoogle Search Consoleから「モバイル ユーザビリティ」の問題「コンテンツの幅が画面の幅を超えています」の通知が来ました。確認・修正の経緯をご紹介します。

こんな方におすすめ

  • WordPressでブログを運営している方

Google Search Consoleからのエラーメッセージ

 

改めてご紹介しますが、今回はSearch Consoleから次のようなエラーメールが届きました。

気になったので、エラーを早速みてみます。

どこかわかんないよ!って思ったら、下部に例として該当ページが掲載されていました。

実際にスマホで当該画面を確認してみると。確かに表のコンテンツが画面の横幅を大きくはみ出していて、横にスクロールしないと見れません。

「コンテンツの幅が画面の幅を超えています」を修正してみた

何故?と思って該当箇所をhtmlを観るとwidthが固定されている部分がありました。1164pxであったり、582pxであったり。

Webコンテンツで表コンテンツの幅を指定するときはサイズを"320 px 以下"に抑えるか、%で指定しないとはみ出ます。指定するのがめんどうなのでwidthをごそっと消しました。

結果、横スクロールしないでも1画面に収まるようになりました。

わかりにくいのでBefore-Afterを載せるとこんな感じです。

何のプラグインを使っているか忘れちゃったのですが(;´・ω・)テーブルのサイズをGUIでコントロールすると、勝手にpx指定が入っちゃうんですよね。

テキストエディタで直すのがめんどうなので、そういう仕様やめてもらいたい。。

Search Consoleさんにエラー解消を報告するべく「修正を検証」を押下したら、保留中になりました。

無事エラーが解決出来ていたら、ご報告します!

★04/07追記

翌日には合格の通知が来ました!

まとめ

Search Consoleさんからエラー通知で内容を確認しましたが、見た目が崩れているコンテンツが見つかって良かったです。

ブログ運営されている皆さんも、Search Consoleからの通知は無視せずに確認しましょう!

エラー原因は人それぞれだと思いますが、該当コンテンツをスマホで観ればエラー箇所が特定できるので、原因も特定しやすいです。なので、先ずはスマホで該当コンテンツを観るのが大事だと思います。

といったところで、今回はここまでです。

ご閲覧ありがとうございました。
ではでは(^^)/

 

 

 

1つ星 (記事が気にいったらいいね!してね!)
読み込み中...

-ブログ運営
-

Copyright© ぷーさんの閃考 , 2020 All Rights Reserved.