Twitter, Facebook, Pocket, hatena 等のソーシャルボタンを綺麗に並べる方法を紹介します。
各ソーシャルボタンのコードを取得してきたまま貼り付けると上下がガタガタになります。これまではボタンの横幅を決め打ちし、float: left
で横並びにして余白を調整していたのですが、良い方法とは思えませんでした。
最近、仕事で使っているのは、各ボタンを div
で囲って、display: inline-block
にして横並びにする方法です。これが最小限の記述でいちばん綺麗にソーシャルボタンを並べることができます。
inline
要素になったことにより(ちなみに inline-block
は、inline
とは異なり margin
を設定できる)、行の中で縦方向の揃え位置を調整できる vertical-align
が使えるようになります。これを top
にすれば、上揃えにすることができます。
また、この方法だとボタンを中央揃えにする場合に、親タグに text-align: center
を指定するだけなのでとても簡単です。
サンプルコード
<!DOCTYPE> <html lang="ja"> <head> <meta charset="utf-8"> <style> .share .twitter, .share .facebook, .share .pocket, .share .hatena { display: inline-block; vertical-align: top; } .share .facebook { width: 69px; overflow: hidden; } </style> </head> <body> <div class="share"> <div class="twitter"><a href="https://twitter.com/share" class="twitter-share-button" data-via="rakuishi07" data-count="vertical">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></div> <div class="facebook"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Frakuishi.com&width&layout=box_count&action=like&show_faces=false&share=false&height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:65px;" allowTransparency="true"></iframe></div> <div class="pocket"><a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a><script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script></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="http://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="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></div> </div> </body> </html>