補足
- それぞれのボタンの間隔は、margin-rightプロパティで調整しています。
本稿では、バルーンタイプのGoogle +1ボタン、バーティカルタイプのはてなブックマークボタンと、2段にしたbutton_countタイプ、largeサイズのfacebook いいね!(シェア含む)ボタンと大サイズのtwitterボタンを横にならべるCSSと、HTML5ドキュメントへの記述例を掲載しています。
article.sns_button{ display: inline-block; width: 100%; } article div.google_button{ float: left; margin-right: 10px; } article div.hatena{ float: left; margin-right: 10px; } article div.fb-tw{ display: block; float: left; } div.fb-like{ margin-bottom: 4px; } div.tweet_button{ clear: both; margin: 0; padding: 0; }
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- facebook button --> <div id="fb-root"></div><script type="text/javascript" src="facebook_button2016.js"></script> <!-- facebook button --> <!-- SNS Button --> <article class="sns_button"> <div class="google_button"> <div class="g-plusone" data-size="tall"></div><script src="google_button2016.js"></script> </div> <div class="fb-like" data-layout="box_count" data-action="like" data-show-faces="true" data-share="false"></div> <div class="hatena"> <a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> </div> <div class="fb-tw"> <div class="fb-like" data-layout="button_count" data-action="like" data-size="large" data-show-faces="true" data-share="true"></div> <br> <div class="tweet_button"><a href="https://twitter.com/share" class="twitter-share-button" data-size="large">Tweet</a></div><script type="text/javascript" src="../twitter_button2016.js"></script> <!-- SNS Button --> </article> </body> </html>
補足
RAWで撮ろう|Life with a camera|Life with a camera 2