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

太陽がまぶしかったから

C'etait a cause du soleil.

はてなブログモバイル版のAboutページでWMT警告を消す方法

f:id:bulldra:20150329220842j:plain

読者アイコンの大きさを指定してWMT警告を消す

これは確かに押せない(タップ出来ない)ね・・・・・・

おかげさまで読者登録が700人を超えており凄い一覧になっています。

1面がアイコンな状態です。

これは改善せねば!と思ったのですが、モバイル版をデフォルトで使っていると直し方がわかりません(^_^;)

誰か直し方ご存知の方は教えて下さい。

 確かに『Google Search Console』のモバイル ユーザビリティにおいてAboutページ内のアイコンが密集していて「タップ要素同士が近すぎます」という警告が出るんですよね。これはスマートフォン表示においての読者アイコンサイズを設定し直す事で回避可能と思われます。このブログのAboutページでは同様の警告が発生していません。

モバイル表示時における読者アイコンサイズの設定方法

f:id:bulldra:20150323130032j:plain

 スマートフォン表示のスタイルシートを設定するためには、デザイン設定画面のスマートフォンタブのフッターに以下のCSSを追記します。フッターの修正が行えるのはPROユーザーのみであるため、通常ユーザーはヘッダー部に書く必要があります。

<style>
.page-about .entry-content img.profile-icon {
  height: 32px;
  width: 32px;
  border-radius: 50%; /* 丸アイコン化をお好みで */
}
</style>

 これでスマートフォン表示時における読者アイコンが大きくなるので、再認識されればWMTからの警告が消えるはずです。

スマートフォンCSSの応用方法

 同じ方式でスマートフォン表示時の追尾ヘッダーを消す方法です。

 レンタルサーバーや github.io などにホスティングさせた外部CSSの利用も可能です。

まとめ

 そんなわけで、WMT警告を回避するためにスマートフォン用のCSSを設定する方法を紹介しました。単純に読者アイコンを大きくすると見やすくなるという効果も望めます。ついでですが、Aboutページからの発リンクが多すぎるという件については以下のスクリプトにて対応可能となっています。

 さっさと公式機能でスマートフォン用のCSSが書けるようになればよいのですが、現状ではこんな感じで対応できますよというお話でした。なお、設置サポートや表示スタイル/アルゴリズムのカスタマイズ等のご依頼がありましたらサポートライセンスの購入をお願いいたします。

融けるデザイン ―ハード×ソフト×ネット時代の新たな設計論

融けるデザイン ―ハード×ソフト×ネット時代の新たな設計論

関連記事