ちょっと前からちょっと気になっていた「はてなスター」を試験的に設置してみました。
記事タイトル横にある☆マークをポチっと押すと記事の横に☆マーク（設定によってはそれ以外の画像）が表示されるというサービスで、特にコメントとかは送れませんが（文字列をドラッグした状態でボタンを押すとその部分の引用は可能）気軽にブログ管理人の気力を上げることが出来ます。はてなIDをもってサービスにログインしている事が条件のサービスなのではてなユーザー以外が多い腐女子サイトとかではどうしても需要のなさそうなネタですが、慣れると拍手とはまた違った味わいがある、中々面白いサービスです。
というわけで今回はSereneBachにはてスタを導入する方法を……書こうとしたのですが、
ぶっちゃけやり方はJUGEMやロリポブログと全く同じなのであまり面白みがありませんでした。ちなみに、個人的にはYukke Clipsさんの説明記事が一番判りやすかったです。
このままでは記事として面白くないので小ネタをひとつ。
（説明がとてつもなくヘボいですが、備忘録代わりなのでご勘弁ください…）
この「はてスタ」、基本的に表示位置は記事タイトルの横ということになってますが、実は外部ブログの場合、形式さえ弄れば記事タイトルの横以外にも表示できます。
head内に記述する
Hatena.Star.EntryLoader.headerTagAndClassName = ['div（タグ名）','entry_title（クラス名）'];
で指定したタグとクラスが
<div class="entry_title"><a href="{entry_permalink}">{entry_title}</a></div>
上記のような記述になっていればいいだけなので、このお約束さえ守っていれば
割と好き勝手な部分に設置する事が可能なのです。
つまり、head内の部分を
Hatena.Star.EntryLoader.headerTagAndClassName = ['span','hatena_star'];
にして、
テンプレート内の好きな場所にこのような記述を追加し、
<span class="hatena_star"><a href="{entry_permalink}">{entry_title}</a></span>
CSSの設定に、以下の記述を書き加えると
.hatena_star a{display:none;}
記事の好きな所に、はてなスター一式だけが設置可能。
…と思ったのですが、display:none;で指定するとはてなスターごと消えてしまう事が発覚。
一応↓の記述で似たような動作はさせられますが、僅かに文字の部分が残って嫌な感じですね。何か文字だけ消す良い方法はないものか…や、素直にタイトルの横にはてスタつけとけ、って話ですけど。
.star a,.star a:hover,.star a:visited{color:#ffffff;font-size:0%;}
ためしに記事タイトルの直下に注意書きつけておいてみた。
タイトル行のデザインが崩れるのがイヤではてスタ設置を諦めている人は是非試してみてくださいね！