WP Social Bookmarking Light ボタンの隙間を消す | ホームページ制作部ブログ「横着は敵」

WP Social Bookmarking Lightを使用してFacebookシェアボタン等のソーシャルボタンを表示させた時に、ツイッター、Google+1、Pocketの各ボタンの右側にできる隙間を消す方法です。

デフォルトだと下の画像のような余計な右マージンが出来る。これが実に気持ち悪い・・・ので、CSSで消してしまいましょう。

ソーシャルボタンの隙間（右マージン）を消すCSS

div.wsbl_twitter {
    width:68px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	div.wsbl_twitter {
		width:75px;
	}
}

Chromeの場合は横幅が75pxになります。

div.wsbl_google_plus_one {
    width:32px;
}

Pocketは内側の.wsbl_pocket div.pocket-btnにも横幅指定する必要があります。

div.wsbl_pocket {
    width:60px;
}
div.wsbl_pocket div.pocket-btn {
	width:60px;
}

ついでにソーシャルボタンをセンタリングする方法も書きます。何もしなければボタンは左寄せで並ぶのですが、これを中央寄せした場合、もしくは右寄せにしたい場合もページのレイアウトによってはあると思いますので、CSSでやってみます。

まず.wp_social_bookmarking_lightのインナーにあるdivに対してfloatを解除し、inline-blockにしてvertical-alignでボタンのベースラインが揃うようにします

div.wp_social_bookmarking_light > div {
	float:none !important;
	display:inline-block;
	vertical-align:bottom;
}

.wp_social_bookmarking_lightでセンターリングか右寄せを指定して終わりです。

div.wp_social_bookmarking_light {
	text-align:left;
}