[ 解決済 ] モバイルユーザビリティについて
[ 解決済 ] モバイルユーザビリティについて
- このトピックには7件の返信、3人の参加者があり、最後に
により2年、 1ヶ月前に更新されました。
-
投稿
-
Katawaraで作成したページをGoogle Search Consoleで検査するとモバイルユーザビリティという項目で以下のエラーが起きています。
・コンテンツの幅が画面の幅を超えています
・クリック可能な要素同士が近すぎます
・テキストが小さくて読めません手持ちのスマホで確認しても該当箇所が見当たらず困惑しています。
Googleの仕様や使っているプラグインの問題もあるかと思いますが、改善方法やKatawaraの設定で気を付けることなどありますでしょうか。よろしくお願いします。
うなこ様
ご回答ありがとうございます。
ライブテストの「利用できない理由」をクリックすると添付画像のように該当箇所と思われるスクリーンショットが表示されました。
スクリーンショットを見ると、Katawaraの左に表示されるはずのメニューと思われるものが写っています。
自分のスマホで確認した画面と違い、CSSが崩れた状態で認識されているようです。また、今回確認するにあたって何度かライブテストを行ったのですが、なんの設定も変更していないにもかかわらず、モバイルユーザビリティが「利用できます」と表示されることもありました。
これらのことから原因がわかりますでしょうか。。
問題が発生しているURLなどは記載されていませんでしょうか？
添付画像から該当のページを確認しました。
「テキストが小さすぎて読めません」
段落ブロックでタイポグラフィを「小」を選択している文字があるようです。
スマホで見ると「小」のサイズは読みづらいので、小さすぎて読めませんと出るのではないかと思いました。
「小」を外すか、もしくはスマホサイズでは16pxくらいの文字にcssで調整する必要があると思います。「クリック可能な要素同士が近すぎます」
事業所名・メールアドレスの変更とかユーザーの登録のリンクがありますが、
このリンク同士がスマホサイズでは、少し近いので、指の太い方ですと押し間違える可能性があります。
もうすこし離してあげるとよさそうです石川様
お世話になっております。
初心者感丸出しのサイトが恥ずかしくて、URLを記載していません。Katawaraの仕様上、仕方がなく起きてしまうSearch Consoleのエラーなどはありますでしょうか？
うなこ様
ご確認ありがとうございます。
CSSが崩れてしまっているのが良くないのかと考えていたのですが、実際に「文字が小さすぎる」「要素が近すぎる」箇所があったのですね。確認してみると確かにタイポグラフィ「小」を指定している箇所がありました。ありがとうございます。
「要素が近すぎる」箇所について、現状は段落ブロックで作ったテキストにリンクを埋め込んでおり、このままの体裁で行間を調整したいと考えています。カスタムCSSを付与する以外に行間を広げる方法はありますでしょうか？
なにとぞ、よろしくお願いいたします。
「要素が近すぎる」箇所について、現状は段落ブロックで作ったテキストにリンクを埋め込んでおり、このままの体裁で行間を調整したいと考えています。カスタムCSSを付与する以外に行間を広げる方法はありますでしょうか？
現在は一つの段落ブロックに改行して3つのリンクテキストを入れていますが、一つづつ段落ブロックに分けて入れて（3つの段落になる）ブロックの共通余白設定で余白をお好みでつけるのはいかがでしょうか。
- このトピックに返信するにはログインが必要です。
