はてながまた新しいサービスのはてなスターってのを始めましたねぇ。

なんでも

「日々ブログを読んでいていいなと思っても、コメントを書いたりトラックバックを送るのは敷居が高く、気持ちが十分に書き手に伝わらずに終わってしまうことも多いでしょう。はてなスターは既存のブログにワンクリックでがつけられます。あなたのいいなと思った気持ちをに変えて、世界のブログにをつけよう！」

てなことらしい。

いわゆるweb拍手みたいなもんですかね。

ただ、Web拍手と違うのは、お互いのユーザーが☆を付けた場合には隣にコメントマークが付いて、相手にコメントなんかを送れるようになります。

はてな以外のブログにも設置できるということで、我がNotquicka9にも設置してみました。

といっても、もう1週間ほど前のことになるんですが、ず～っと記事を書かないでいました。

というのも、このはてなスターの設置説明が「うそだろ！？」って位不親切で、きちんと設置できるまでに小一時間、あちこちのWebサイトを探し回って、ようやく仕組みを把握したんですよねぇ。

なもんで、こりゃまだまだだな(-。-)とか思ってて、設置説明なんかを仕事の合間に書いたりしているうちに、あれよあれよと時間が経ってしまい、今になっちゃった訳です。

ところが、今朝たまたまはてなスターのスタート画面に行ったら、詳細な設置説明が載っていました。さすがに、あの説明では苦情殺到だったんだろうなぁと、容易に想像できますね(^_^;

ってことで、詳細な設置説明ははてなスターをブログに設置するにはをどうぞ。

これで分からなかったら、とりあえずあきらめろ！ってくらい詳細な説明が載っています。

で、とりあえず、私が苦労したところって事で、備忘録です。

うちはMovabletypeなわけですが、まず、普通に説明通り設置しただけで表示されるMTの方は半分以下かと思われます。

というのも、初期状態で表示される条件は「エントリタイトルがH2タグで、なおかつAタグのリンクになっていること」となっています。

結論から言うと、以下のコードをMTのテンプレートHeader内に埋め込む訳です。

ところが、この設定だとH2タグのリンクにしか付きません。私のブログではタイトルにH2タグを使っていない為に、これだけではもちろんだめ。

そこで、こういう風に変えました。

こうする事で、divタグでArticleTitleクラスのリンクの直後に、はてなスターが表示されるようになります。

ですから、この部分を各ブログに合わせて書き換える事で、ある程度柔軟に対応出来るでしょう。
ひつようならば、専用のクラスを作ってしまえば良いのです。

さらにうちでは、Addマークと☆マークがずれて表示されてしまうという不都合がありましたが、これはimgのCSS内のAllign指定が適切ではなかったようで、その辺も若干変更して、今の状況に落ち着きました。

はてなスター日記を読んでみると、まだまだ日々進化しているようなので、注目していきたいと思います。

人気度：

9%

MovableType