ツイートボタン、いいねボタン、+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>
検索ワードランキングまとめ
↓こんな感じの見え方になりました。
ただこの方法だと、横に空白ができてしまうのは、どうにもできませんでした。本当は詰めて表示したかったのですが、それは諦めて、テーブルの横幅を指定することで、せめて等間隔になるように調整しました。
人生行き当たりばったりで、あまりこだわりのない生き方をしてきた人におすすめの方法です。
最近のコメント