WordPressテーマ「メシオプレス」ブログ

ソーシャルメディアボタンの表示プラグイン「WP Social Bookmarking Light」は、自分の使いたいボタンを自由に選べて、並び順もドラック&ドロップで簡単に変更できる便利なプラグインです。ですが、デフォルトのままだと右側に余白が出来てしまいます。この無駄な隙間をなくす方法をご紹介しておきます。
WP Social Bookmarking Lightの余白

右側に無駄な空白は「テーマのスタイルシート」で調整

「WP Social Bookmarking Light」をそのまま使用すると、下記のような感じで、Pocketボタン、Google+ボタンの右側に要らない空白スペースが出来てしまいます。Twitterボタンも微妙に空白が出来ています。ツイートボタンは許容範囲内ですが、Pocketボタン、Google+ボタンは酷いことになっています。

WP Social Bookmarking Lightの右側スペース

この解決方法は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を使って快適なソーシャルボタンライフが送れるようになりました。あとはボタンを押してくれる人が現れるのを待つだけです。

この記事を書いた人

めしお
めしお メシオプレス販売者

めしおさんのめしおさんによるめしおさんのためのWordPressテーマ「メシオプレス」を有料でおすそ分けしています。

コメント

この記事へのコメントはありません。

コメントする


※メールアドレスは公開されません。

オリジナル有料WordPressテーマ好評発売中

メシオプレス02 メシオプレス03