はてなスターつけてみたよ!!

はてなスター


My三国志百科事典の記事にはてなスターをつけてみました。(趙雲はこんな感じになりました。)

一応手順メモ
『はてなスターをブログに設置するには』を見ながらやってみたんですが、最初

まず、タイトルが書かれているのがh3ではない場合や、h3のなかでも特定のクラス名が割り当てられているものだけの場合、以下のように、Hatena.StarオブジェクトのheaderTagAndClassNameプロパティに要素名とクラス名をセットします。

との事。なので百科事典のh1タグ(記事名)にクラス名を付けてやってみたんですが、

<h1 class="pedia-title-h1">趙雲<a href="http://my3594.net/pedia/view/%E8%B6%99%E9%9B%B2" style="display: none;"></a></h1>

とクラス名を指定して

Hatena.Star.headerTagAndClassName = ['h1','pedia-title-h1'];

としてみたんですが出ない。。
正確には出ないのでは無く表示させるエレメントが出来てないっぽい。


タグ指定はさっくり諦めて
というわけでタグ指定はさっくり諦めて、loadEntriesメソッドにてオブジェクトを返す方法を試してみました。

どういうコードであっても、そのページに含まれるすべての記事が、以下のようなプロパティを含むオブジェクトの配列として返せれば問題はありません。

との事なので、

Hatena.Star.EntryLoader.loadEntries = function() {
    return [
        {
            uri: "http://my3594.net/pedia/view/%E8%B6%99%E9%9B%B2",
            title: "My三国志 - 百科事典 - 趙雲",
            star_container: document.getElementById("hatena-star_container"),
            comment_container: document.getElementById("hatena-comment_container")
        }
    ];
}

としてh1タグの直後に

<span id="hatena-star_container"></span>
<span id="hatena-comment_container"></span>

と書いたら無事表示された!!

何か☆だけ下に落ち込んでる
表示はされたんですが、☆だけ下に落ち込んでてかっこ悪くなってしまっていました。
なので

span#hatena-star_container img {
    vertical-align: middle;
}

と最後に書いて完了!!

最後に
思ったより時間かかった。。。
後、タグ指定さっくり諦めてしまったんですが、もっと簡単な方法があったら教えてください。
(コメントに答えが有るような気がしますが...後でやってみよう。)