ソーシャルメディアボタンの表示プラグイン「WP Social Bookmarking Light」は、自分の使いたいボタンを自由に選べて、並び順もドラック&ドロップで簡単に変更できる便利なプラグインです。ですが、デフォルトのままだと右側に余白が出来てしまいます。この無駄な隙間をなくす方法をご紹介しておきます。
右側に無駄な空白は「テーマのスタイルシート」で調整
「WP Social Bookmarking Light」をそのまま使用すると、下記のような感じで、Pocketボタン、Google+ボタンの右側に要らない空白スペースが出来てしまいます。Twitterボタンも微妙に空白が出来ています。ツイートボタンは許容範囲内ですが、Pocketボタン、Google+ボタンは酷いことになっています。
この解決方法はCSSで簡単に調整することができます。下記のコードをお使いのWordPressテーマの「style.css」に追記してください。
/*Pocketボタンの幅調整*/ .wsbl_pocket { width: 95px; } /*Google+ボタンの幅調整*/ .wsbl_google_plus_one { width: 58px; } /*twitterボタンの幅調整*/ .wsbl_twitter { width: 89px !important; }
WP Social Bookmarking Light本体に「Custom CSS」が付いていて、そこで調整することもできますが、プラグインのバージョンアップで無効化されたら面倒なので、私はテーマのCSSのほうに記述しています。
ボタンの並び順、カウントの数字(2桁、3桁)によって「width: ◯◯px;」の数字を調整する必要がありますので、ご自分の設置状況に合わせて間隔を微調整してください。2桁までなら上記のコードそのままで使えるはずです。
いいね!ボタンが下にずれる現象も修正
また、いいね!ボタンは微妙に下にずれていますので、下記のコードをCSSに記述すると横一直線に綺麗に並びます。こちらも「WP Social Bookmarking Light」のCSSではなくて、テーマのCSSに記述するのがおすすめです。
/*いいねボタンが下にずれる件*/ .wsbl_facebook_like span{ vertical-align: top !important; }
参考:WP Social Bookmarking Lightで「いいね!」のボタンがズレる現象を解決 | 経験知
さらに、スマホから見たときはもっと大きく下にズレて、利用状況によっては他のボタンと被ってしまいます。そこで、下記のコードも記述して調整をします。
/*いいねボタンがスマホで下にずれる件*/ .fb_iframe_widget { width: auto !important; display: inline-block !important; }
これで、WP Social Bookmarking Lightを使って快適なソーシャルボタンライフが送れるようになりました。あとはボタンを押してくれる人が現れるのを待つだけです。
この記事へのコメント
この記事へのコメントはありません。