みなさんこんにちわ。
IT活用診断士の中野雅公です。

先日投稿したソーシャルメディア用ボタンを
ホームページやブログなどに反映する方法ですが、
実はワナが潜んでいました。

さまざまなサイトを見ていると
各ソーシャルボタンを並べて表示しているケースは多いと思います。
しかし、ボタンの幅が調整できずにボタンとボタンの隙間がバラバラ・・・
それぞれある程度高さや、大きさなどが統一されていて並べると綺麗に見えます。
が・・・ボタンによっては癖があり、右側が空いてしまうことがあります。
ツイッターやGoogle+1のボタンの右側が空いていてどうも美しくないですよね。

これには理由があり、
Facebookなどはwidthのところの数値をいじるとサイズが変更出来るし、
Likedinなどはカウンター数値によって自動でサイズが可変してくれます。
しかし、ツイッターやGoogle+1は30px～40pxぐらいの
空白スペースが出来てしまうのです。
これ実は簡単に詰めることができます。
その問題を解決する方法を今回は紹介したいと思います。
スタイルシートで定義することで簡単にサイズ変更をすることが可能です。

■ツイッターボタンの横幅サイズ修正

■Google+１ボタンの横幅サイズ修正

以下のサンプル画像の通り、
かなりレイアウトがきれいになります。

少しでも多くの方にこの情報がお役にたてばうれしいです。