WP Social Bookmarking Lightの隙間を埋めるCSS

WordPressのSNSボタンプラグイン WP Social Bookmarking Lightの隙間を埋めるCSSを紹介します。

デフォルト設定で、変に開いてしまうアイコン同士の隙間を、CSSで調整しようというのが記事の趣旨です。

＜調整前＞

＜調整後＞

調整用CSS

WordPress管理画面＞設定＞WP Social Bookmarking Light＞StylesタブにCSSを追加、変更して保存をクリックします。

※.wsbl_twitterは、デフォルトで記述があるので、追加ではなく数字を修正。

.wsbl_twitter{width:96px;}
.wsbl_facebook_like{width:106px;}
.wsbl_hatena_button{width:57px;}
.wsbl_pocket{width:94px;}
.wsbl_google_plus_one{width: 62px;}

他のサービスを設定したい時は、WordPress管理画面＞設定＞WP Social Bookmarking Light＞一般設定タブ＞サービスの記述を、.wsbl_の後ろに付けてください。

もし、それでダメな場合は、Firebugなどでクラス名を調べましょう。

補足と注意点

各SNSのカウント桁数、ボタンの表示タイプによって、上記CSSでは見切れる可能性があります。
ご自身の環境に合わせて、～pxの数字を調整して下さい。

また、WP Social Bookmarking Lightのアップデートがあった場合、設定した数値が飛ぶ可能性があります。

これだという設定が決まったら、どこかにメモしておいた方が良いでしょう。