WP Social Bookmarking Light、Facebook「いいね！」のズレを修正する方法
2014/08/18
wordpressのソーシャルボタンを設置する方法としてWP Social Bookmarking Lightというプラグインがあります。
このプラグインを導入するだけでいろいろなSNSのソーシャルボタンを簡単に設置できるので便利なプラグインだと思います。ワードプレスユーザーの中には使っている方も多いかと思います。
そんなWP Social Bookmarking Lightは私もこのブログで使っています。記憶としてはかなり以前に使い始めたような記憶でしたが、便利なので使い続けていました。
私は今のところツイッター、フェイスブック、そしてはてなブックマークのボタンを表示させています。この３つのボタンを表示させているブロガーさんは多いのではないでしょうか？
このブログではごくたまにこれらのボタンを押してくださる方もいます。もっともっとそんな方が増えるブロクになりたいものではあるのですが、なかなか難しいようですね。
そんなWP Social Bookmarking Lightなんですが、Facebookの「いいね！」ボタンがなんかズレてるな？という事に気づきました。
前々からそんな感じがしてたけど放置していました。でもやっぱりよくよく見てみるとやっぱりずれてるなという事になったのです。スマホなどで見るとそれが目立つようではあるんです。
なんとか修正する方法がないかなと探していたら、方法が見つかったので記述しておきます。
「いいね！」ボタンがこんな風にずれていた
ん～ズレていますね。小さい画像だと分かりにくいかもしれませんが、大きな画像で確認するとよく分かるかとは思います。スマホなどではもっとズレが大きくなっているようではありました。
最近はスマホユーザーも多いですし、このブログもスマホの方が見てくださる事も多いです。あまりデザインが崩れすぎているとよくないでしょう。やはり解決策を調べてみる事にしました。
「いいね！」ボタンがズレている原因としてFacebookの「いいね！」ボタンのデザインが変更された事が原因ではあるようです。よくは分からないんですが、おそらくそのせいだろという指摘が他のブログさんでありました。
WP Social Bookmarking Lightを導入した時にはそんなズレがなかったように感じたので、やはり後からズレたのでしょう。
WP Social Bookmarking Lightの設定で簡単に解決できた
さてこのズレなんですがWP Social Bookmarking Lighの設定で簡単に解決する事ができました。参考にしたのは下のページです。
WP Social Bookmarking Lightで「いいね！」のボタンがズレる現象を解決
WP Social Bookmarking Lighの設定画面にはCSSを設定する項目があり、そこにCSSの記述を加えるだけで簡単に修正する事ができます。
ワードプレスの管理画面から設定→WP Social Bookmarking Lightへ進みstylesという項目を選択します。
そして次の記述を一番下辺りに追加しましょう。
.wsbl_facebook_like span{
vertical-align: top !important;
}
フェイスブックボタンにwsbl_facebook_likeのclass指定がされているので、vertical-alignで縦方向の修正を上に揃えるようにし、!importantでスタイルを優先させる設定になっています。
修正した後の画面
下にズレていたものが修正されフラットな状態になっています。見た目問題なくなっているようですね。
WP Social Bookmarking Lightはボタンの順番を変える事ができますが、Facebookの「いいね！」ボタンを一番右側にした場合には、この修正の状態では「いいね！」ボタンだけ右にズレてしまいます。
デフォルトで真ん中あたりに表示される設定になっていると思うので、そのまま使えば問題はない事でしょう。一番右に配置する場合には、これもCSSで揃える事は可能だと思われます。