Word Pressモバイルユーザビリティの問題を検出|エラー解消法

ワードプレスを使ってブログを書いています。

今回はサーチクロームでモバイルユーザビリティの問題を検出

  • クリック可能な要素同士が近すぎます
  • コンテンツの幅が画面の幅を超えています

上記2点について、エラー解消を実施しましたので解決法を記述したいと思います。

モバイルフレンドリーテスト

エラーの内容

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

こちらのエラーは

クリック要素同士が近すぎると、PCではクリックできても、スマホでは指タップで押すことができない。(被ってしまって押したい方を押すことができない)

というものです。

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

こちらは、レスポンシブの対応ができていない。ということですね。

PCよりもスマホの方が画面サイズが小さいので、CSSでレスポンシブの記述をしないと横幅内に収めることができません。

モバイルユーザビリティの問題の確認方法

問題の検出をメールで受け取って気がつくこともあると思います。

どこに確認をしに行けばいいのか、ご説明します。

  1. サーチクロームを開く
  2. サマリー
  3. モバイルユーザビリティ
  4. 該当のエラーをクリック
  5. 該当のURLをクリック

モバイルユーザビリティのエラーを確認する手順

サーチコンソール、モバイルユーザビリティの画像

モバイルユーザビリティを選択

該当の型を選択

エラー内容の画像

エラー該当URLの確認方法

例の中に、該当のURLが出力されます。

書かれているURLの記事にエラーが起きています。

エラー該当URLの画像

エラー修正を実施しよう

  1. どんなエラーが指摘されているのか?
  2. どのページでエラーが起きているのか?

それがわかったらエラーの修正を行いましょう。

クリック要素が近いのは、改行をつけて離すなど、簡単に修正可能だと思います。

画像幅についてはレスポンシブになるようCSSで記述。

CSSがわからない方はそもそもレスポンシブ対応のワードプレステーマはたくさん販売されていますので、そちらを利用されると良いと思います。

ブログ用おすすめワードプレステーマ

第1位 ストーク

第2位 SANGO

第3位 JIN

1歳3歳、2児の母(主婦)が育休中に月10万以上を稼ぎ出した方法」でも詳しくご紹介していますが、ブロガーの方であれば、これらのテーマがおすすめです。

どれも1万円前後で購入できる優れものですよ。

修正が完了したらエラーテストを行いましょう。

エラーテストの実施方法

エラー画像

サーチクロームでエラーが起きているURLをチェックした箇所。

そこからさらにURLをクリックすると、上記画像のような表示がされます。

次にクロームが回ってくるのを待っていても良いですが、結果をすぐ知りたいときにはライブページでテストを実施しましょう。

エラー箇所がわからない

モバイルユーザビリティの問題が検出されたけど、問題にあたる箇所が見当たらなかった。

という方が、意外と多いようです。

私もそうでした。

クロームに再訪問させれば直る。

という記事が多かったのですが、私の場合は「一度該当記事を更新」してからライブページテストを実施すると修正完了となりました。

悩まれている方の参考になれば幸いです。