WP Social Bookmarking Lightの右側の余白をなくす方法

ソーシャルメディアボタンの表示プラグイン「WP Social Bookmarking Light」は、自分の使いたいボタンを自由に選べて、並び順もドラック＆ドロップで簡単に変更できる便利なプラグインです。ですが、デフォルトのままだと右側に余白が出来てしまいます。この無駄な隙間をなくす方法をご紹介しておきます。

右側に無駄な空白は「テーマのスタイルシート」で調整

「WP Social Bookmarking Light」をそのまま使用すると、下記のような感じで、Pocketボタン、Google+ボタンの右側に要らない空白スペースが出来てしまいます。Twitterボタンも微妙に空白が出来ています。ツイートボタンは許容範囲内ですが、Pocketボタン、Google+ボタンは酷いことになっています。

この解決方法はCSSで簡単に調整することができます。下記のコードをお使いのWordPressテーマの「style.css」に追記してください。

/*Pocketボタンの幅調整*/
.wsbl_pocket {
 width: 95px;
}
/*Google+ボタンの幅調整*/
.wsbl_google_plus_one {
 width: 58px;
}
/*twitterボタンの幅調整*/
.wsbl_twitter {
 width: 89px !important;
}

WP Social Bookmarking Light本体に「Custom CSS」が付いていて、そこで調整することもできますが、プラグインのバージョンアップで無効化されたら面倒なので、私はテーマのCSSのほうに記述しています。

ボタンの並び順、カウントの数字（2桁、3桁）によって「width: ◯◯px;」の数字を調整する必要がありますので、ご自分の設置状況に合わせて間隔を微調整してください。2桁までなら上記のコードそのままで使えるはずです。

いいね！ボタンが下にずれる現象も修正

また、いいね！ボタンは微妙に下にずれていますので、下記のコードをCSSに記述すると横一直線に綺麗に並びます。こちらも「WP Social Bookmarking Light」のCSSではなくて、テーマのCSSに記述するのがおすすめです。

/*いいねボタンが下にずれる件*/
.wsbl_facebook_like span{
    vertical-align: top !important;
}

参考：WP Social Bookmarking Lightで「いいね！」のボタンがズレる現象を解決 | 経験知

さらに、スマホから見たときはもっと大きく下にズレて、利用状況によっては他のボタンと被ってしまいます。そこで、下記のコードも記述して調整をします。

/*いいねボタンがスマホで下にずれる件*/
.fb_iframe_widget {
  width: auto !important;
  display: inline-block !important;
}

これで、WP Social Bookmarking Lightを使って快適なソーシャルボタンライフが送れるようになりました。あとはボタンを押してくれる人が現れるのを待つだけです。