雑が喰おう

ドメイントップのモバイル ユーザビリティ上の問題を修正しました

平成27年3月12日 Googleウェブマスターツールから
「http://hishitu.net/ でモバイル ユーザビリティ上の問題が検出されました」
というメールが届いた。

モバイル ユーザビリティのユーザビリティ エラーを確認したところ以下とおり3つのエラーが記載されていた。

  • タップ要素同士が近すぎます
  • ビューポートが設定されていません
  • フォントサイズが小です

ふむ。
秘室ドメインのメインである「雑が喰おう」で問題があるのならば困るが、ドメインのルートページが問題のようである。

確かHTML直打ちで作ったような気がするし、CSSも適用させていないのではないだろうか。 シンプルに仕上げるためにそうしたのだが、シンプル過ぎたようだ。

ビューポートの設定

雑が喰おうとは違う指定になるけど、Googleの推奨される解決方法に載っていたviewportをheaderにコピペ

<meta name=viewport content="width=device-width, initial-scale=1">

変更前にスマホで確認したけど、確かに見にくかった。
ふだん、全然みないページだっただけに、抜かってた。

遅くなったが、ビフォー画像がこれ。
2015-03-12びふぉー

タップ要素とフォントサイズ

headerに以下のCSSを記述

body{font-size: 1em;}
li {margin-bottom: 1em;}

Googleさん曰く読みやすいフォントサイズは16pxらしいけど、可変できないのは私が嫌い。
タップ要素については、1文字分くらいあけてたらいいかなぁと。

その他

なぜトップにTwitterへのリンクを貼ってたか不明だけど、それを削除したり、ゴミタグを削除したりした。

これで問題解決になったかな。
問題解消できたかどうかはどうやったら確認できるんだろうか。

ついでに、雑が喰おうの方のウェブマスターツールを確認したら、同じようにエラーがいくつかあったので、そちらも修正していこう。

アフター画像
2015-03-12あふたー

スポンサード リンク

スポンサード リンク

»関連してそうな記事