Facebookのボタンが下にずれたので修正

2014年2月のFacebook SNSボタンの仕様変更から
いいねボタンの位置がこれまでより下になりました。

facebook-button

今さらながら、修正方法についてご紹介します。

このズレは
ウィジェットがわで生成される .fb-like 直下の <span> に直書きで設定してある
vertical-align: bottom; が影響しています。
ウィジェットで生成されている部分なので、直接は書き換えられません。

facebook-button-style

外部CSSに、このbottomを打ち消す設定を書くと
ボタンのズレがなおります。

.fb-like > span {
    vertical-align: top !important;
}

タグへ直書きのstyleへ上書きするため!importantが要ります。

この例はtopで直していますが
baseline でも同様に修正できます。

このブログは、「WP Social Bookmarking Light」というプラグインを使っているので
プラグイン設定画面の、SNSボタン用の追加スタイルを設定しました。

facebook-button-addstyle

WordPress管理画面の、設定 → WP Social Bookmarking Lightから、スタイルタブを選ぶと
SNSボタン用の追記スタイルを設定できます。

関連記事

Pocket