カイ氏伝

先ほどのエントリーでも触れたソーシャルブックマークのまとめボタンですが、油断していたら先を越された！！

小技の効いた 「ブックマークに追加」 ボタン | WWW WATCH
http://hyper-text.org/archives/2006/10/add_bookmark_icon.shtml

いい感じ: 小技を仕込む
http://kwmr.blogzine.jp/kanji/2006/10/post_7e2d.html

というわけでもちろんついカッと（ｒｙ　な流れでこちらでも導入しましたよ。

で、うちのブログに設置するときにいじったところをちょろっとメモ書きしておきます。

まずアイコンの設置場所とリンク方法ですが、まえにも触れたとおりうちのブログはTOPがhttp://blogging.from.tv/blog/なのにエントリーページはhttp://blogging.from.tv/archives/となっているので、ブログのルートにファイルを置いても画像が表示されない。でもこういうブログカスタマイズ系のファイルはあとでわかりやすいようブログのルートにまとめて置きたいので、MTBlogURLと使ってhttp://blogging.from.tv/blog/以下の画像を表示するようにいじってみました。

<ul id="add_bookmarks_block">
<li><a href="#" onmouseout="add_bookmarks.hidePopup('add_bookmarks')" onmouseover="add_bookmarks.showPopup('add_bookmarks')" title="各種ブックマークに追加"><img src="<$MTBlogURL$>/img/icon/add-bookmarks.gif" width="14" height="14" alt="各種ブックマークに追加" /></a>
<ul id="add_bookmarks" style="display:none" onmouseout="add_bookmarks.hidePopup('add_bookmarks')" onmouseover="add_bookmarks.showPopup('add_bookmarks')">
<li><a href="http://b.hatena.ne.jp/append?<$MTEntryPermalink$>" rel="nofollow" title="Hatenaブックマークに追加"><img src="<$MTBlogURL$>/img/icon/hatena.gif" width="16" height="16" alt="Hatenaブックマークに追加" /></a></li>
<li><a href="http://del.icio.us/post?url=<$MTEntryPermalink encode_url="1"$>&title=<$MTEntryTitle encode_url="1"$>" rel="nofollow" title="del.icio.usに追加"><img src="<$MTBlogURL$>/img/icon/delicious.gif" width="16" height="16" alt="del.icio.usに追加" /></a></li>
<li><a href="http://pookmark.jp/post?url=<$MTEntryPermalink encode_url="1"$>&title=<$MTEntryTitle encode_url="1"$>" rel="nofollow" title="POOKMARK Airlinesへ追加"><img src="<$MTBlogURL$>/img/icon/pookmark.gif" width="18" height="16" alt="POOKMARK Airlinesへ追加" /></a></li>
<li><a href="http://clip.livedoor.com/redirect?link=<$MTEntryPermalink encode_url="1"$>&title=<$MTEntryTitle encode_url="1"$>" rel="nofollow" title="livedoorクリップへ追加"><img src="<$MTBlogURL$>/img/icon/livedoor_clip.gif" width="16" height="16" alt="livedoorクリップへ追加" /></a></li>
<li><a href="http://clip.nifty.com/create?url=<$MTEntryPermalink$>&title=<$MTEntryTitle encode_url="1"$>" rel="nofollow" title="ニフティクリップへ追加"><img src="<$MTBlogURL$>/img/icon/nifty_clip.gif" width="16" height="16" alt="ニフティクリップへ追加" /></a></li>
<li><a href="http://bm.saaf.jp/bm/add?url=<$MTEntryPermalink encode_url="1"$>" rel="nofollow" title="Saafブックマークへ追加"><img src="<$MTBlogURL$>/img/icon/saaf.gif" width="16" height="16" alt="Saafブックマークへ追加" /></a></li>
<li><a href="http://newsing.jp/nbutton?title=<$MTEntryTitle encode_url="1"$>&url=<$MTEntryPermalink$>" rel="nofollow" title="newsingへ投稿"><img src="<$MTBlogURL$>/img/icon/newsing.gif" width="16" height="16" alt="newsingへ投稿" /></a></li>
<li><a href="http://www.choix.jp/bloglink/<$MTEntryPermalink$>" rel="nofollow" title="Choixへ追加"><img src="<$MTBlogURL$>/img/icon/choix.gif" width="16" height="16" alt="Choixへ追加" /></a></li>
<li><a href="http://www.furl.net/storeIt.jsp?t=<$MTEntryTitle encode_url="1"$>&u=<$MTEntryPermalink$>" rel="nofollow" title="Furlへ追加"><img src="<$MTBlogURL$>/img/icon/furl.gif" width="16" height="16" alt="Furlへ追加" /></a></li>
<li><a href="http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url=<$MTEntryPermalink$>&Title=<$MTEntryTitle encode_url="1"$>" rel="nofollow" title="Blinklistへ追加"><img src="<$MTBlogURL$>/img/icon/blinklist.gif" width="16" height="16" alt="Blinklistへ追加" /></a></li>
<li><a href="http://reddit.com/submit?url=<$MTEntryPermalink$>&title=<$MTEntryTitle encode_url="1"$>" rel="nofollow" title="Redditへ追加"><img src="<$MTBlogURL$>/img/icon/reddit.gif" width="16" height="16" alt="Redditへ追加" /></a></li>
</ul>
</li>
</ul>

次にCSS。元のCSSだとピクセルで表示位置を指定しているので、ブログにある通りCSSをいじって自分の置きたい場所に設置。具体的には

top:32px;
left:390px;

を削除した上でCSSを追記。さらにアーカイブのHTMLではタイトルの真横にソースを追加しました。

しかし目下のところの悩みは、なぜかしらないけれどショートカットが動作しなくなってしまったこと。しかし前述のいい感じでは両方動いているので、何かしら自分の設置が悪いらしい。ショートカット気に入ってるのに悩む悩む……。なんとか解決方法探ってみます。

追記：と思ったけど、いい感じではエントリーページにはショートカット導入していないから違いますね。両方は共存できないのだらうか……。