twitterbootstrap ソーシャルブックマークボタンをきれいに並べる

2014年10月12日更新 view: 117 view

socialbutton を等間隔で、CSSできれいに。

今回はtwitterbootstrap を使用していることが条件

まずは、socialbutton.js をDL
http://itra.jp/jquery_socialbutton_plugin/

・javascript

$(function(){

    $('.hatena').socialbutton('hatena', {
    });

    $('.twitter').socialbutton('twitter', {
        button: 'vertical',
        button: 'horizontal',
        text: '世界最強!被リンクSEO'
    });
    
    
    $('.google_plusone').socialbutton('google_plusone', {
        lang: 'ja',
        size: 'medium'
    });

});

・css

<div class="row">
    <div class="span4">
        適当なコンテンツ
    </div>
    <div class="span6 offset2">
    
    <ul class="nav nav-pills pull-right">
        <li style="margin-right:23px;">
            <span class="hatena"></span>
        </li>
        <li>
            <span class="google_plusone"></span>
        </li>
        <li style="margin-right:-24px;">
            <span class="twitter"></span>
        </li>
        
        <li>
            <fb:like href="urlをどうぞ" send="false" layout="button_count" show_faces="false"></fb:like>
        </li>
    </ul>
    </div>
</div>
スポンサードリンク

nav nav-pills

で ul li を右寄せにする。
これできれいに並ぶハズ。

スポンサードリンク

関連記事

関連カテゴリ

コロ助

web関連の記事や制作系の記事をどんどんまとめていきます。 宜しくお願いします!

ピックアップ

パソコン・ソフトウェア ランキング

10月16日 ( 水 ) にアクセスが多かった記事はこちら!