Posted filed under Hatana bookmark anywhere.

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ブログへの設置方法を追加しました。こめろんぐさん、ありがとうございました。

5 Responses to “hatana_bookmark_anywhere.jsの設置方法とカスタマイズ”

  1. maimuzo

    Bloggerに組み込んでみました。そのTipsと、複数記事対応版を作ってみました。このソースの管理方法どうしましょう?

  2. ひとぅ

    素晴らしいツールのご提供、ありがとうございます。
    adiary(http://adiary.org/)への設置方法を記事に書いてみましたのでご報告いたします。
    今後ともよろしくお願い申し上げます。

Trackbacks/Pingbacks

  1.  小鳥ピヨピヨ(a cheeping little bird)
  2.  小さなblog
  3.  o xein’, angellein...