このブログにも、はてなスターを付けてみました。
…いや実は、既に何度かトライしてたんですが。
1度目は、CHEEBOWさんがやってるのを見たとき。
はてなの新サービス「はてなスター」が始まりましたねー。
これって、WEB拍手みたいな感じなのかなー。はてなブックマークよりもゆるーい感じに使えそうな感じです。
それに、自分のエントリのタイトルに星がついていくのもなんとなく楽しげです。
というわけで、さっそくこのブログにも設置してみました。
ヒビノアワ: はてなスターをつけてみたはてなスターのリリースからまだ1週間も経ってない頃。ていうか即。
ただ、当時、CHEEBOWさんのエントリを読んで、
なぜだか、
“はてなスターの挙動に合わせてテンプレを変える必要があるんだ”
…ていうような話を信じ込んでたんですね。
（無精して、HatenaStar.js全部は読まなかったし）
このサイトのテンプレは、クラス名から何から、
殆ど無視して1から作ってるから…それはまたしんどい。
テンプレ全部変えて、再構築とか面倒…
そ れ は で き ね ぇ
とか思って、1回目の断念。
で、2回目に、やっぱりはてスタ付けようと思ったのは、
Fumiaki Yoshimatsuさんの、
MovableType向けプラグインを作ったっていうエントリを見掛けたとき。
はてなスターをMovable Typeで表示する方法はいろんな人が書いてるけど、やっぱHTMLタグ書くのはMTらしくないだろーってことで、今日のhack-a-thonでMTHatenaStarを書いてみた。
ここでのアプローチは、プラグインの設定でトークンを埋め込んでしまえば、
後はタグでスターを自由に置けるよ、っていう感じでした。
（よくよく考えればこの時点で、テンプレに左右されないスターの表示法が発表されてたんですけど）
こりゃ便利だ、そうだプラグインだよね、
とか思って導入してみたのだけど…表示されない。
うーん。
悩むことしばし、プラグイン見て気付いた、
ああ、これ、3.21じゃ使えないじゃん。
途中までいじって、トークンの設定をちゃんと出来るようにまではしたけど、途中で投げ。
いや、やれば出来るだろうから（挿入する文字列を構成するだけだから）、
そのうち、時代に乗らない人々向けのプラグインも書くかもしれないけど、
そのときは、まいっか、と。
2回目の断念。
んで、今日。
CSSを利用して、自由にスターの画像を変えることが出来るようになったよ、
というリリースノートを受けて、
さきほど、はてなスターの機能拡張を行い、スタイルシートで設定するだけで簡単にはてなスターの画像を変更できるようになりました。この方法を使うと、はてなダイアリーなど、スタイルシートが編集可能な環境ならどこでも簡単に画像を変更できます。
ふと思い出して、何となくやってみた。
プラグインの流れで調べてみたところ、
スターを挿入する部分を示すタグとクラス名は、
自由に設定できるってことだったので、
記事の題名と記事のURLの対応関係が記述されていれば、以下の JavaScript を挿入することで、対応できます。
それを参考に設定。
まぁつまり、観測気球さんのエントリを引用させていただくと、
<タグ><a href="その記事のパーマリンク">記事の題名</a></タグ>
なら
Hatena.Star.EntryLoader.headerTagAndClassName = ['タグ',null];<タグ class="クラス名"><a href="その記事のパーマリンク">記事の題名</a></タグ>
なら
Hatena.Star.EntryLoader.headerTagAndClassName = ['タグ','クラス名'];うちのサイトのタグは、こんな感じ。
<script type="text/javascript" src="https://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.EntryLoader.headerTagAndClassName = ['div', 'EntryTitle'];
Hatena.Star.Token = 'トークン';
</script>これを、書けば、あら不思議。
スターが表示されました。
ま、驚くほど単純でしたね。
無精はするな、と（苦笑）
ところで、今回のきっかけになった、
☆の画像を変えるテクニックは、基本的にCSS。
以前は、JavaScriptをねじ込んで変えてたんだけど、
CSSで設定できるようになって、
より、いじりやすくなりました。うん。
なにか良いのが見つかり次第、変えようと思います。あい。
（ちなみにこんなの
も使ってたり）
