【初心者】Google Search Consoleから問題検出のメールがきた！幅のエラー対処法

Google Search Console

✐ 2019/09/14

⟳ 2019/10/13

こんにちは、えひめのミホ(@ehime_miho)です。

さて先日、Gmailを開くとGoogle Search Consoleから一通のメールが届いていました。

「貴サイトhttps://ehime-miho.com/に影響する「モバイルユーザビリティ」関連の問題が 3 件検出されました。」

貴サイトでは、以下の問題が検出されました。

・テキストが小さすぎて読めません

・クリック可能な要素同士が近すぎます

・コンテンツの幅が画面の幅を超えています

エラーに関するメールは初めてだったので「えっ、どうしよう！？」と焦りましたが、自分なりに調べて対処したところ約一週間でエラーがゼロになりました。

今回わたしが実施した対処法を、メモとして残しておきます。

届いたエラーメール
思い当たるページが一つあった
コンテンツの幅が画面からはみ出していた！
対処法
いつの間にかエラーが「ゼロ」に…！
まとめ

届いたエラーメール

実際にGoogle Search Consoleから届いたメールはこちら。

内容を調べるために「モバイルユーザビリティの問題を解決する」ボタンをクリックすると、モバイルユーザビリティの詳細ページが表示されました。

ページの右上に「ソース：スマートフォンクローラ」との表示があり、モバイルの端末表示にエラーが「３つ」あることがわかりました。

思い当たるページが一つあった

実際にどのページが問題なのか？メールやGoogle Search Consoleのページを探しましたが、残念ながら具体的なURLを見つけられませんでした。

でも、メールが届く数日前に更新した記事「シンプルな囲み枠（ボックスデザイン）のサンプル４つ」が怪しいのでは…と、めどがつきました。

参考記事＞＞＞「シンプルな囲み枠（ボックスデザイン）のサンプル４つ」

コンテンツの幅が画面からはみ出していた！

なぜなら、そのとき最新記事だった「シンプルな囲み枠（ボックスデザイン）のサンプル４つ」で、HTMLやCSSのコードを書いた部分が画面の右側へ大きくはみ出していたからです。

さらに右へスクロールしたのが下の画像です。

問題の部分はグーテンベルグ（WordPressの最新エディタ）の「<>ソースコード」ブロックを初めて使った箇所でした。

幅がはみ出した原因として、

・テーマ開発をした時「<>ソースコード」のブロックを想定していなかったため、該当するCSSが未記述・未編集だった

ことが考えられました。

対処法

⒈ CSSを編集して幅を修正

実際にやった対処法は、

①はみだしている要素のセレクタ名をChromeの検証機能（デベロッパーツール）で調べ、

②テーマファイルの中のstyles.cssを編集し、幅がはみ出さないよう直しました。

.wp-block-code { /*ソースコードのブロック*/
   padding: 20px;
   font-size: 17px;
   line-height: 2;　/*行間を少しあける*/
   white-space: pre-wrap; /*ソースコード折り返しさせる*/
   background-color: #faf0f6;　/*背景色ピンク*/
}

はみ出したテキストを収めるポイントは　white-space: pre-wrap; です！

この記述によって、テキストをボックス内で折り返しにさせることができました。

参考＞＞＞white-space – CSS: カスケーディングスタイルシート | MDN

下記は修正した後の表示です。