ブログ

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

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

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

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

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

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

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

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

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

  この記事を書いた人

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

こちらの記事もお読みください

  • お客様に伝わるわかりやすいキャッチコピー その12013年2月27日 お客様に伝わるわかりやすいキャッチコピー その1 こんにちは。 攻めと守りのIT支援で近畿の中小企業を支える IT活用診断士の中野です。 先日も「売れ続ける通販サイトの特徴」で投稿しましたが、 お客様にどんな便益を提供することができるのか? それを明確に打ち出すことが重要になります。 その具体例をテレビを見 […]
  • 中小企業診断士の内輪の勉強会2012年11月11日 中小企業診断士の内輪の勉強会 今日はBLAST京都の勉強会に参加してきました(^o^)/ 今年の1月から参加してるこの勉強会は 僕に大きな刺激を与えてくれる勉強会です♪♪ 今回のコンテンツは・・・ 1.牧田さん  「中小企業の顧客創造の一手ー知恵ビジネスプランコンテストという選択肢ー」 […]
  • Facebookで成功するためのエッジランクを3分で理解する2012年12月1日 Facebookで成功するためのエッジランクを3分で理解する みなさんこんばんわ。 日本で唯一のIT活用診断士の中野雅公です。 今回は前回のエンゲージメント率に引き続き 番外編として、Facebookで重要な要素である エッジランクについての解説です。 Facebookを有効に活用するにあたって、 エッジランクを理解す […]
  • 初心者のための1から学ぶFacebook その1Facebookとは??2013年1月30日 初心者のための1から学ぶFacebook その1Facebookとは?? みなさんこんにちは。 IT活用診断士の中野雅公です。 ソーシャルメディアの中でも現在ものすごい勢いで ユーザー数が増え企業でも積極的に活用が進んでいる「Facebook」。 名前は聞いたことがあるけどまだ使っていない方や 使っているけど使い方がいまいちわからない方 […]
  • 初心者のための1から学ぶFacebook 番外編その2 「おすすめのFacebookページ」紹介機能が登場!!2013年2月7日 初心者のための1から学ぶFacebook 番外編その2 「おすすめのFacebookページ」紹介機能が登場!! みなさんこんにちは。 IT活用診断士の中野です。 今日は先日(2013年1月28日)にFacebookに追加された新しい機能である 紹介(レコメンド)機能について紹介します。 紹介(レコメンド)機能とはユーザーの趣味や関心に合わせて、おすすめのFacebookペ […]
  • Facebookのエンゲージメント率を考える2012年11月30日 Facebookのエンゲージメント率を考える みなさんこんばんわ。 日本で唯一のIT活用診断士の中野雅公です。 今日はFacebook番外編として、 エッジランクについて語ろうと思っていましたが、 その前段階の知識として重要なエンゲージメント率について 先に説明します。 Facebookページにおいては […]
  • 初心者のための1から学ぶFacebook その4 プロフィール画面の見方を知る!!2013年2月3日 初心者のための1から学ぶFacebook その4 プロフィール画面の見方を知る!! みなさんこんにちは。 IT活用診断士の中野雅公です。 Facebookのプロフィール画面は「タイムライン」と呼ばれています。 この画面は自分の投稿した内容をタイムラインに沿って 確認ができ、他人から見た場合の基本情報などが表示されます。 下記の図を見ながらそれぞれ […]
  • 初心者のための1から学ぶFacebook その3 Facebookのホーム画面を理解する!2013年2月1日 初心者のための1から学ぶFacebook その3 Facebookのホーム画面を理解する! みなさんこんにちは。 IT活用診断士の中野雅公です。 第3回の今回はFacebookの基本画面である ホーム画面の各機能の説明を紹介します。 ちなみに第4回はホーム画面と同じくらい重要な プロフィール画面を紹介する予定です。 まずはホーム画面をしっかりと理解 […]
  • 初心者のための1から学ぶFacebook その5 プロフィールを編集する2013年2月18日 初心者のための1から学ぶFacebook その5 プロフィールを編集する こんにちは。 攻めと守りのIT支援で近畿の中小企業を支える IT活用診断士の中野です。 第5回目の今回は前回紹介したアカウントプロフィールの編集について紹介します。 Facebookを使用する皆さんが心配するアカウント情報の公開設定なども こちらで設定するのでしっ […]
  • 初心者のための1から学ぶFacebook その2Facebookの基本構造を理解する!2013年1月31日 初心者のための1から学ぶFacebook その2Facebookの基本構造を理解する! みなさんこんにちは。 IT活用診断士の中野雅公です。 Facebookを使いだしたばかりの方が一番最初に陥るのは・・・ 機能が多すぎてどこにどんな情報が 書かれているのかわからないといったことです。 第2回ではFacebookの基本メニューなどの構造と階層構造を […]
  • このエントリーをはてなブックマークに追加

関連記事

ページ上部へ戻る