記事下のfacebookのいいねボタン（うちはLikeボタン）とかTweetボタンとか、なぜか綺麗に並べることができなくて、Tableで縦に並べていたのですが、ようやく綺麗に横に並べることができました！！(^o^)
http://www.netpico.jp/blog/cat57/post_694.html
こちらの記事を参考にさせていただきました。
まず、スタイルシートに次の記述をします。
/* SNS button---------------------*/
.social_btn {
margin: 20px 0px 60px 0px;
padding: 0px;
width:540px;
}
.social_btn .mixi {
float: left;
margin: 0px 10px 0px 0px;
padding: 0px;
display: inline;
width: 60px;
}
.social_btn .google {
float: left;
margin: 0px 10px 0px 0px;
padding: 0px;
display: inline;
width: 60px;
}
.social_btn .twitter {
float: left;
margin: 0px 10px 0px 0px;
padding: 0px;
display: inline;
width: 80px;
}
.social_btn .facebook {
float: left;
margin: 0px 10px 0px 0px;
padding: 0px;
display: inline;
width: 100px;
}
/* SNS button---------------------*/
※横幅(width)や余白(margin)などはうちのサイトに合わせた数値です。
.social_btnはボタン類全体の設定です。
うちのサイトはメインカラムが540ピクセルなので同じ値にしています。
.social_btn .mixi がmixiチェックボタン用
.social_btn .google がgoogle+1ボタン用
.social_btn .twitter がTweetボタン用
.social_btn .facebook がfacebookのLikeボタン用で、うちはsend機能も付けています。
そして、ボタン類を設置したい場所に
<div class=”social_btn”>
<div class=”mixi”>
ここに実際のmixiチェックボタンのソースを書く
</div>
<div class=”google”>
ここに実際のgoogle+1ボタンのソースを書く
</div>
<div class=”twitter”>
ここに実際のツイート(Tweet)ボタンのソースを書く
</div>
<div class=”facebook”>
ここに実際のfacebook いいね(Like)ボタンのソースを書く
</div>
</div>
と記載すると、下記のように横一列に綺麗に並んでくれます。
ボタンが押されたカウンターを利用している場合は、たくさん押されると横幅が足りなくなる可能性がありますので、その時は少し広げてください。