経験知ロゴ

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;
    }
    

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

    週3日の副業で月50万

    月50万稼げたら年収は600万で、普通の人以上の生活ができます。

    それが週3日で稼げたら、残りの4日をどう過ごしますか?

    • 自分の趣味に全力を注ぐ
    • 家族との時間を増やし、子供の成長をしっかりと見守る
    • 毎週海外へ旅行へ行く
    • 新しいことに挑戦する
    • 何もせず、のんびり自由な時間を過ごす

    週の半分以上が自分の好きなことに使えるのなら、人生は楽しい物になりますよね!

    週2日の休みが増えるということは、

    52週(1年) × 2日 = 104日

    年間104日も増え、365日のうち208日も自分の時間に使えるのです!

    更に、今30歳だとして、65歳まで働いたら、

    104日 × 35年 = 3,640日

    3,640日も変わってきます!!10年以上ですよ!10年!!

    週2日の休みのために5日を無駄にする生活をいつまで続けますか?

    週4日の自由たった3日で稼いで、自分のために自由に時間を使う生活をはじめましょう!

    週3日で50万円稼げる案件は、業界最大級の案件を保有しているレバテックフリーランスで見つけられます。

    1分で完了する無料登録で、時間の自由への一歩を踏み出しましょう!

    おわりに

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

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

    役に立ったらこの記事のシェアをお願いします

    ブログのフォロー・RSS購読は下記ボタンから