hatana_bookmark_anywhere.jsの設置方法とカスタマイズ

Photo by Marco Gomes

　hatana_bookmark_anywhere.jsを設置してくださった方々ありがとうございます。

　ブログへの設置方法を書いてくださっている方がまとめておきます。他のブログへの設置方法を書いていただける方、ご連絡お待ちしています。

WordPressへの設置方法

をかもとさんが、プラグインを公開しています。
WordPress Plugins/JSeries » Hatena bookmark anywhere

Voxへの設置

今書いた記事のブクマを見る – file-glob こと k.daibaの日記

ココログベーシックへの設置方法

去りにし日々、今ひとたびの幻: [blog]ブログにはてブのコメントを表示する

Movable Typeへの設置方法

はてブのコメントを好きな場所に表示する

Seesaa ブログへの設置方法

この際、言いたい放題＝別冊版: はてなブックマークのコメントをブログ上で表示してみた

Livedoor Blogへの設置方法

ドッフの喫茶店:livedoorBlogにはてブを表示 – livedoor Blog（ブログ）

tDiaryへの設置方法

hatena_bookmark_anywhere.js を tDiary に対応させてみたが… – HsbtDiary (2008-04-19)

はてなへの設置方法

残念な事に設置できません

　現在のhatana_bookmark_anywhere.jsは、白背景のサイトを基本に配色しています。これを別配色で行いたい場合やデザインを変更したい場合は、CSSで行うことができます。

　CSSでデザインするためには、埋め込んだスクリプトで指定しているvar hatena_bookmark_anywhere_styleをfalseにしてください。具体的には下のリストのように3行目を書き換えます。

<script type= "text/javascript">/*<![CDATA[*/
// var hatena_bookmark_anywhere_limit = 10; // 表示する件数
var hatena_bookmark_anywhere_style = false; // trueでデフォルトスタイル falseを設定するとCSSでスタイルの指定が可能
// var hatena_bookmark_anywhere_collapse; // trueにすると、コメントの書いてないブクマを表示しない。指定しない場合は、表示件数を超えた場合のみコメントを表示しない
// var hatena_bookmark_anywhere_url; // 表示するURL 未指定の場合、現在のページ
/*]]>*/</script>
<script src="[設置パス]hatena-bookmark-anywhere.js" type="text/javascript" charset="utf-8"></script>
<div id="hatena_bookmark_anywhere"></div>

　この設定をすると、#hatena_bookmark_anywhereでデザインを変更できるようになります。

　デフォルトのCSSは下記のようになっていますので、デザインや配色を変更するときには、この値を参考にしてください。

#hatena_bookmark_anywhere { font-size: 90%; font-family: "Arial", sans-serif; color: #000; }
#hatena_bookmark_anywhere *  { margin: 0; padding: 0; text-align: left; font-weight: normal; font-family: "Arial", sans-serif; }
#hatena_bookmark_anywhere .hatena_bookmark_anywhere_zero { background-color:#edf1fd; border-top:1px solid #5279e7; list-style-position: inside; margin:2px 0 0 0;padding: 8px 5px 12px 8px; }
#hatena_bookmark_anywhere ul { background-color:#edf1fd; border-top:1px solid #5279e7; list-style-position: inside; margin:2px 0 0 0;padding: 8px 5px 12px 8px; }
#hatena_bookmark_anywhere ul li { list-style-type: circle; padding: 1px 0; }
#hatena_bookmark_anywhere .hatena_bookmark_anywhere_user { color: #00e; text-decoration: underline; margin: 0 2px; }
#hatena_bookmark_anywhere .hatena_bookmark_anywhere_tags { font-size: 90%; color: #66c; margin: 0 4px 0 2px; }
#hatena_bookmark_anywhere .hatena_bookmark_anywhere_tags a { text-decoration: none; color: #66c; }
#hatena_bookmark_anywhere .hatena_bookmark_anywhere_go { font-size: 90%; color: #66c; text-decoration: none; }

　私は、デザインが苦手なので、きれいな配色のCSSを公開してくださる方がいると、とてもうれしいです。

追記 2008/04/18 16:16 (PDT)
　tDiaryへの設置方法を追加しました。hsbtさん、ありがとうございました。

追記 2008/04/18 06:32 (PDT)
　Livedoor Blogへの設置方法を追加しました。ドッフさん、ありがとうございました。

追記 2008/04/18 04:31 (PDT)
　Seesaaブログへの設置方法を追加しました。こめろんぐさん、ありがとうございました。