スタイルシート記述例


.button_google{
float: left;
width: 64px;
}

.twitter-share-button{
width: 90px !important;
}

Google +1 ボタンにfloat: leftを指定しfacebook いいね!ボタン、はてなブックマークボタン、twitterボタンを右へ回り込ませます。twitterボタンの横幅はボタンコードにあるclass="twitter-share-button"を使い!important;を記述しユーザースタイルシートの優先順位を強制的に最上位へ位置しスタイルシートを適用します。facebook いいね!ボタンの横幅はiframeで指定していますのでスタイルシートでは指定しません。はてなブックマークボタンは何もせずに並べれば良いです。

右揃えにする場合は、floatプロパティの値をrightにします。facebook いいね!ボタン、はてなブックマークボタン、twitterボタン、Google +1 ボタンの順になります。

本文記述例


Google +1 ボタン、facebook いいね!ボタン、はてなブックマークボタン、twitterボタンを綺麗に横に並べる 本文記述例


ボタンのカウントが2桁、3桁と増えてきたら、Google +1 ボタン、twitterボタンはスタイルシートで、facebook いいね!ボタンは本文のiframeで横幅を調節します。はてなブックマークボタンは何もしなくても良さそうです。


このエントリーをはてなブックマークに追加

右揃えにする場合は、floatプロパティの値をrightにし、親要素のdiv要素(赤文字のdiv要素)にstyle="width: 100%; text-align: right;"を追加します。

このエントリーをはてなブックマークに追加

関連)

はてなブックマークボタンの設置例facebook いいね!ボタンの設置例facebook いいね!ボタンの設置例 2014facebook いいね!ボタンの設置例2Google +1 ボタンの設置例twitterボタンの設置例各ボタンを綺麗に横に並べる各ボタンを綺麗に横に並べる 2トップページへ戻る


RAWで撮ろうLife with a cameraLife with a camera 2


inserted by FC2 system