どうもこんにちは！@dearwalker_yuyaです。
SEOに強いと人気のWordPressテーマ『STINGER5』にはデフォルトでTwitter/Facebook/Google+/はてなブックマークへのシェアボタンが設置されています。
そのままでも全く問題ないのですが、『はてブボタン』は古いデザインのタイプが採用されているので新しいバルーンタイプへ変更してシェアボタンのデザインを合わせてみました。
たった1箇所変更を加えるだけなので超簡単ですよ！
はてブボタンのデザイン変更
シェアボタンを表示させているsns.php（記事ページ）/sns-top.php（トップページなど）に記載されている『はてブボタン』の以下を変更します。
data-hatena-bookmark-layout="vertical"
こちらに変更。
data-hatena-bookmark-layout="vertical-balloon"
これでバルーンタイプに。
CSSで幅を調整
バルーンタイプに変更すると『はてブボタン』が少し横に大きくなります。
『STINGER5』はレスポンシブWebデザインなのでモバイルで横並びが崩れる場合はCSSでmarginを調整してあげればOKです。
調整するのはstyle.cssのmargin-rightを微調整。
.sns .snsb li {
float: left;
margin-right: 10px;
list-style-type: none;
}たったこれだけです。ボタンを生成し直さなくていいので凄く楽ですね。
まとめ
『はてブボタン』のデザインは本当に好みの問題ですが、今回はデザインを合わせる・押しやすそうが理由で変更してみました。
1文変更するだけなので気軽に変えられますね。ぜひぜひお試しあれ。
この記事が参考になれば嬉しいです！変更後はモバイルでの確認もお忘れなく;)