| 
はてなスターは、はてなダイアリー、はてなグループでは自動的に表示されますが、それ以外のブログサービスでも、利用していただくことが可能です。ここでは、その方法と、はてなスターの仕組みについて解説します。
はてなスターでは、JavaScriptを利用しています。はてなスターの提供するJavaScriptファイルをご自分のブログのページ内で読み込むことで、ページの読み込み完了とともにそのJavaScriptが実行されます。JavaScriptでは、そのページに存在する記事とPermalink（記事ごとの固有のURL）を検出し、その記事につけられたスターの数をはてなスターのサーバに問い合わせます。そして、その結果と、星を追加する「
Addボタン」ボタンをページ内に埋め込みます。
「Addボタン」が押された際にも、はてなスターのサーバに問い合わせが行われ、スターの情報が保存されます。
スターの数の表示や、ボタンが押されたときの処理、コメントを記述する際の入力ウインドウの表示、といったすべての処理は、はてなスターのJavaScriptプログラムによって行われます。したがって、基本的にはそのJavaScriptを読み込みさえすれば、スターの機能をつけることが可能です。
ただし、各ブログサービス、システムによって、HTMLの構造は異なるため、タイトルやPermalink、星をつける位置などの検出を、はてなスターが正しく行えない場合があります。そうした場合は、さらにカスタマイズを行うことで、正しく動作させることが可能になります。
また、「正しく動作させる」だけでなく、
スターや「Addボタン」、「
コメントボタン」のアイコンを変える、といった好みに応じたカスタマイズも可能になっています。
お好みにあわせて、はてなスターをお楽しみください。
ちなみに、はてなスターを利用できるのは、ブログだけではありません。ある情報のカタマリ（たとえばWikiや、ニュースの記事、掲示板など）が、それぞれ固有のURL（Permalink）さえ持っていれば、スターをご利用いただくことができます。
|
はてなスターを利用するには、まずはてなスターにアクセスし、ログインを行った後、トップページ中央にある「ようこそ、○○さん」のリンクか右上のメニューの「ホーム」をクリックして、あなたのユーザーページにアクセスしてください。
そして、ページ右側にある「Blogs」をクリックして、登録ブログ一覧にアクセスします。ここにブログを登録することで、これからスターを貼り付けるブログが、あなたのはてなアカウントとひも付けられ、星のつけられた数をブログ一覧で確認したり、メッセージが書き込まれた際にメールを受け取ったり、といったことが可能になります。
ページの一番下に「外部のブログサイトを登録する」という項目があるので、そこにスターを表示させたいブログのトップページのURLを入力して「追加」ボタンを押してください。
すると、ブログが登録されて「トークン」が発行され、ブログに貼り付けるHTMLのコードが表示されます。
Hatena.Star.Tokenであらわされている英数字が、あなたのブログと、はてなのアカウントを結びつけるトークンです。
このトークンの設定を行わずにはてなスターの機能を埋め込むことも可能です。この場合は上記のブログ登録とトークンの設定を省いて、以下の1行だけあなたのブログに貼り付けてください。
<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
トークンの設定を行わない場合も☆を付ける機能をご利用いただくことができます。この際、はてなスターのBlogsページからのブログ登録の必要はありませんが、コメント機能をご利用いただくことはできません。また、トークンの設定を行わずにスターを設置したブログで、後からトークンを設定した場合は過去にさかのぼってブログ内のエントリーに対するユーザーの紐付けが行われますので、まず最初はトークンなしで試してみて、その後登録を行う、という使い方も可能です。
このコードをあなたのブログに埋め込めば、準備は完了です。埋め込む場所は、ヘッダ（HEADタグ内）がお勧めですが、システムの制限などにより、それができない場合は、ほかの場所でもかまいません。ページ内のどこに埋め込んだ場合でも、はてなスターの処理が実行されるのは、ページの読み込みがすべて終了した後になります。
なお、このコードは入力したブログが利用しているサービスやシステムによって、それに対応したコードが表示される場合があります。
ブログによっては、これだけでスターの機能が利用できるようになりますが、残念ながらそれだけではうまく動作しないブログサービス・システムもあります。また、対応しているシステムであっても、テンプレートを変更している場合は、正しく動作しない場合があります。その場合は、さらにカスタマイズを行ってください。
代表的なブログサービス、システムにおけるカスタマイズの方法は、後述しますが、ここでは各種ブログへの対応のためのカスタマイズの概要を解説します。ここから先は、ある程度のJavaScriptの知識が必要になってしまいます。対応しているブログサービスの場合は、そうしたカスタマイズが無くても利用できるので、各ブログでのはてなスターの使い方を参照してください。
はてなスター非対応のページでスターを設置するには、ページの HTML に以下の4種類の要素がある必要があります。
普通は、サイトに entryNode が1つまたは複数あり、そのそれぞれの中に entryNode.title, entryNode.uri, entryNode.container があるという構成になります。
それぞれの要素は、CSS のルールを用いて、JavaScript で指定します。例えば、はてなダイアリーでは次のように設定されています。
<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script> <script type="text/javascript"> Hatena.Star.SiteConfig = { entryNodes: { 'div.section': { uri: 'h3 a', title: 'h3', container: 'h3' } } }; </script>
この例では、section クラスを持つ div 要素のひとつひとつがエントリとなります。それぞれのエントリに対し、h3 要素 (記事の見出し) の中の a 要素 (uri) がエントリの permalink に、h3 要素 (title) がエントリのタイトルに対応します。h3 要素 (container) の末尾に ボタンが表示されます。
この設定の 'div.section', 'h3 a', 2つの 'h3' を目的のページに合わせて正しく変更することで、お使いのブログなどにスターを設置することができます。
要素を指定するための CSS セレクタには、以下が使えます:
また、CSS の仕様には含まれていませんが、uri, title, container には次の特殊なセレクタも使えます:
さらに、次のようにエントリを複数指定することもできます。
Hatena.Star.SiteConfig = { entryNodes: { 'div.section': { uri: 'h3 a', title: 'h3', container: 'h3' }, 'div.commentshort p': { uri: 'span.timestamp a', title: 'span.commentbody', container: 'span.timestamp' } } };
1つのエントリの中に、複数のスターを表示することもできます。
entryNodes: { 'div.section': [ { uri: 'h3 a', title: 'h3', container: 'h3' }, { uri: 'h3 a', title: 'h3', container: 'parent' } ] }
あなたのサイトがブログサービスにホストされていて、テンプレートが決まっているような場合には、SiteConfigWiki - はてなスター にその設定を書いておくと、同じ HTML 構造を持つページにスターを設置しようとしている他のユーザさんが同じ設定を書く手間がはぶけます。また、どこでもはてなスターが使えるサイトが増えるので一石二鳥です。
外部ブログにはてなスターの機能を追加した際に、個別のエントリーページのみにはてなスターの機能を追加しようとするとトークンに認証が正常に行われません。
これは、トークンの認証の際に、はてなスター側からブログトップページのHTMLを取得し、内部にトークンが含まれているかどうかのチェックを行っているためです。
外部ブログではてなスターを利用される場合には、個別のエントリーページにだけスターを表示する場合でも、
などの対応を行ってください。
まず、はてなスターに行き、自分のブログをはてなスターに登録して、トークンを発行し、貼り付け用のコードを取得します。
続いて、livedoor blogにアクセスして、ブログの管理ページから、「カスタマイズ/管理」ページにアクセスします。左側のメニューに「デザインの設定」というリンクがあるので、そこからデザインの設定ページのアクセスします。
さまざまなブログのデザインの一覧が表示されるので、その一番下にある「カスタマイズ」を選択します。
すると、ブログのHTMLを直接編集できる画面が表示されます。そこで「トップページ」「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」の4つのHTMLテンプレートをそれぞれ表示して、その中の</html>というタグの直前に、はてなスターのブログ登録画面で表示されたHTMLのコードをコピーします。
続いて、同じく「トップページ」「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」の4つのテンプレートの中で、「<div class="blogbody">」という部分を探し、そのすぐ下に以下のようにリンクを記述します。
<div class="blogbody"> <div class="posted" style="display:none;"><a href="<$ArticlePermalink$>"></a></div>
そして「この内容で保存する」を押して保存します。
最後に、画面左上の「ブログに設定を反映（再構築）」を選び、再構築を行います。その際には、すべてのページを再構築してください。そうすれば、すべてのページのタイトルの横に、スターが表示されるようになっているはずです。
なお、一度スターを設定した後に、ブログのテンプレートを変更してしまうと、それぞれのHTMLも書き換わってしまい、はてなスターの設定も消えてしまうので、その場合はもう一度この作業をやり直してください。
まず、はてなスターに行き、自分のブログをはてなスターに登録して、トークンを発行し、貼り付け用のコードを取得します。
続いて、Bloggerの管理画面にアクセスして、スターを設定したいブログの「テンプレート」の「HTMLの編集」画面を開きます。
続いて編集画面の「ウィジットのテンプレートを展開」をクリックします。
すると、テンプレートが編集できるようになっているので、</head>の直前に、貼り付け用コードをペーストします。
続いて、テンプレートの中からh3タグを探し、その直下に以下のようにリンクを挿入します。
<h3 class='post-title'> <a expr:href='data:post.url' style='display:none;' title='permanent link'></a>
これで設定を保存すると、スターが表示されるようになります。
なお、Bloggerには現在、2種類のテンプレート（クラッシックテンプレートとウィジェットテンプレート）がありますが、この解説はウィジェットテンプレートを利用したものです。
|
はてなスターでは、標準ではオレンジ色の星の画像が表示されるようになっていますが、この星の画像は、自分の好きなものに変更することができます。画像を、あなたのブログやサイトにもっとよくあうものに変更すれば、はてなスターをより楽しく使うことができるでしょう。
画像を変更するには、まずは使いたい画像を用意して、それをどこかにアップロードしておく必要があります。ブログサービスであれば、画像をアップロードする仕組が用意されている場合も多いので、それを利用のもよいでしょう。はてなのフォトシェアリングサービス「フォトライフ」を使うこともできます。
画像を用意したら、はてなスターを貼り付けたページのヘッダにて、以下のような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);
ここでは、タイトル要素の一番後ろに両方をくっつけているため、タイトルの後ろにそれらが表示されるようになっていますが、これを違う場所に埋め込むよう、コードを書き換えることで、好きな場所に表示させることが可能です。
具体的な方法はここでは紹介しませんが、興味があったら、ぜひチャレンジしてみてください。
|
はてなスター機能を追加する際に参考になるページをご紹介します。
Hatena.Star.headerTagAndClassName
じゃなくて，
Hatena.Star.EntryLoader.headerTagAndClassName
かなと思うんですがどうでしょう（PukiWiki で試してみたら，後者の場合にちゃんと動きました）．もし何かこちらの勘違いならすみませんが．
http://www.blogn.org/
Blogn+に、はてなスターを付けてみました。
http://yamaco.jp/weblog/
ウィジットのテンプレートの .post h3 の前に
.post-title img {
display: inline;
}
を追加したら横に表示できました。
ウェブリブログで、「はてなスター」を導入する場合はどうすれば良いのでしょうか？
大変恐縮ですが、初心者で分かりつらいので、もし良かったら導入の手順を教えて頂ければ幸甚です。
今後とも宜しくお願い致します。
どうしたらよいですか？