はてなカラースターの表示改善

はてなカラースターのデフォルトの色は明度が似ていて，自分のような色弱者には猛烈に区別がしにくいです．そこで，firefoxのuserContent.cssにちょっと細工してみました．
参考にさせていただいたのはこちら．
2009-04-08
色覚異常によるカラースターの色の見え方 - no.10

画像を上げたりGreasemonkeyを使うのは面倒で，スターはスターとして表示したかったのでこんな風にしました．

普通の黄色スターは通常通り表示します．緑のスターは縦に2つ，赤のスターは縦に3つ…というように，縦に積むことにしました．なので，表示しているスターの数と実際に付けられたスターの数は異なることになります．ご了承ください．

firefoxのuserContent.cssに以下を追記です．前述したリンク先のcssを書き替えただけなので，中身についてはイマイチ分かってないです．

/*はてなスターの色を変える*/
@namespace url(http://www.w3.org/1999/xhtml);
img[src="http://s.hatena.ne.jp/images/star.gif"],
img[src="http://s.hatena.ne.jp/images/star-green.gif"],
img[src="http://s.hatena.ne.jp/images/star-red.gif"],
img[src="http://s.hatena.ne.jp/images/star-blue.gif"],
img[src="http://s.hatena.ne.jp/images/star-purple.gif"]{
  height: 0;
  width: 0;
}

/* 黄色のスター */
img[src="http://s.hatena.ne.jp/images/star.gif"]{
  /* 画像サイズ */
  padding: 10px 11px 0 0 !important;
  /* 画像の指定 */
  background: url("http://s.hatena.ne.jp/images/star.gif");
}

/* 緑のスター */
img[src="http://s.hatena.ne.jp/images/star-green.gif"]{
  padding: 20px 11px 0 0 !important;
  background: url("http://s.hatena.ne.jp/images/star-green.gif");
}

/* 赤のスター */
img[src="http://s.hatena.ne.jp/images/star-red.gif"]{
  padding: 30px 11px 0 0 !important;
  background: url("http://s.hatena.ne.jp/images/star-red.gif");
}

/* 青のスター */
img[src="http://s.hatena.ne.jp/images/star-blue.gif"]{
  padding: 40px 11px 0 0 !important;
  background: url("http://s.hatena.ne.jp/images/star-blue.gif");
}

/* パープルのスター */
img[src="http://s.hatena.ne.jp/images/star-purple.gif"]{
  padding: 50px 11px 0 0 !important;
  background: url("http://s.hatena.ne.jp/images/star-purple.gif");
}

問題点は以下のように文中でも縦にスターが積まれてしまうことです．

この点についてはとりあえず妥協しています．はてなの方でデフォルトの色をもっと区別がしやすいものに変更してくれたらいいんですけどね．