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

2017年11月28日小ネタWordpress

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

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

WP Social Bookmark Lightについて

基本的な使い方は下記サイトから参照することが出来る。

WP Social Bookmarking Lightプラグイン(ソーシャルメディアの共有ボタンを設置) -...
WP Social Bookmarking LightプラグインはTwitterやFacebookといったソーシャルメディアの共有ボタンをブログ内にまとめて設置したい時に便利なプラグインです。日本で良く使われるはてなブックマークにも最初から対応しています。ここではWP Social Bookmarking Lig...

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

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

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

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

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