ツイートボタン、いいねボタン、+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>
検索ワードランキングまとめ
↓こんな感じの見え方になりました。
ただこの方法だと、横に空白ができてしまうのは、どうにもできませんでした。本当は詰めて表示したかったのですが、それは諦めて、テーブルの横幅を指定することで、せめて等間隔になるように調整しました。
人生行き当たりばったりで、あまりこだわりのない生き方をしてきた人におすすめの方法です。
| 固定リンク
「パソコン・インターネット」カテゴリの記事
- Z-Waveの読み方はズィーウェイブ(2017.06.06)
- ImageMagick 7で複数ファイルのトリミングを行う(2017.03.08)
- AcrobatのPNG保存で「ディスク容量容量が不足している可能性があります」のエラーが出るときは、RGBプロファイルの埋め込みをオフにしてみる(2017.03.07)
- ポケモンGOのやめ方 ~ポケGO廃人になる前に~(2017.02.28)
- FirefoxでPDFがダウンロード(保存)されるようになってしまったら、アドオンを無効化してみる(2017.02.15)
「日記・コラム・つぶやき」カテゴリの記事
- カブトムツの森(2019.12.22)
- 敵エージェントにリアルキャプチャされる(Ingress)(2017.09.02)
- 海外のポータルキーを拾う(Ingress)(2017.09.02)
- ポータル情報の編集 レビュー完了までの期間は2か月超(Ingress)(2017.08.17)
- 私は外国人に誘拐されそうになった・・・のか?(2017.06.29)
コメント