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

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

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

はてなブックマークの場合は、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つだけで大丈夫です

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)