どなたかのツイートで知ったのですが、当ブログでも配置しているはてなブックマーク(はてブ)のボタンが新しくなりました。

使いやすくなりました! はてなブックマークボタン

新しいはてなブックマークボタン


さっそく入れ替えてみました。ちなみに旧デザインではこんな感じに表示されてました。

旧はてなブックマークボタンによるデザイン

ソースの取得も簡単です。
上記画像のとおりフォームに必要事項を入力すると右側にソースを表示します。
が、ライブドアブログの場合(他、ブログもそうだと思いますが)ちょこっと改造が必要。

まずは、画像の通りやって得たソースが以下のとおり。

<a href="http://b.hatena.ne.jp/entry/http://webdirector.livedoor.biz/" class="hatena-bookmark-button" data-hatena-bookmark-title="地方の印刷会社Webディレクターの日記" data-hatena-bookmark-layout="standard" 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>

これの赤字の部分をそれぞれ書き換えます。
フォームに直接入力すると例のごとくデコードしてしまうので使えません。
以下のように書き換えます。

<a href="http://b.hatena.ne.jp/entry/<$ArticlePermalink$>" class="hatena-bookmark-button" data-hatena-bookmark-title="<$ArticleTitle ESCAPE$> : 地方の印刷会社Webディレクターの日記" data-hatena-bookmark-layout="standard" 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>

あとは、今までソースの入っていた部分を差し替えればOK。

こんな感じのレイアウトになりました。

新はてなブックマークボタンによるデザイン

他のボタンとも釣り合ってますし、なかなかいい感じじゃないでしょうか?