WP Social Bookmarking Lightで「いいね!」のボタンがズレる現象を解決


いいねがズレる
このブログではソーシャルボタンを簡単に設置できる「WP Social Bookmarking Light」を使っているのですが、ある日「いいね!」のボタンがずれていることに気付きました。

もしや最初からズレていたのかと思い、設置時に書いたブログ(WordPressにソーシャルブックマークを簡単に設置できるプラグイン)を確認してみるとズレていない。

表示の崩れは気持ち悪いので、修正する方法を見つけましたので紹介します。

スポンサーリンク

CSSで修正する

よくよく「WordPressにソーシャルブックマークを簡単に設置できるプラグイン」の設置時期と今の「いいね!」の画像を見ると色が変わっていることに気付く。

調べてみると「Facebook、「いいね!」ボタンのデザイン変更を発表 サムアップは消滅へ」という記事を発見。「いいね!」ボタンのデザインが変更されているようだ。おそらく、このデザインの変更をキッカケにズレるようになったのではと推測。

そこでソースコードを調べてみると、

<span style="vertical-align: bottom; width: 98px; height: 20px;">

の部分を発見。

「vertical-align: bottom」部分を「vertical-align: top」に変更するとズレが直った。この部分はFacebookから取得して表示している部分なので、ソースコード自体を変更することは無理。なので、無理やりCSSで直す。

WordPressのダッシュボードの左メニューの「設定」→「WP Social Bookmarking Light」で上のタブ「スタイル」を選択。「Custom CSS」の最後にコードを追加。

.wsbl_facebook_like span{
    vertical-align: top !important;
}

スタイルの追加

最後に「変更を保存」をクリックして保存。

これで表示が直った。↓
表示が直った

2014/5/12追記

上記設定だけではスマートフォンで表示させた時のズレに対応出来ていないので、上記スタイルに、

.fb_iframe_widget {
  width: auto !important;
  display: inline-block !important;
}

を追加するとスマートフォンでもちゃんと表示されるようになる。

TwitterとPocketの幅を調整

「いいね!」の表示は直ったが、TwitterとPocketのボタンの隙間が気になったのでそちらも修正。

Twitterは幅の指定が広過ぎなので「.wsbl_twitter」のwidthを100pxから90pxへ変更。

Pocketに関しては

.wp_social_bookmarking_light div {
  ...
  margin: 0 5px 0px 0 !important;
  ...
}

の部分でdiv自体にmarginが設定されていて、Pocketではdivが入れ子になっているため、marginが倍になり幅が広がっていたので、内側のdiv(.pocket-btn)のmarginを消す。iframeのwidthも66pxで設定されていたので、60pxへ変更。

最終的に修正、追加したCSSは次のようになった。

.wsbl_twitter{
    width: 90px;
}

.wsbl_facebook_like span{
    vertical-align: top !important;
}

.wp_social_bookmarking_light div .pocket-btn{
margin: 0 !important;
}

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

これで表示の隙間がいい感じになった。↓
表示が直った

コードを更に理解する

WordPressをより自由に、思い通りに使用するにはPHPの知識が必要です。

PHPを学ぶには、Web上での情報や知識には限界があるので、人に教えてもらうのが一番の近道です。

そこでオススメなのが「CodeCamp」です。

マンツーマン指導なので、わからないことはすぐ聞けて、無料体験レッスンもあるのでどんな感じか試せます。


ITエンジニア専門スクールもオススメです。

スポンサーリンク

おわりに

ブログへのアクセス数を増やしてくれるソーシャルリンク。その表示が崩れていたらなんとなくシェアする気も無くなるかもしれませんので、しっかりしておきたいですね。

もっと早くに気づけばよかった。。。


タグ:

スポンサーリンク



この記事が役に立ったらシェアして頂けると嬉しいです!
このブログをフォロー・RSS購読もお願いします!

スポンサーリンク



  • 山中

    はじめまして!

    大変勉強になる情報をありがとうございます。
    ワードプレスのプラグインの「いいね!」ボタンが、ズレてしまい困っていた所、こちらのホームページにたどり着きました。

    商用のホームページなのですが、コードをそのまま使用させていただき、「いいね!」ボタンのズレを直しても宜しいでしょうか?

    • ブログ管理者

      コメントありがとうございます!
      お役に立てたようでよかったです。

      コードに関してはご自由にお使いください。
      但し、全てのバージョン、全てのブラウザで表示確認をしたわけではないので、自己責任でお願いします。

      このようなWEB制作で躓き解決できたことを紹介していますので今後ともこのブログをよろしくお願いします!

      • 山中

        ブログ管理者様

        素早いご返信をどうもありがとうございます。大変助かります。
        お言葉に甘えて、使用させていただきます。また、ブログを拝見させていただきますね。

        本当にどうもありがとうございました!

  • ブログ管理者

    コメントありがとうございます!

    私もそのように思っていたのですが、ちょっとしたことだから余計に気になってなんとか直してしまいました。

    お役に立てたようで良かったです!

  • n_bb

    気が付いたらずれていて、loopやfunctionあたりをいじってたときにやらかしてしまったと思ってました。ありがとうございます。大変たすかりました!

    • お役に立てて良かったです!

      ところがこの方法ではスマートフォンへの表示に対応できていなかったので、スマートフォンへ対応した方法を追記しましたので試してみてください!

  • Pingback: ブログに設置してあるソーシャルボタンをカスタマイズ。フォローボタンに引き続いてシェアボタンに着手 | 歳月庵()