はてなスターの画像が自由に変更できるようになりました

さきほど、はてなスターの機能拡張を行い、スタイルシートで設定するだけで簡単にはてなスターの画像を変更できるようになりました。この方法を使うと、はてなダイアリーなど、スタイルシートが編集可能な環境ならどこでも簡単に画像を変更できます。

今回の機能により、「Commentボタン」「Addボタン」「☆」のそれぞれの画像を変更することができます。それぞれ以下の項目を編集することで指定が可能です。

/* Commentボタンの画像をurl()の中に指定します */
.hatena-star-comment-button-image {
  background-image: url(http://exapmle.com/comment.gif);
}

/* Addボタンの画像をurl()の中に指定します */
.hatena-star-add-button-image {
  background-image: url(http://exapmle.com/add.gif);
}

/* ☆の画像をurl()の中に指定します */
.hatena-star-star-image {
  background-image: url(http://exapmle.com/star.gif);
}

たとえば、☆をid:rikuoさんのはまぞうイラスト（）に変える場合は以下のような指定を行います。

.hatena-star-star-image {
  background-image: url(http://f.hatena.ne.jp/images/fotolife/r/rikuo/20070529/20070529235853_m.jpg);
}

なお、これまでのようにJavaScriptで画像ファイルを指定する方法もご利用頂けますが、今後はこのスタイルシートを用いた方法を推奨としていきたいと思いますので、今後設定される方はこちらの方法で指定頂ければと思います。

また、この機能を使って、近日中にはてなの標準テーマの各色に合わせたボタンを用意し、それぞれのテーマ色にあわせたボタンが最初から表示されるよう対応を行う予定です。

どうぞご利用ください。