在宅勤務はイセザキモールで

イセザキモール近辺の情報をお届けします

小さすぎて読めなぁぁぁい!モバイルユーザビリティ問題を語る

ある日 google先生からお手紙が届きました、なんだろー、ぽちっとな「モバイル ユーザビリティで問題が検出されました」ムムっ 

このブログの文字は
・小さすぎて読めなぁぁぁい!

by ハズキルーペ 

f:id:handrun:20210314232618p:plain

 

むかついたのでデカくしてみました。どーいうことやねん!早速スマホでチェック、読めますケド!いったい俺の時間をどれだけ消耗してくれるんだ、google先生\\٩(๑`^´๑)۶////プンプン!

 前回のgoogle先生家庭訪問作戦のおかげで家庭訪問していただき、お手紙を頂戴したというわけです。おら、しろーとでないからな、まかせろ!得意のググって解決だ!

 

では調査開始 ビューポイント解決

エラーは3つ出ているようです

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

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

3.ビューポートが設定されていません

 

まずは、ビューポイントからいくかな、先生~<(_ _)>よろしくお願いします。なになに「HTMLにmetaタグ」「headにタグを追加」( ゚Д゚)ハァ? うっせェ うっせェ うっせェわ~ by Adoさんの「うっせぇわ」状態ですが、google先生の知識で頭でっかちの私には余裕ですよ。

はてなブログの皆さんは設定の詳細設定です。

f:id:handrun:20210301214704j:plain

開発者向けの設定ですとあるな(* ̄▽ ̄)フフフッ♪余裕よ!コードの意味も分からず張り付けるだけですから。んでもって、サチコさん(Google Search Console)にお問い合わせ、おらmetaタグ張ったずら、結婚してケロ!とURL検査を行うと、ビューポイントのエラーは消えました。結婚は近い( ´∀` )

f:id:handrun:20210301220241p:plain

 小さい文字を大きくする

さてお次は、小さすぎて読めない問題ですね

これがなかなか上手くいかない!色々調べてCSSにフォントの設定を入れるのですが文字も確かに大きさが変わるけど、何回トライ&エラーでNGばかり、もしかしてサイドバーの文字も大きくしないといけないのか?とバナーの説明文字を大きくしたりとか四苦八苦しましたが、結局サイドバーの文字の大きさは関係ないみたい。だって全部削除してもエラー解除できないんから。ヘッダの広告とかも削除しても変わらないし!

フォントのCSSコードは「フォント大きく CSSコード」とかでググるとでてきますので、そちらを見てください。ここに書かないか! それは私の場合はそれが問題ではなかったからです。

 

レスポンシブデザインを再確認する

レスポンシブデザインにすればよいとあちこちに出てます、そんなのやってますよ~、だってチェックつけてますから<(`^´)>エッヘン!

f:id:handrun:20210301222403p:plain

 モーだめだ今日は寝よう、ネムネム(ノω<).。oOO

 

根本原因について

次の日、半日試行錯誤しましたがお手上げ状態。行き詰まりましたので、どこかに変なコードが入って直せないのかと思い、テーマデザイン変えて初期化っぽくしてみるかな~と、ふとこれまでのデザインをみていると・・・・・

f:id:handrun:20210301223633p:plain

なんて日だ!(バイきんぐ) 

オフィシャルテーマはすべてレスポンシブデザインに対応していると思い込んでました、対応していないテーマは ポちっと設定押せないと思い込んでました。だってだって、、、、オーノー!時間返せ~彡(-ω-;)彡ヒューヒューマジ泣ける。

そこからはテーマを変えて(CSSはバックアップしてくださいね)再チェック!

 

f:id:handrun:20210301225141p:plain

 

最後に

人間というのは思い込みの動物です。ぐるぐる調べるより基本設定をもう一度見直すことも大切だと思いました。なまじCSSとかググってわかった気分になって得意げにコードを試行錯誤していたことで、より思い込みが強くなった気がします。結局、ビューポイントも設定触らなくてよくてレスポンシブデザインにすることで解決する事でした。(テーマを変えたらビューポイントはコード入ってました 必要は必要なのです)

しょーもない結末でスミマセン、でも結構時間かかったすよ(´;ω;`)、色んなブログで情報を出していただいている皆様ありがとうございました。この情報も誰かのお役に少しでも立てればうれしいです。ヒントとなるとかと思っています。

 さて、次は1か月後のPV報告をしたいと思います~