|
カテゴリ:最近のこと
↓SNSボタンを設置したページ
異国情緒あふれる写真と旅行記|KaycomDESIGNより twitter、facebook、google+、はてなブックマークのSNSボタンを横一列に綺麗に並べる方法です。 コードの取得方法は、他のサイトやブログで多く紹介されているので、 ここでは並べ方のみご紹介します。 いろいろな方法があると思いますが、私はCSSを使って配置してみました。 1) 各SNSサイトでコードを取得 ※私が実装したものとまったく同じにするには、同じ形・サイズのボタンを選んでください。 ・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がきいていない場合がありますが、互換表示にするとうまく表示されます。 ↑気に入っていただけたらポチッとお願いします。 ----- 商用利用可の写真素材 お気に入りの記事を「いいね!」で応援しよう
[最近のこと] カテゴリの最新記事
|