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

WordPressのアイキャッチ

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

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

<調整前>
WP Social Bookmarking Light デフォルトのアイコン間

<調整後>
WP Social Bookmarking Light 調整後のアイコン間

スポンサーリンク

調整用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_の後ろに付けてください。

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

補足と注意点

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

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

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

スポンサーリンク

お役に立ちましたら、シェアをお願いします

プロフィール

九荻 新のプロフィール画像

名前:九荻 新(くおぎ あらた)
埼玉県在住のブロガー。
1983年11月30日生まれ。

趣味は自作PC。
30歳を過ぎて、手の脂が減り、
ビニール袋を開けられなくなった。
詳しいプロフィール

サイト内検索