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について

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

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

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をあげています。サイト紹介・プロフィールはこちら。依頼・お問い合わせはこちらから。