すなばいじり

はてなブログを使って、トンピーを揃えるまで止めないブログ。ふっくらかわいい。

はてなスターを忍者ブログにつけるやつを答えた

sandbox JavaScript はてな

忍者ブログを利用してますがどうしてもはてなスターを設置できま.. - 人力検索はてな
お手軽に「ここにお願いね(ぽちり)」という感じではなかったので、メモしておきます。

設置の仕方ページでは「ここをこうやって指定してやるとこの部分が設定できます」という仕様とか説明があるのですが、初見で躓きそうな部分をちょっと図解しておきます。
タイトルでは「忍者ブログ」と書いてありますが、それ以外の対応していないブログでも応用できるような書き方をしますよ。

早速カスタマイズする

最初にスクリプト一式を準備します。
f:id:psne:20140404030558p:plain
ここは普通にコピーして大丈夫です。

ひとつめの記事のタイトル　ここに付けたい

本文が表示されているよ。
B! ヒ 顔

そして、ここにつけたい。

ブログのソースを調べる

実際に貼り付けたいブログのソースを見る必要があります。
大体が、

<div class="ブログ本文色々">

	<div class="1記事分">
		<h1><a href="/0000001">ひとつめの記事のタイトル</a></h1>
		<div class="記事の本文">本文が表示されているよ。</div>
		<div class="ソーシャルなやつとか"> B! ヒ 顔 </div>
	</div>

	<div class="1記事分">
		<h1><a href="/0000002">ふたつめの記事のタイトル</a></h1>
		<div class="記事の本文">本文が表示されているよ。</div>
		<div class="ソーシャルなやつとか"> B! ヒ 顔 </div>
	</div>

</div>

こうなっていると思います。
はてなスターをブログに設置するには - はてなスター日記

普通は、サイトに entryNode が1つまたは複数あり、そのそれぞれの中に entryNode.title, entryNode.uri, entryNode.container があるという構成になります。

それぞれの要素は、CSS のルールを用いて、JavaScript で指定します。例えば、はてなダイアリーでは次のように設定されています。

多分、この辺でつまづく。正解しないとhttp://s.hatena.ne.jp/images/add.gifが出て来ないので、試してみてもよく分からない→諦めるパターンかもしれません。

指定の仕方はCSSと同じなので、CSSについて少し理解しておくと分かりやすいかと思います。


それでは、いってみましょう。

実際にカスタマイズする

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

  • エントリに対応する HTML 要素 (entryNode)
    • エントリのタイトルに対応する要素 (entryNode.title)
    • エントリの permalink に対応する要素 (entryNode.uri)
    • "Add Star http://s.hatena.ne.jp/images/add.gif" ボタンが入る要素 (entryNode.container)

普通は、サイトに entryNode が1つまたは複数あり、そのそれぞれの中に entryNode.title, entryNode.uri, entryNode.container があるという構成になります。

1つの記事がここまでだよ　と教える

エントリに対応する HTML 要素 (entryNode)

これは、

<div class="ブログ本文色々">

<div class="1記事分">

　　　　　　　　この部分全般です

</div>

</div>

この部分を指します。
Hatena.Star.SiteConfigでは、どのように指定すれば良いでしょうか。

Hatena.Star.SiteConfig = {
  entryNodes: {
    'div.1記事分': {
    }
  }
};

こうですね。はてなスターに「この中に記事が入ってるから、よろしくね」と指定します。



一部のブログなどでは、

<div class="1記事分">

クラス名ではなく、

<div id="ブログ本文入ってるやつ">

というように、IDで指定されている場合もあります。この場合は、

Hatena.Star.SiteConfig = {
  entryNodes: {
    'div#ブログ本文入ってるやつ': {
    }
  }
};

このような書き方( # を挟む)になります。CSSと同じですね。

タイトルはここだよ　と教える

次に、

エントリのタイトルに対応する要素 (entryNode.title)

<div class="ブログ本文色々">

<div class="1記事分">


<h1>この部分です</h1>


</div>

</div>

この例では、クラス「1記事分」に囲まれた「h1」の中にタイトルがあるので、こうなります。

Hatena.Star.SiteConfig = {
  entryNodes: {
    'div.1記事分': {
      title: 'h1',
    }
  }
};

このようになります。

URLはここですよ　と教える

エントリの permalink に対応する要素 (entryNode.uri)

スターを付けるURLも指定してあげましょう。
先ほどの例では、URLの部分はわざと消してあります。実際は、

<div class="1記事分">
<h1><a href="/0000001">ひとつめの記事のタイトル</a></h1>
</div>

こうでしたね。　もうわかります？では、答え合わせ。

Hatena.Star.SiteConfig = {
  entryNodes: {
    'div.1記事分': {
      uri: 'h1 a',
      title: 'h1',
    }
  }
};

なお、URLとタイトルについては、ページに使われている物を利用することが出来ます。
例えば、記事の個別ページではリンクが貼られていない事があります。

その場合は、

Hatena.Star.SiteConfig = {
  entryNodes: {
    'div.1記事分': {
      uri: 'document.location',
      title: 'document.title',
    }
  }
};

というように置き換える事で、自動的にURLとタイトルを取得してくれます。

ここにスターを表示させてね　と教える

"Add Star http://s.hatena.ne.jp/images/add.gif" ボタンが入る要素 (entryNode.container)

最後は「この部分にhttp://s.hatena.ne.jp/images/add.gifを置いてね」という設定です。

ひとつめの記事のタイトル　ここに付けたい

本文が表示されているよ。

例では「h1」で囲まれたの後ろにつけたいので、

Hatena.Star.SiteConfig = {
  entryNodes: {
    'div.1記事分': {
      uri: 'h1 a',
      title: 'h1',
      container: 'h1'
    }
  }
};

このようになります。
完成ですね！これで

ひとつめの記事のタイトルhttp://s.hatena.ne.jp/images/add.gif

本文が表示されているよ。
B! ヒ 顔

このように表示されます。



ちなみに、

container: 'h1'

となっている部分を

container: 'parent'

とすると、どこに表示されるでしょうか。


答えは、

http://s.hatena.ne.jp/images/add.gif

ひとつめの記事のタイトル

本文が表示されているよ。
B! ヒ 顔

この部分になります。

完成したものを眺める

では、カスタマイズしたものを合体させましょう。

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.SiteConfig = {
  entryNodes: {
    'div.1記事分': {
      uri: 'h1 a',
      title: 'h1',
      container: 'h1'
    }
  }
};
Hatena.Star.Token = "(トークン)";
</script>

あとは、これを貼り付けるだけですね。
ブログのテンプレートは、お使いのCMSによって異なります。使っているブログのヘルプを参考にしてください。

</body>

の上あたりが個人的にはお勧めですよ。

忍者ブログにスターを貼り付ける際のコード

この記事を書いた時点でのコードになります。

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.SiteConfig = {
	entryNodes: {
		'ul.entryList': {
			uri: 'li a',
			title: 'li',
			container: 'li a'
		},
		'h1.articleTitle': {
			uri: 'document.location',
			title: 'document.title',
			container: 'parent'
		}
	}
};
Hatena.Star.Token = "(トークン)";
</script>

'ul.entryList'は、TOPページ用、'h1.articleTitle'は記事の個別ページ用になります。
ドメインたくさんありすぎて「貼り付けるだけでOK」が出来ないような気がするので、自力でカスタマイズするのが確実ではないでしょうか。



どうぞご利用ください。

こぐまのトンピー

こぐまのトンピー