はてなスターとmt.Vicuna

mt.Vicunaテンプレートとはてなスターの設置についてほんのちょっとやり方などをメモしておきます。

プラグインを使った方法

最もお手軽とおもわれるのは、プラグインを導入した方法でしょう。Kickstart my heartのFumiaki Yoshimatsuさんが提供されています。

参考：　MTHatenaStar作った

プラグイン導入手順は常の如しで、解凍してフォルダごとシステムのpluginsディレクトリに投げ込みます。

あとは、<$MTHatenaStar$>を設置箇所に貼り付けます。場所は、「MTEntriesのコンテキスト内」にとのことですので、注意するのはこの点です。

各種ブックマークレットのある場所と一緒にしたい、という場合にこの方法だと簡単です。

はてなスターの説明どおりタイトル横につける場合

設置の説明は、「はてなスターをブログに設置するには - はてなスター日記」に記載されています。

はてなスターでは、標準で「h3要素」の情報をもってくるようになっていますので、mt.Vicunaでは、これとは別の要素に指定してあげないといけなくなります。

例えばこのような感じで。トークンの部分はここでは割愛します

<script type="text/javascript">
Hatena.Star.EntryLoader.headerTagAndClassName = ['h2'];
</script>

さて、mt.Vicunaのテンプレートを見ると、記事アーカイブでは、h1要素が記事タイトル、インデックスページやアーカイブインデックスなどは、h2要素が記事ページタイトルですので、テンプレートごとでタイトル部分で使われるHTMLタグが異なっているため、少々カスタマイズしないといけないです。

StarChartLogさまの「AddClipsとはてなスターをつけました」という記事が参考になります。記事ページのタイトル部分がリンクになるように修正をされているようです。

ワタくシの場合は、記事ページでは、先のプラグインによる配置、インデックスページではh2要素に指定という具合に分けて利用しています。

細かく言えば、テンプレートごとではてなスターのHatena.Star.EntryLoader.headerTagAndClassNameの指定をプラグインを使わないテンプレートは['h2']）、プラグイン利用のテンプレートで['span','hatenastar']となるように、MTIｆとMTSetVarなどを使って振り分けています。この方法は、ここでは省きます。

h2要素指定だと使っているスキンでa要素に指定してある背景がスターにも引き継がれてしまう件。

mt.VicunaのNinja Style - Boomer sub skinをつかっているのですが、上記のようにh2要素を指定していざスターをつけてみると、タイトル左に指定してある画像が、はてなスターにも引き継がれているようになっていました。

これは、subSkinのスタイルシートを見たのですが、この部分が原因のようでした。

Vicuna Ninja Style - Boomer sub skin

1-subSkin.css　/Entry/Title　 より

div.entry h2 a {
        padding-left: 18px;
        text-decoration: none;
        color: #000;
        background-image: url(images/icon/v_icon150201.gif);
        background-repeat: no-repeat;
        background-position: left center;
        _background-position: 0 0.35em;
}

div.entry h2 a:visited {
        color: #000;
        background-image: url(images/icon/v_icon150101.gif);
}

h2要素配下のa要素には、画像が適用されてしまうので、スターの場所もa要素がありますから、この指定が引き継いでしまうというわけです。

これを解消するには

a要素の背景画像をやめにしてしまうとか、それでもってh2要素の背景画像にしてしまう

といったところでしょうか。ただ、a要素に画像をあてていることは、li要素にもいえることですが、左の画像をクリックしようとするひとへの配慮といったことが考えられます。ということで、テンプレートの構造をはてなスターのために改変するのは、あまり好ましいことではないと考えました。

では、どうするかというと、はてなスター側のスタイルを変えてあげるということにします。スターの部分を選択して、DOMソースを見ますと、.hatena-star-comment-containerといったクラスが指定されているようです。

このクラスを利用してこのような追加スタイルを設定して対処してみました。ついでに、スターの位置も調整。

.hatena-star-star {
      vertical-align: middle;
      margin-top:0 !important;
}
.hatena-star-comment-container a,
.hatena-star-star-container a{
      background-image: none !important;
      padding-left: 0px !important;
}

スターについてはこのような感じです。