はいたーい！
ゆばたりあんよ♪
最近グーグルサーチコンソールにエラーが出ていたの！！
モバイルユーザビリティエラーらしいわ～
スポンサーリンク
モバイルユーザビリティエラーとは
携帯電話で表示したときに問題がありますよ～ってこと！！
しかもすべてFPの記事一つに示されているもの！！
全部同じように作ったのになんじゃそりゃ～
と思ったのだけれど
この問題を解消しないと
ダメらしいの( ;∀;)
Googleさんは
モバイルファーストで
携帯から見やすい
サイトを心掛けなさい
って言ってるのよね！
モバイルユーザビリティの何がダメだったのか
モバイルユーザビリティの欄を開くと
1.テキストが小さくて読めません
2.クリック可能な要素同士が近すぎます
3.コンテンツの幅が画面の幅を超えています
4.ビューポートが設定されていません
1.テキストが小さくて読めません
テキストが小さくて読めません・・・だと～！！
前にはてなブログの文字の標準サイズは14pxだと
何かで読んだ気がするような・・・
対策…文字の大きさを変えてみたわ！！
設定→デザイン→工具のマーク→デザインCSSに
.entri-content{
font-size:17px;
}
を貼り付けて17pxに変更したわ！！
パピ：文字が大きくなって読みやすくなったワンッ
ゆば：最初からやっておけば良かったわね～
2.クリック可能な要素同士が近すぎます
リンク同士が近すぎて
太い指の人は二つ押しちゃうよ～
ってことかしら？（笑）
パピ：肉球じゃ押せないワンッ
対策…リンク同士の幅を広くしたの！！
おそらく目次のリンクのことだと思うの～
それしかリンクを貼っていないから！（笑）
不自然だけれどとーっても離してみたわ！！
3.コンテンツの幅が画面の幅を超えています
これは画像が大きくて
携帯からはみ出てるよ～
ってことでしょ～
設定しなおしたわよ！！
対策…画面の幅にはまるように設定しなおし
4.ビューポートが設定されていません
ゆば：なんじゃそりゃー！！
PCで見ているかのように
携帯に表示されるから
見にくいわッって
言われているようなので、
携帯用にしないといけないみたい～
<meta name="viewport"content="device-width,initial-scale=1.0,minimum-scale=1.0>
をhead内に貼り付けるだけで良いの！！
対策…PCはPC版、携帯は携帯用の編集を
モバイルフレンドリーを検索してURLを検索してもらう
最後に「モバイルフレンドリー」と検索して
そこに出てるURLを検査してもらうの！！
携帯に良いサイトかどうか確かめてもらったわ～
「このページはモバイルフレンドリーです」
ってでてきたから、
またグーグルサーチコンソールに戻って
修正を検証ボタンを押して、
また確認してもらわないといけないのよ～
でも私の場合、
なぜかボタンを押さないで
検証されていたわ（笑）
なぜかしら～モバイルフレンドリーの検証をしたから
かしらね？
そして、インデックスに登録しなおすのよ～♪
パピ：これでモバイルのお友達ワンッ
5月3日現在、
ようやく問題が修正されました！！ってなってたわー♪
良かった♪
