2007-07-07

はてなスターの仕組み

はてなスターは、はてなダイアリー、はてなグループでは自動的に表示されますが、それ以外のブログサービスでも、利用していただくことが可能です。ここでは、その方法と、はてなスターの仕組みについて解説します。

はてなスターでは、JavaScriptを利用しています。はてなスターの提供するJavaScriptファイルをご自分のブログのページ内で読み込むことで、ページの読み込み完了とともにそのJavaScriptが実行されます。JavaScriptでは、そのページに存在する記事とPermalink（記事ごとの固有のURL）を検出し、その記事につけられたスターの数をはてなスターのサーバに問い合わせます。そして、その結果と、星を追加する「Addボタン」ボタンをページ内に埋め込みます。

「Addボタン」が押された際にも、はてなスターのサーバに問い合わせが行われ、スターの情報が保存されます。

スターの数の表示や、ボタンが押されたときの処理、コメントを記述する際の入力ウインドウの表示、といったすべての処理は、はてなスターのJavaScriptプログラムによって行われます。したがって、基本的にはそのJavaScriptを読み込みさえすれば、スターの機能をつけることが可能です。

ただし、各ブログサービス、システムによって、HTMLの構造は異なるため、タイトルやPermalink、星をつける位置などの検出を、はてなスターが正しく行えない場合があります。そうした場合は、さらにカスタマイズを行うことで、正しく動作させることが可能になります。

また、「正しく動作させる」だけでなく、スターや「Addボタン」、「コメントボタン」のアイコンを変える、といった好みに応じたカスタマイズも可能になっています。

お好みにあわせて、はてなスターをお楽しみください。
ちなみに、はてなスターを利用できるのは、ブログだけではありません。ある情報のカタマリ（たとえばWikiや、ニュースの記事、掲示板など）が、それぞれ固有のURL（Permalink）さえ持っていれば、スターをご利用いただくことができます。

2007-07-07

はてなスターをブログに貼り付ける

本エントリの内容は Hatena Developer Center へ移動しました。
はてなスターをブログに設置するには - Hatena Developer Center

2007-07-07

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

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

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

画像を用意したら、はてなスターを貼り付けたページのヘッダにて、以下のような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);

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

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