はてなブックマークのボタンをオリジナルの画像やテキストに置き換える方法

Tweet

238

はてなブックマークへ記事をブックマークしてもらうためのボタンがあります
でも、オリジナルの画像に差し替えたり、テキスト化したいって時がありますね

はてなブックマークの場合は、TwitterやFacebookの時よりも簡単に
ボタンをテキスト化、画像の差し替えが出来ます

はてなブックマークのボタンをテキスト化・画像の差し替えをする

<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" 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タグ、imgタグ、scriptの3つに分けることが出来ます
このうち画像のimgの箇所をテキストに変更、もしくは別の画像に変更するだけ表示を簡単に変えてやれます

変更後（テキスト）

HTML部分

<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button my-hatebu" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加">
はてなブックマークする！
</a>

スクリプト部分

<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

スクリプトの部分は分離して、フッター等に置いておくことも出来ます
また、複数回HTML部分を記入しても大丈夫です、スクリプト部分は1つのページに1つだけで大丈夫です

Tweet

短縮URL:

2013年12月11日 WEB制作系 SNSはてなブックマーク