CSS

最小限の記述でソーシャルボタンを綺麗に並べる

Twitter, Facebook, Pocket, hatena 等のソーシャルボタンを綺麗に並べる方法を紹介します。

各ソーシャルボタンのコードを取得してきたまま貼り付けると上下がガタガタになります。これまではボタンの横幅を決め打ちし、float: left で横並びにして余白を調整していたのですが、良い方法とは思えませんでした。

最近、仕事で使っているのは、各ボタンを div で囲って、display: inline-block にして横並びにする方法です。これが最小限の記述でいちばん綺麗にソーシャルボタンを並べることができます。

inline 要素になったことにより（ちなみに inline-block は、inline とは異なり margin を設定できる）、行の中で縦方向の揃え位置を調整できる vertical-align が使えるようになります。これを top にすれば、上揃えにすることができます。

また、この方法だとボタンを中央揃えにする場合に、親タグに text-align: center を指定するだけなのでとても簡単です。

サンプルコード

サンプルコードの★で囲んでいる部分には、ご自身の Twitter アカウントと、サイトアドレスが入ります。ご自身の環境に修正してから使ってください。

<!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★&amp;width&amp;layout=box_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;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>

各ソーシャルボタン入手先