読者です 読者をやめる 読者になる 読者になる

攻めは飛車角銀桂守りは金銀三枚

ITとアコースティックギター、そして日常のひとこま。

「タップ要素同士が近すぎます」という警告がgoogleウェブマスターツールで出てました

SEO
スポンサーリンク

久々に暇なんで「googleウェブマスターツール」にログインしていろいろ眺めているとなんと警告が出てました。

内容は
f:id:lightgauge:20150614134015p:plain

とあり、
f:id:lightgauge:20150614134046p:plain

日本語を見ると

モバイルユーザビリティ > タップ要素同士が近すぎます。
リンクやボタン同士が十分に離れている状態にしてください。

とな。

「詳細」をクリックしてみると

概要
タッチスクリーンでは、リンクやボタンが小さかったり、近すぎたりすると、従来のマウス カーソルよりも正確にタップするのが難しくなります。ユーザーが間違えて誤ったターゲットをタップして困惑しないように、タップ ターゲットは十分に大きくし、他のタップ ターゲットに指を重ねずに押せるよう十分に離す必要があります。平均的な大人の指の腹のサイズは幅約 10 ミリで、Android UI のガイドラインで推奨されるタップ ターゲットの最小サイズは約 7 ミリ(モバイル ビューポートを適切に設定済みのサイトでは 48 CSS ピクセル)です。

とあります。

どうやら何かの間隔が狭すぎると。

で、エラーがでているページが「/about」なので想像するに多分「読者登録のアイコン」同士の間隔が狭いんじゃなかろうかと。

f:id:lightgauge:20150614134855p:plain

でもそれなりに対策してて現在は

.page-about .entry-content img.profile-icon {
  height: 32px;
  width: 32px;
  border-radius: 50%;
}

してる・・・って「48cssピクセル」じゃないとダメなんかな>?

ということで「48ピクセル」にしてみました。

.page-about .entry-content img.profile-icon {
  height: 48px;
  width: 48px;
  border-radius: 50%;
}

でも・・・見た目かわりません。

う~ん、CSSはよ~わからん。やっぱり苦手です。

とりあえずはしばらくこれで様子みます。

もし「こうやって対応するのです」と言う方法をご存知の方はなてなブックマークのコメントでお知らせください。(笑)
[asin:B00UWEFUCC:detail]