WordPressに限らず、いまやソーシャルリンクによるウェブサイトの拡散対策は基本となっていますが、実はこのソーシャルリンクボタンを並べるって意外と難しい。

このブログでも以前からいくつかのソーシャルリンクボタンを設置してはいるものの、実はこんな感じでした。

ソースコードを診てみる

とりあえず、各種ボタンのソースをそのまま貼り付けただけ、というものです。

<!-- Google+1 -->
<g:plusone size="medium" annotation="none"></g:plusone>

<!-- facebook -->
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>

<!-- Hatena -->
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="<?php the_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>で囲われているものから、いきなり<a>で始まるものなど、様々です。おそらく、余白の取り方なども統一性はありません。ゆえに、凸凹になってしまうのです。

このように揃える

さっきよりボタン自体が増えてるけど、基本的には変わりません。

<div class="social">
  <!-- facebook -->
  <div class="fb-like" data-href="<?php the_permalink(); ?>" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
  <div class="fb-share-button" data-href="<?php the_permalink(); ?>" data-type="button_count"></div>

  <!-- Google+1 -->
  <div><g:plusone size="medium" annotation="none"></g:plusone></div>

  <!-- Hatena -->
  <div><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="en" title="<?php the_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>

  <!-- Twitter -->
  <div><a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-via="ktkiyoshi" data-lang="en">Tweet</a></div>
</div>

まず、全体を<div>で囲み、class="social"を付与します。ここに適用するCSSは後ほど提示するとして、更に各ボタンも<div>で囲みます。

ソースコードをブラウザで見た際に確認できるそれぞれのボタンに独自に適用されるclassなどを無理やり上書きする形でもいいといえばいいんだけど、なるべくボタン依存を避けたいというのと、可能ならば一括で設定したいので。

.social {
  margin: 5px 0 15px 15px;
  line-height: 2em;
}
.social iframe, .social div {
  display: inline !important;
  margin-right: 3px;
  vertical-align: bottom !important;
  line-height: 1;
}
.twitter-share-button {
  width: 90px !important;
}

全体を囲むsocialクラスにmargin、line-heightを設定します。正直、横並びを揃えるだけならこれらの設定は不要かもしれません。このブログの記事に合わせているのでmarginをとってたりします。

重要なのは次の.social iframe, .social divです。importantが付与されているところは、個々のソーシャルボタンに適用されているスタイルよりも優先的に適用するためです。

ひとつ、厄介なのはTwitterボタンなんだけど、ここだけは個別でwidthを決めています。それでも何故かTwitterボタンだけはボタンの右側に謎の余白が取られてしまうので、一番右に配置することにしてます。

まとめ

万が一、ボタンの仕様変更があった場合にも対応できるよう、ブログ側でclassを付与して整形することが大切な気がします。あとはレスポンシブ対応している場合は、二行になっても崩れないかどうかも要確認。

と書いてるのに自分のところがずれてたり...いずれにしてもコマメに確認するのは大切ですね。それでは。