ツイートボタン、いいねボタン、+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>
検索ワードランキングまとめ
↓こんな感じの見え方になりました。
ただこの方法だと、横に空白ができてしまうのは、どうにもできませんでした。本当は詰めて表示したかったのですが、それは諦めて、テーブルの横幅を指定することで、せめて等間隔になるように調整しました。
人生行き当たりばったりで、あまりこだわりのない生き方をしてきた人におすすめの方法です。
« 半沢直樹と浦沢直樹の関係 | トップページ | 「うれしいな!ヴィッツなら5人乗れるんだって!」のトヨタ広告のつっこみどころ »
「パソコン・インターネット」カテゴリの記事
- AviUtl+VobSubでDVDの字幕が大幅にずれるときの対処方法(2018.11.03)
- Z-Waveの読み方はズィーウェイブ(2017.06.06)
- ImageMagick 7で複数ファイルのトリミングを行う(2017.03.08)
- AcrobatのPNG保存で「ディスク容量容量が不足している可能性があります」のエラーが出るときは、RGBプロファイルの埋め込みをオフにしてみる(2017.03.07)
- ポケモンGOのやめ方 ~ポケGO廃人になる前に~(2017.02.28)
「日記・コラム・つぶやき」カテゴリの記事
- 問い合わせに対する見事な対応(東急バス、京急バス、小田急バス)(2022.11.27)
- 年に一度のテスト(2021.09.04)
- カブトムツの森(2019.12.22)
- 禁煙の駐車場でも、車内でなら吸ってもOK(2019.10.06)
- 敵エージェントにリアルキャプチャされる(Ingress)(2017.09.02)
« 半沢直樹と浦沢直樹の関係 | トップページ | 「うれしいな!ヴィッツなら5人乗れるんだって!」のトヨタ広告のつっこみどころ »
コメント