はてなスター日記

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

07:51 |

はてなスターを利用するには、まずはてなスターにアクセスし、ログインを行った後、トップページ中央にある「ようこそ、○○さん」のリンクか右上のメニューの「ホーム」をクリックして、あなたのユーザーページにアクセスしてください。

そして、ページ右側にある「Blogs」をクリックして、登録ブログ一覧にアクセスします。ここにブログを登録することで、これからスターを貼り付けるブログが、あなたのはてなアカウントとひも付けられ、星のつけられた数をブログ一覧で確認したり、メッセージが書き込まれた際にメールを受け取ったり、といったことが可能になります。

ページの一番下に「外部のブログサイトを登録する」という項目があるので、そこにスターを表示させたいブログのトップページのURLを入力して「追加」ボタンを押してください。

すると、ブログが登録されて「トークン」が発行され、ブログに貼り付けるHTMLのコードが表示されます。

Hatena.Star.Tokenであらわされている英数字が、あなたのブログと、はてなのアカウントを結びつけるトークンです。

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>

このコードをあなたのブログに埋め込めば、準備は完了です。埋め込む場所は、ヘッダ（HEADタグ内）がお勧めですが、システムの制限などにより、それができない場合は、ほかの場所でもかまいません。ページ内のどこに埋め込んだ場合でも、はてなスターの処理が実行されるのは、ページの読み込みがすべて終了した後になります。

なお、このコードは入力したブログが利用しているサービスやシステムによって、それに対応したコードが表示される場合があります。

ブログによっては、これだけでスターの機能が利用できるようになりますが、残念ながらそれだけではうまく動作しないブログサービス・システムもあります。また、対応しているシステムであっても、テンプレートを変更している場合は、正しく動作しない場合があります。その場合は、さらにカスタマイズを行ってください。

代表的なブログサービス、システムにおけるカスタマイズの方法は、後述しますが、ここでは各種ブログへの対応のためのカスタマイズの概要を解説します。ここから先は、ある程度のJavaScriptの知識が必要になってしまいます。対応しているブログサービスの場合は、そうしたカスタマイズが無くても利用できるので、各ブログでのはてなスターの使い方を参照してください。

はてなスター非対応のページでスターを設置するには、ページの HTML に以下の4種類の要素がある必要があります。

• エントリに対応する HTML 要素 (entryNode)
  • エントリのタイトルに対応する要素 (entryNode.title)
  • エントリの permalink に対応する要素 (entryNode.uri)
  • "Add Star " ボタンが入る要素 (entryNode.container)

普通は、サイトに 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 セレクタには、以下が使えます:

E

タグ E の HTML 要素

E.class

クラスが class である要素 E

E#id

ID が id である要素 E

E F

要素 E の子孫である要素 F

E, F

要素 E または 要素 F

E > F

要素 E の直接の子要素である要素 F

E:first-child

要素 E の最初の子要素

E:first-child

要素 E の最後の子要素

E:nth-child(n)

要素 E の n 番目の子要素

E:nth-child(an+b)

要素 E の a × n + b (n = 0, 1, 2, …) 番目の子要素

また、CSS の仕様には含まれていませんが、uri, title, container には次の特殊なセレクタも使えます:

parent

エントリのノード自身

window.location または document.location

ページのURL

document.title

ページのタイトル

複数の指定

さらに、次のようにエントリを複数指定することもできます。

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' }
    ]
}

SiteConfig

あなたのサイトがブログサービスにホストされていて、テンプレートが決まっているような場合には、SiteConfigWiki - はてなスター にその設定を書いておくと、同じ HTML 構造を持つページにスターを設置しようとしている他のユーザさんが同じ設定を書く手間がはぶけます。また、どこでもはてなスターが使えるサイトが増えるので一石二鳥です。

livedoor blog

まず、はてなスターに行き、自分のブログをはてなスターに登録して、トークンを発行し、貼り付け用のコードを取得します。

続いて、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

まず、はてなスターに行き、自分のブログをはてなスターに登録して、トークンを発行し、貼り付け用のコードを取得します。

続いて、Bloggerの管理画面にアクセスして、スターを設定したいブログの「テンプレート」の「HTMLの編集」画面を開きます。

続いて編集画面の「ウィジットのテンプレートを展開」をクリックします。

すると、テンプレートが編集できるようになっているので、</head>の直前に、貼り付け用コードをペーストします。

続いて、テンプレートの中からh3タグを探し、その直下に以下のようにリンクを挿入します。

<h3 class='post-title'>
<a expr:href='data:post.url' style='display:none;' title='permanent link'></a>

これで設定を保存すると、スターが表示されるようになります。

なお、Bloggerには現在、2種類のテンプレート（クラッシックテンプレートとウィジェットテンプレート）がありますが、この解説はウィジェットテンプレートを利用したものです。