ツイートボタン、いいねボタン、＋１ボタンを横一列に並べるには、<table>タグを使って表にする

twitterのツイートボタン、Facebookのいいねボタン、Google+のプラスワンボタンなど、いろいろSNS共有用のボタンがありますが、複数のボタンを設置しようとすると、意図しないところで改行が入っちゃったりしますよね。

で、それを解決するための方法として、スタイルシートをどうのこうのっていうやり方が紹介されていたりしますが、私、スタイルシートのことが全然分かりません。だからいかにも対症療法的なやり方で対処しました。

やり方は簡単で、<table>タグを使って、横一行の表にしてしまうんですね。そうすれば改行されなくなります。↓こんな感じ。

<table border="0">
  <tr>
    <td align="center" width="100">
      <!-- ツイートボタン -->
      <a href="https://twitter.com/share" class="twitter-share-button"
        data-via="snc72394" data-lang="ja">ツイート</a>
    </td>
    <td  width="140">
      <!-- いいねボタン -->
      <div class="fb-like"
        data-href="http://otsuka.my.coocan.jp/ranking/"
        data-send="false" data-layout="button_count"
        data-width="450"  data-show-faces="true"></div>
    </td>
    <td width="70">
      <!-- google+1ボタン -->
      <div class="g-plusone" data-size="medium"></div>
    </td>
  </tr>
</table>
このやり方でボタンを横に並べたのが、↓このページで、

検索ワードランキングまとめ

↓こんな感じの見え方になりました。

ただこの方法だと、横に空白ができてしまうのは、どうにもできませんでした。本当は詰めて表示したかったのですが、それは諦めて、テーブルの横幅を指定することで、せめて等間隔になるように調整しました。

人生行き当たりばったりで、あまりこだわりのない生き方をしてきた人におすすめの方法です。

スラスラわかるHTML&CSSのきほん