facebookやtwitterのボタン

記事下の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>

と記載すると、下記のように横一列に綺麗に並んでくれます。

ボタンが押されたカウンターを利用している場合は、たくさん押されると横幅が足りなくなる可能性がありますので、その時は少し広げてください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です