はてなスターの仕組みはてなスターは、はてなダイアリー、はてなグループでは自動的に表示されますが、それ以外のブログサービスでも、利用していただくことが可能です。ここでは、その方法と、はてなスターの仕組みについて解説します。はてなスターでは、JavaScriptを利用しています。はてなスターの提供するJavaScriptファイルをご自分のブログのページ内で読み込むことで、ページの読み込み完了とともにそのJavaScriptが実行されます。JavaScriptでは、そのページに存在する記事とPermalink(記事ごとの固有のURL)を検出し、その記事につけられたスターの数をはてなスターのサーバに問い合わせます。Addボタン」ボタンをページ内に埋め込みます。Addボタン」が押された際にも、はてなスターのサーバに問い合わせが行われ、スターの情報が保存されます。スターの数の表示や、ボタンが押されたときの処理、コメントを記述する際の入力ウインドウの表示、といったすべての処理は、はてなスターのJavaScriptプログラムによって行われます。したがって、基本的にはそのJavaScriptを読み込みさえすれば、スターの機能をつけることが可能です。各ブログサービス、システムによって、HTMLの構造は異なるため、タイトルやPermalink、星をつける位置などの検出を、はてなスターが正しく行えない場合があります。した場合は、さらにカスタマイズを行うことで、正しく動作させることが可能になります。コメントボタン」のアイコンを変える、といった好みに応じたカスタマイズも可能になっています。お好みにあわせて、はてなスターをお楽しみください。ちなみに、はてなスターを利用できるのは、ブログだけではありません。ある情報のカタマリ(たとえばWikiや、ニュースの記事、掲示板など)が、それぞれ固有のURL(Permalink)さえ持っていれば、スターをご利用いただくことができます。はてなスターをブログに貼り付けるはてなスターを利用するには、まずはてなスターにアクセスし、ログインを行った後、トップページ中央にある「ようこそ、○○さん」のリンクか右上のメニューの「ホーム」をクリックして、あなたのユーザーページにアクセスしてください。ページ右側にある「Blogs」をクリックして、登録ブログ一覧にアクセスします。ここにブログを登録することで、これからスターを貼り付けるブログが、あなたのはてなアカウントとひも付けられ、星のつけられた数をブログ一覧で確認したり、メッセージが書き込まれた際にメールを受け取ったり、といったことが可能になります。ページの一番下に「外部のブログサイトを登録する」という項目があるので、そこにスターを表示させたいブログのトップページのURLを入力して「追加」ボタンを押してください。すると、ブログが登録されて「トークン」が発行され、ブログに貼り付けるHTMLのコードが表示されます。Hatena.Star.Tokenであらわされている英数字が、あなたのブログと、はてなのアカウントを結びつけるトークンです。トークンの設定を行わずにはてなスターを使うことも可能ですこのトークンの設定を行わずにはてなスターの機能を埋め込むことも可能です。この場合は上記のブログ登録とトークンの設定を省いて、以下の1行だけあなたのブログに貼り付けてください。src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>トークンの設定を行わない場合も☆を付ける機能をご利用いただくことができます。この際、はてなスターのBlogsページからのブログ登録の必要はありませんが、コメント機能をご利用いただくことはできません。トークンの設定を行わずにスターを設置したブログで、後からトークンを設定した場合は過去にさかのぼってブログ内のエントリーに対するユーザーの紐付けが行われますので、まず最初はトークンなしで試してみて、その後登録を行う、という使い方も可能です。このコードをあなたのブログに埋め込めば、準備は完了です。埋め込む場所は、ヘッダ(HEADタグ内)がお勧めですが、システムの制限などにより、それができない場合は、ほかの場所でもかまいません。ページ内のどこに埋め込んだ場合でも、はてなスターの処理が実行されるのは、ページの読み込みがすべて終了した後になります。このコードは入力したブログが利用しているサービスやシステムによって、それに対応したコードが表示される場合があります。ブログによっては、これだけでスターの機能が利用できるようになりますが、残念ながらそれだけではうまく動作しないブログサービス・システムもあります。対応しているシステムであっても、テンプレートを変更している場合は、正しく動作しない場合があります。その場合は、さらにカスタマイズを行ってください。代表的なブログサービス、システムにおけるカスタマイズの方法は、後述しますが、ここでは各種ブログへの対応のためのカスタマイズの概要を解説します。ここから先は、ある程度のJavaScriptの知識が必要になってしまいます。対応しているブログサービスの場合は、そうしたカスタマイズが無くても利用できるので、各ブログでのはてなスターの使い方を参照してください。以下の4種類の要素がある必要があります。あるという構成になります。はてなダイアリーでは次のように設定されています。要素のひとつひとつがエントリとなります。エントリのタイトルに対応します。ボタンが表示されます。目的のページに合わせて正しく変更することで、お使いのブログなどにスターを設置することができます。document.locationページのURLdocument.titleページのタイトル複数の指定さらに、次のようにエントリを複数指定することもできます。}};1つのエントリの中に、複数のスターを表示することもできます。構造を持つページにスターを設置しようとしている他のユーザさんが同じ設定を書く手間がはぶけます。どこでもはてなスターが使えるサイトが増えるので一石二鳥です。外部ブログの認証にはブログトップページにトークンの記述が必要です外部ブログにはてなスターの機能を追加した際に、個別のエントリーページのみにはてなスターの機能を追加しようとするとトークンに認証が正常に行われません。これは、トークンの認証の際に、はてなスター側からブログトップページのHTMLを取得し、内部にトークンが含まれているかどうかのチェックを行っているためです。外部ブログではてなスターを利用される場合には、個別のエントリーページにだけスターを表示する場合でも、トップページにトークンだけを記述する最初の認証の際にだけトップページにもコードを設置するなどの対応を行ってください。blogまず、はてなスターに行き、自分のブログをはてなスターに登録して、トークンを発行し、貼り付け用のコードを取得します。blogにアクセスして、ブログの管理ページから、「カスタマイズ/管理」ページにアクセスします。左側のメニューに「デザインの設定」というリンクがあるので、そこからデザインの設定ページのアクセスします。さまざまなブログのデザインの一覧が表示されるので、その一番下にある「カスタマイズ」を選択します。すると、ブログのHTMLを直接編集できる画面が表示されます。そこで「トップページ」「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」の4つのHTMLテンプレートをそれぞれ表示して、その中の</html>というタグの直前に、はてなスターのブログ登録画面で表示されたHTMLのコードをコピーします。class="blogbody">」という部分を探し、そのすぐ下に以下のようにリンクを記述します。href="<$ArticlePermalink$>"></a></div>そして「この内容で保存する」を押して保存します。最後に、画面左上の「ブログに設定を反映(再構築)」を選び、再構築を行います。その際には、すべてのページを再構築してください。すれば、すべてのページのタイトルの横に、スターが表示されるようになっているはずです。一度スターを設定した後に、ブログのテンプレートを変更してしまうと、それぞれのHTMLも書き換わってしまい、はてなスターの設定も消えてしまうので、その場合はもう一度この作業をやり直してください。Bloggerまず、はてなスターに行き、自分のブログをはてなスターに登録して、トークンを発行し、貼り付け用のコードを取得します。続いて、Bloggerの管理画面にアクセスして、スターを設定したいブログの「テンプレート」の「HTMLの編集」画面を開きます。続いて編集画面の「ウィジットのテンプレートを展開」をクリックします。すると、テンプレートが編集できるようになっているので、</head>の直前に、貼り付け用コードをペーストします。続いて、テンプレートの中からh3タグを探し、その直下に以下のようにリンクを挿入します。link'></a>これで設定を保存すると、スターが表示されるようになります。Bloggerには現在、2種類のテンプレート(クラッシックテンプレートとウィジェットテンプレート)がありますが、この解説はウィジェットテンプレートを利用したものです。星の画像が表示されるようになっていますが、この星の画像は、自分の好きなものに変更することができます。画像を、あなたのブログやサイトにもっとよくあうものに変更すれば、はてなスターをより楽しく使うことができるでしょう。画像を変更するには、まずは使いたい画像を用意して、それをどこかにアップロードしておく必要があります。ブログサービスであれば、画像をアップロードする仕組が用意されている場合も多いので、それを利用のもよいでしょう。はてなのフォトシェアリングサービス「フォトライフ」を使うこともできます。画像を用意したら、はてなスターを貼り付けたページのヘッダにて、以下のようなCSSを記述します。url(http://example.com/star.gif);}指定している「http://example.com/star.gif」というURLを、あなたが用意した画像のURLに置き換えてください。ブログサービスを利用している場合は、テンプレートや、CSSを設定する項目を探して、そこに記述してください。ブログによっては、この後再構築をする必要があります。そのほかの画像の変更方法ちなみに、Addボタンや、コメントボタンも同様にして変更が可能です。それぞれ、以下の内容を同じように追記してください。この場合も、URLを自分がアップロードした画像に置き換えてください。url(http://exapmle.com/comment_active.gif);}省略数字のスタイルも変えてみようはてなスターでは、ついたスターの数が増えてくると、すべてのスターが表示される代わりについたスターの数が表示されるようになります。このスタイルを変更することもできます。その場合も、CSSで記述します。8px;}このように設定した場合には、数字の色を「#f4b128」に、フォントのスタイルを太字(bold)に、フォントのサイズを200%に、そして上下のスペースを0ピクセル、左右のスペースを8ピクセルに指定しています。ほかにも、以下のように数字の後ろに画像を表示させることもできます(この場合は、その画像をアップロードしておく必要があります)。url(http://exapmle.com/background.gif);}スターの表示位置を変更するちょっと難易度は高くなりますが、JavaScriptに手を入れることで、スターを出す位置を変更することも可能です。そのためには、Hatena.Star.EntryLoaderクラスのloadEntriesメソッドを書き換えます。このメソッドは、ブログごとに修正が必要になるメソッドです。コメントとスターのデータを表示している部分は、以下のようになっています。Hatena.Star.EntryLoader.createStarContainer();header.appendChild(sc);ここでは、タイトル要素の一番後ろに両方をくっつけているため、タイトルの後ろにそれらが表示されるようになっていますが、これを違う場所に埋め込むよう、コードを書き換えることで、好きな場所に表示させることが可能です。具体的な方法はここでは紹介しませんが、興味があったら、ぜひチャレンジしてみてください。その他の参考情報はてなスター機能を追加する際に参考になるページをご紹介します。はてなスタープラグイン(3)コメントにはてなスターをつけてみたいJUGEMJUGEMにはてなスターいれてみた。プラグインによるはてなスター設置方法が解説されていますはてなスターをつけてみたはてなハート設置してみた。Reserved.はてなAPI規約・ライセンス・商標についてセキュリティに関するお問い合わせサポート・お問い合わせこのグループについて。