会社のサイトを見ていて、自分のブログとなにか表示が違うな…と思ったら、はてなブックマークボタンが違うのだった。
このようなイメージ。
画像出典：たった1文字ファイル名を変更するだけでPhotoshopを高速化させる方法（DTP・印刷に役立つメールマガジン）
別に動作に問題は全くないのですが、他のバルーン型のソーシャルメディアのボタンと並べると、高さが違うので凸凹の印象を与え、気になります。気になりますよね？（笑）
有名なブログなどでも、このはてなブックマークボタンを使用していて、凸凹が気になります。
このままではあまり気持ちが良くないので、直しちゃいましょう。
あと、知らないうちにはてなブックマークボタンがSSL（httpsのアドレス）のページにも対応していたので、ついでに対応してしまいましょう。
みなさん、はてなブックマーク使っていますか？ そしてブログに設置していますか？
今回ははてなブックマークボタンを設置するにあたって、（本当に）ほんの少し高速化した状態で設置してみましょう。素早く表示されるのは訪問者にとっても悪くないはずです。
はてなブックマークボタンは、はてなブックマークボタン作成のページでフォームに必要事項を入力すれば、HTMLコードが右側に表示されるので、コピーして使えば簡単に使えます。
画像出典：はてなブックマークボタンの作成・設置について（はてなブックマーク）
こんなHTMLコードです。
<a href="http://b.hatena.ne.jp/entry/http://dtp.jdash.info/" class="hatena-bookmark-button" data-hatena-bookmark-title="jdash2000 site" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" style="border: none;" height="20" width="20"></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
このHTMLコードを設置すると、HTMLコードに書かれているスクリプトが読み込まれるまで、以下の画像が表示されます。（表示される4倍のサイズにしています）
スクリプトが読み込み終わって実行されると、以下の画像の様に、はてなブックマークでブックマークされている数と共に表示されます。表示される4倍のサイズにしています）
今回、このHTMLコードで読み込まれている画像に注目してみました。
名前：笹川 純一・jdash2000（Google+のプロフィール）
ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。
お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。
