ブログ

ツイートするボタン、Googleプラスボタンの横幅(width)調整の方法

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

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

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

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

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

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

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

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

  この記事を書いた人

中野 雅公
中野 雅公中野IT活用診断士事務所 代表
京都で生まれ京都で育つ。
自営業をしていた両親のお店が廃業したことをきっかけに経営を学び、中小企業診断士の資格を取得後、独立。
売れ続けるネットショップ構築、SNSを活用した集客など売上アップを実現する攻めのIT活用とコスト削減、業務の効率化を実現する守りのIT活用で企業様への負担をかけることなく、業績アップを実現する専門家。
大阪産業創造館をはじめ、数多くの公的機関の専門家として活動中。
無料のIT・経営相談はコチラ
  • このエントリーをはてなブックマークに追加

関連記事

ページ上部へ戻る