はてなブックマークボタンの吹き出しデザインをFacebookやTwitterのものと同じにしよう!

c3a8ffffb3cd8a936f81a202ea56f84a.jpg

ブログにソーシャルボタンを貼り付けてる方が多いかと思います。
私も、今使っているテーマ”Stinger3”をちょちょっといじって、Twitter、Facebook、Google+、はてなブックマーク、Pocketの5種類のボタンをつけていました。
ところが・・・

はてなブックマークだけデザインが違う!

手帳との相性抜群で使いやすいふせん ブックマーク付せん そふぁねブログ
そう、そふぁねブログのはてなブックマークボタンはいままでコレだったのです。↓
このエントリーをはてなブックマークに追加

でも、コッチにそろえたい。↓
このエントリーをはてなブックマークに追加

はてなブックマークだけデザインが違って、なんだか浮いていたんですよね・・・
そんなわけで、望み通りの吹き出しデザインにする方法を探ってみました。

はてなブックマークボタンのデザインを直そう

対象となる人

  • はてなブックマークボタンを表示している部分のコードがどこにあるか分かる(自力で探せる)人

コードを直そう

はてなブックマークのボタンを表示しているコードの中に、デザインを指定している部分があります。

data-hatena-bookmark-layout="vertical”

ここを

data-hatena-bookmark-layout="vertical-balloon”

にしてあげると・・・
手帳との相性抜群で使いやすいふせん ブックマーク付せん そふぁねブログ 2
求めていたのはコレですよ。Bookmark数が0なのはご愛嬌。

細かいデザインも気にしたいですよね!

アイコン
人気のブログを見ると、細かいところまで気を配られているなぁと思うことがよくあります。私はデザインについてはド素人なので、見た目をどこまでも追求する段階にはありません。面白い記事を書く努力をするほうが優先順位が高いのです。
とはいえ、ボタンのデザインが違うなんていうのはド素人の私でもわかるし、あんまり気持ちのいいものではありません。こういう細かいポイントも、ちょっとずつメンテナンスして、自分のお気に入りのブログに育てていきたいものです。

参考

Blogger記事に「はてなブックマーク」ボタンを設置する方法 | Asterlist

はてなブックマークボタンの作成・設置について – はてなブックマーク

スポンサードリンク