ソーシャルメディアボタンの表示プラグイン「WP Social Bookmarking Light」は、自分の使いたいボタンを自由に選べて、並び順もドラック＆ドロップで簡単に変更できる便利なプラグインです。ですが、デフォルトのままだと右側に余白が出来てしまいます。この無駄な隙間をなくす方法をご紹介しておきます。
右側に無駄な空白は「テーマのスタイルシート」で調整
「WP Social Bookmarking Light」をそのまま使用すると、下記のような感じで、Pocketボタン、Google+ボタンの右側に要らない空白スペースが出来てしまいます。Twitterボタンも微妙に空白が出来ています。ツイートボタンは許容範囲内ですが、Pocketボタン、Google+ボタンは酷いことになっています。
この解決方法はCSSで簡単に調整することができます。下記のコードをお使いのWordPressテーマの「style.css」に追記してください。
[html]/*Pocketボタンの幅調整*/
.wsbl_pocket {
width: 95px;
}
/*Google+ボタンの幅調整*/
.wsbl_google_plus_one {
width: 58px;
}
/*twitterボタンの幅調整*/
.wsbl_twitter {
width: 89px !important;
}[/html]
WP Social Bookmarking Light本体に「Custom CSS」が付いていて、そこで調整することもできますが、プラグインのバージョンアップで無効化されたら面倒なので、私はテーマのCSSのほうに記述しています。
ボタンの並び順、カウントの数字（2桁、3桁）によって「width: ◯◯px;」の数字を調整する必要がありますので、ご自分の設置状況に合わせて間隔を微調整してください。2桁までなら上記のコードそのままで使えるはずです。
いいね！ボタンが下にずれる現象も修正
また、いいね！ボタンは微妙に下にずれていますので、下記のコードをCSSに記述すると横一直線に綺麗に並びます。こちらも「WP Social Bookmarking Light」のCSSではなくて、テーマのCSSに記述するのがおすすめです。
[html]/*いいねボタンが下にずれる件*/
.wsbl_facebook_like span{
vertical-align: top !important;
}[/html]
参考：WP Social Bookmarking Lightで「いいね！」のボタンがズレる現象を解決 | 経験知
さらに、スマホから見たときはもっと大きく下にズレて、利用状況によっては他のボタンと被ってしまいます。そこで、下記のコードも記述して調整をします。
[html]/*いいねボタンがスマホで下にずれる件*/
.fb_iframe_widget {
width: auto !important;
display: inline-block !important;
}[/html]
これで、WP Social Bookmarking Lightを使って快適なソーシャルボタンライフが送れるようになりました。あとはボタンを押してくれる人が現れるのを待つだけです。
