スタイルシート記述例


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

.button_hatena{
float: left;
width: 58px;
}

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

Google +1 ボタン、はてなブックマークボタンにfloat: leftを指定し、twitterボタン、facebook いいね!スタンダードボタンを右側へ回り込ませます。twitterボタンはボタンコードにあるclass="twitter-share-button"を使い横幅を指定、またfacebookのいいね!ボタンのスタンダードでは高さが影響してきますので、vertical-alignプロパティで垂直方向の揃え方を指定。それぞれに!important;を記述しユーザースタイルシートの優先順位を強制的に最上位へ位置しスタイルシートを適用します。facebook いいね!ボタンの横幅はiframeで指定していますのでスタイルシートでは指定しません。

本文記述例


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


ボタンのカウントが2桁、3桁と増えてきたら、Google +1 ボタン、twitterボタンはスタイルシートで、facebook いいね!ボタンは本文のiframeで横幅を調節します。


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

関連)

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


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


inserted by FC2 system