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

WordPressのアイキャッチ 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のアップデートがあった場合、設定した数値が飛ぶ可能性があります。

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

無料体験でAmazonポイントをもらおう

聴く読書サービス Audibleの30日無料体験で、Amazonポイントをゲットしよう。

通常会員は1日1回 5分以上聴くと50ポイント、15日以上聴けば最大750ポイント
プライム会員は5分以上で100ポイント、最大1500ポイントもらえます
最初の1冊は無料なので安心です

Audibleを無料体験する

注)PCのWEBブラウザを使用すると上手くリスニング履歴を取得できない場合があるので、必ずスマホアプリを利用しましょう

Youtubeを始めました

メモトラPCチャンネル
https://www.youtube.com/channel/UCqOiuPy6lccc5JO_FQb_3gQ

レビュー動画をコツコツ上げて行くので、ぜひチャンネル登録をお願いします。

スポンサーリンク