もっとカスタマイズをしよう

はてなスターでは、標準ではオレンジ色の星の画像が表示されるようになっていますが、この星の画像は、自分の好きなものに変更することができます。画像を、あなたのブログやサイトにもっとよくあうものに変更すれば、はてなスターをより楽しく使うことができるでしょう。

画像を変更するには、まずは使いたい画像を用意して、それをどこかにアップロードしておく必要があります。ブログサービスであれば、画像をアップロードする仕組が用意されている場合も多いので、それを利用のもよいでしょう。はてなのフォトシェアリングサービス「フォトライフ」を使うこともできます。

画像を用意したら、はてなスターを貼り付けたページのヘッダにて、以下のようなCSSを記述します。

.hatena-star-star-image {
  background-image: url(http://exapmle.com/star.gif);
}

指定している「http://exapmle.com/star.gif」というURLを、あなたが用意した画像のURLに置き換えてください。ブログサービスを利用している場合は、テンプレートや、CSSを設定する項目を探して、そこに記述してください。ブログによっては、この後再構築をする必要があります。

そのほかの画像の変更方法

ちなみに、Addボタンや、コメントボタンも同様にして変更が可能です。それぞれ、以下の内容を同じように追記してください。この場合も、URLを自分がアップロードした画像に置き換えてください。

Addボタン

.hatena-star-add-button-image {
  background-image: url(http://exapmle.com/add.gif);
}

コメントボタン（コメントなし）

.hatena-star-comment-button-image {
  background-image: url(http://exapmle.com/comment.gif);
}

コメントボタン（コメントあり）

.hatena-star-comment-button-image-active {
  background-image: url(http://exapmle.com/comment_active.gif);
}

省略数字のスタイルも変えてみよう

はてなスターでは、ついたスターの数が増えてくると、すべてのスターが表示される代わりについたスターの数が表示されるようになります。このスタイルを変更することもできます。
その場合も、CSSで記述します。

.hatena-star-inner-count {
  color: #f4b128;
  font-weight: bold;
  font-size: 200%;
  padding: 0 8px;
}

　このように設定した場合には、数字の色を「#f4b128」に、フォントのスタイルを太字（bold）に、フォントのサイズを200%に、そして上下のスペースを0ピクセル、左右のスペースを8ピクセルに指定しています。

　ほかにも、以下のように数字の後ろに画像を表示させることもできます（この場合は、その画像をアップロードしておく必要があります）。

.hatena-star-inner-count {
  background-image: url(http://exapmle.com/background.gif);
}

スターの表示位置を変更する

ちょっと難易度は高くなりますが、JavaScriptに手を入れることで、スターを出す位置を変更することも可能です。そのためには、Hatena.Star.EntryLoaderクラスのloadEntriesメソッドを書き換えます。このメソッドは、ブログごとに修正が必要になるメソッドです。

コメントとスターのデータを表示している部分は、以下のようになっています。

var cc = Hatena.Star.EntryLoader.createCommentContainer();
header.appendChild(cc);
var sc = Hatena.Star.EntryLoader.createStarContainer();
header.appendChild(sc);

ここでは、タイトル要素の一番後ろに両方をくっつけているため、タイトルの後ろにそれらが表示されるようになっていますが、これを違う場所に埋め込むよう、コードを書き換えることで、好きな場所に表示させることが可能です。

具体的な方法はここでは紹介しませんが、興味があったら、ぜひチャレンジしてみてください。