Facebookいいねボタンがずれる問題に対応

2019年6月7日

SNSの各種ボタンを埋め込むことが最近では標準化してきました。
webデザインでもSNSボタンを埋め込むことを前提にレイアウトを考え足ります。

ところが、SNSボタンデザインはコーディングを含めてプラグインとして提供されているため、こちらの意図しないことが起こります。

今回は、SNSボタンずれについてです。

現象はこのような感じです。

わかりますでしょか?
SNSボタンを横に並べてみたら、微妙に位置がずれています。
これをきちっと揃えます。

Facebookのボタンは、CSSだけで直ります

.fb_iframe_widget > span { vertical-align: baseline !important; }

スタイルシートに上記の一文を入れるだけでそろうようになります。

この一文をいれてみました。

このCSSを盛り込んでみたところ、ボタンがうまくそろいました。