サチコ先生から、メールBOXに怖いお知らせが・・・。
モバイルユーザビリティーの問題が3件検出されました。
- テキストが小さすぎて読めません。
- コンテンツの幅が、画面の幅を超えています。
- クリック可能な要素同士が近すぎます。
一つずつ解決していきましょう。
テキストが小さすぎて読めません。
メールにある、「モバイルユーザビリティの問題を解決する」というリンクをクリックすると、
2ページでテキストが小さすぎて読めません。というエラーが出ていました。
実際にスマホで該当ページを見てみると、文字の大きさが小さいということはありませんでした。
また、Googleのモバイルフレンドリーテストをしてみると、
なんと、OKでページだったんです。
修正箇所がないので、そのまま修正を検証するボタンをクリックしました。
すると、検証を開始しましたというメールが届きました。
コンテンツの幅が、画面の幅を超えています。
コンテンツの幅のエラーも、テキストが小さすぎて読めませんというエラーと同じページででていました。
ですから、Googleのモバイルフレンドリーテストは、もちろん合格しています。
コンテンツ幅のエラーを探すためにぐぐってみると、CSSが原因と書かれているサイトがいくつかありました。
そこで、CSSを縮小すればいいんじゃない？と勝手に思いました。
エラーが出たサイトは、cocoonを使っていますので、早速CSSを縮小してみましょう。
ダッシュボード→cocoon設定→高速化
- プラウザキャッシュの有効化
- THMLを縮小化する。
- CSSを縮小化する。
にチェックを入れましょう。
その後、修正を検証をクリックしました。
クリック可能な要素同士が近すぎます。
エラーが出ているサイトを、目視したのですが、クリックできる要素が近いという箇所も見つかりませんでした。
エラーが出ている2ページともに、モバイルフレンドリーテストで合格しているので、なんの修正もしないままに、修正を検証をクリックしました。
モバイルユーザビリティの問題が解決されました。
数日後、「モバイルユーザビリティの問題が解決されました。」というメールが届きました。
問題となっていたエラーは3点とも解消されました。
何もしないで、修正を検証するとモバイルユーザビリティの問題が解決されることもあるんですね。
もし、このようなエラーが出たときには参考にしてくださいね。
