はてなスターのimg要素がサイズ指定されてなくてウザい

はてなスターって読み込みが遅いのに、img要素にwidthとかheight属性が指定されてなくてうっとおしい。はてブを見る時に顕著なんだけど、スター画像の読み込み中アイコンがブラウザの規定サイズで表示されて、画像を読み込んだらその大きさに合わせてページがカクカク縮んでいったりする。

HTMLで指定してくれればいいんだけど、画像の差し替えとかを考えてこうなってるんだろう。でもウザい。

そこで、userContent.cssにこれを書く。

img.hatena-star-add-button { width: 16px; height: 12px; }
img.hatena-star-star { width: 11px; height: 10px; }

画像の差し替えに備えて、はてブだけ画像サイズを指定したい人はこれ。

@-moz-document domain(b.hatena.ne.jp) {
    img.hatena-star-add-button { width: 16px; height: 12px; }
    img.hatena-star-star { width: 11px; height: 10px; }
}

これで、スター画像の読み込みでページがカクカクして読み込み終わるまで読めねーなんてことがなくなります。

一応フォローしとくと、userContent.cssは c:/Document and Settings/ユーザ名/Application Data/Mozilla/Firefox/Profiles/何とか.default/chrome/userContent.css に置く。インストール時のままだとuserContent-example.cssってファイルがあるけど、気にせず新規で作ればいい。@charset "utf-8"; ぐらいは引き継いでいい。