« 半沢直樹と浦沢直樹の関係 | トップページ | 「うれしいな!ヴィッツなら5人乗れるんだって!」のトヨタ広告のつっこみどころ »

2013年7月31日 (水)

ツイートボタン、いいねボタン、+1ボタンを横一列に並べるには、<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のきほん
スラスラわかるHTML&CSSのきほん

|

« 半沢直樹と浦沢直樹の関係 | トップページ | 「うれしいな!ヴィッツなら5人乗れるんだって!」のトヨタ広告のつっこみどころ »

パソコン・インターネット」カテゴリの記事

日記・コラム・つぶやき」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/517450/60884204

この記事へのトラックバック一覧です: ツイートボタン、いいねボタン、+1ボタンを横一列に並べるには、<table>タグを使って表にする:

« 半沢直樹と浦沢直樹の関係 | トップページ | 「うれしいな!ヴィッツなら5人乗れるんだって!」のトヨタ広告のつっこみどころ »