WP Social Bookmarking Lightでアイコンがずれたり重なったり間隔が空く問題を解決する方法

2016年1月6日2017年11月28日WordpressカスタマイズWordpress

「WP Social Bookmark Light」は、日本で流行している複数のSNSに対応したWordpress用のソーシャルボタンプラグインである。最近インストールしたところ、FacebookのアイコンがTwitterのアイコンに重なってしまう等の問題が発生してしまった。どうやら、プラグインのローンチ時と、現在各社が配信しているバナーサイズに差があるためのようだ。ということで、次のような形で修正が可能。

WP Social Bookmark Lightのアイコン・ボタンずれを治す

WP Social Bookmark Lightについて

基本的な使い方は下記サイトから参照することが出来る。
http://www.adminweb.jp/wordpress-plugin/list/index19.html

アイコン・ボタンずれの解消方法

facebookのアイコンが下にずれてしまうのは既知。これについては、

.wsbl_facebook_like span{
    vertical-align: top !important;
}

を挿入すれば解決する（垂直位置の指定をしてあげる形である）。

ただし、私の環境で発生していた問題は、facebookボタンがTwitterボタンと被ってしまう問題であったり、各ボタン・アイコンの間隔がバラバラでダサい点であった。
これについては、各ボタン・アイコンについてCSSでwidthを（再）指定することにより、解決する。

.wsbl_twitter{
    width: 80px;
}
.wsbl_facebook_like{
   width: 100px;
}
.wsbl_facebook_like iframe{
    max-width: none !important;
    margin: 0px 5px 0px 0 !important;
}
.wsbl_facebook_like span{
    vertical-align: top !important;
}
.wsbl_pinterest a{
    border: 0px !important;
}
.wsbl_google_plus_one{
 width: 60px;
}
.wsbl_evernote{
 width: 60px;
}
.wsbl_pocket{
 width: 100px;
}

正直、各アイコン・ボタンに対してwidthの数値がどれほど正確かは分かりませんが、これできれいに表示されるようになるはずである。