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

2017年11月28日WordpressWordpress

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のアイコンが下にずれてしまうのは既知。これについては、

.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の数値がどれほど正確かは分かりませんが、これできれいに表示されるようになるはずである。

執筆者紹介

Thir

最新のガジェットを購入してはレビューする、を繰り返しています。このブログでは、ガジェットの紹介のほか、各種サーバーやスマートホームの構築などを提供しています。最近はYouTubeでもレビュー動画やVlogをあげています。(プロフィール