SNSボタン（twitter/facebook/はてブ/google+）を横一列に並べる方法

↓SNSボタンを設置したページ
異国情緒あふれる写真と旅行記|KaycomDESIGNより



twitter、facebook、google+、はてなブックマークのSNSボタンを横一列に綺麗に並べる方法です。
コードの取得方法は、他のサイトやブログで多く紹介されているので、
ここでは並べ方のみご紹介します。
いろいろな方法があると思いますが、私はCSSを使って配置してみました。

1） 各SNSサイトでコードを取得
　 ※私が実装したものとまったく同じにするには、同じ形・サイズのボタンを選んでください。

　　・twitter
　　・facebook
　　・google+
　　・はてなブックマーク

　

2） CSSファイルに以下のコードを記載

div#sns {
margin:0;
padding:0;
}

div#sns ul{
margin:0;
padding:0;
}

div#sns li {
float:left;
list-style-type:none;
}

.sns{
margin-right:25px;
}



3） htmlファイルのボタンを設置したい場所に以下のコードを記載
　 ※ボタンによって余白の幅が違うので、個別にマージンを入れています。
　　この順番にするとこのように等間隔に並びます。



<div id="sns">
<ul>
<li class="sns">
<facebookのコード >
</li>
<li>
<google+のコード>
</li>
<li class="sns">
<はてなブックマークのコード>
</li>
<li>
<twitterのコード>
</li>
</ul>
</div>


これでサーバにアップすれば完成です。
※IE9で見るとCSSがきいていない場合がありますが、互換表示にするとうまく表示されます。



↑気に入っていただけたらポチッとお願いします。

-----
商用利用可の写真素材