AFFINGER

【STINGER5】『はてブボタン』を新しいバルーンデザインへ変える方法

更新日:

【STINGER5】『はてブボタン』を新しいバルーンデザインへ変える方法

どうもこんにちは!@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文変更するだけなので気軽に変えられますね。ぜひぜひお試しあれ。

この記事が参考になれば嬉しいです!変更後はモバイルでの確認もお忘れなく;)

-AFFINGER
-, ,

Copyright© SiteMiru , 2017 All Rights Reserved.