↓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がきいていない場合がありますが、互換表示にするとうまく表示されます。
↑気に入っていただけたらポチッとお願いします。
-----
商用利用可の写真素材