新しい「はてブボタン」がリリースされたそうなので、当ブログに設置してみました。

・参考：新「はてなブックマークボタン」をリリースしました。 - はてなブックマーク日記 - 機能変更、お知らせなど

「はてなブックマークボタン」のコード取得

はてブボタンのコードを取得するには下記サイトで、ボタンを設置したいサイトのURLとサイト名を入力し、ボタンタイプを選ぶだけです。



■ボタンの種類

• スタンダード
  (B!＋ブックマーク数を表示)
  
• バーティカル
  (大きめのサイズでB!＋ブックマーク数を表示)
  
• シンプル
  B!のみ（ブックマーク数は表示されません）

ちなみに僕は当ブログのはてブ数が少なくて貧相に見えるので「シンプル」のボタンを選択しました。

コードは下記のようになります。

<a href="http://b.hatena.ne.jp/entry/http://blog.livedoor.jp/bakorer/" class="hatena-bookmark-button" data-hatena-bookmark-title="バコラー日記" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

ライブドアブログへの設置方法

「ブログ設定」→「デザイン」→「デザインカスタマイズ」→「トップページ」、「個別記事ページ」、「カテゴリアーカイブ」、「月別アーカイブ」のHTMLファイル中の各該当箇所を変更します。

僕はブログタイトルの右に「はてブボタン」を設置したかったので、下記のように変更しました。

■変更前
<div id="blog-title-outer" class="blog-header"> <h1 id="blog-title"><a href="<$BlogUrl$>" title="<$BlogTitle ESCAPE$> トップへ"><$BlogTitle ESCAPE$></a></h1> <p id="blog-description"><$BlogDescription$></p> </div>

■変更後
<div id="blog-title-outer" class="blog-header"> <h1 id="blog-title"><a href="<$BlogUrl$>" title="<$BlogTitle ESCAPE$> トップへ"><$BlogTitle ESCAPE$></a> <a href="http://b.hatena.ne.jp/entry/http://blog.livedoor.jp/bakorer/" class="hatena-bookmark-button" data-hatena-bookmark-title="バコラー日記" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> </h1> <p id="blog-description"><$BlogDescription$></p> </div>

以上です。