(K) TwitterやFacebookなどのソーシャルボタンを縦に並べて配置する方法

WordPress

2012/11/21

(K) TwitterやFacebookなどのソーシャルボタンを縦に並べて配置する方法

ブログ改造の熱が冷めてきている@knk_nです。なかなかアクションに結びつきません。
カッコイイ見た目には憧れるものの、見やすさ・読みやすさ・使いやすさを優先しようと考えるとこれがなかなか難しい。
もうしばらくぼんやり考えることにします。かっこよさはとりあえず二の次、三の次で。
そんなわけで今回は「ソーシャルボタンを縦に並べる方法」を紹介します。
記事本文の上下にあるやつですね。

1. 全体の骨組みづくり

まずこのような骨組みを作ります。


<div class="bottom_post">
    <div class="ad">
        <cite>SPONSORED LINK</cite>
        <div class="googlead">広告的な…</div>
    </div>
    <ul class="share">
        <li>
            <a class="button1">button1</a>
        </li>
        <li>
            <a class="button2">button2</a>
        </li>
        <li>
            <a class="button3">button3</a>
        </li>
        <li>
            <a class="button4">button4</a>
        </li>
    </ul>
</div>

htmlと


.bottom_post {
    display: block;
    height: 320px;
}
div.ad {
    float: left;
}
.googlead {
    width: 336px;
    height: 280px;
    border: 1px solid black;
}
ul.share {
    float: right;
    list-style: none;
}
.button1 {
    background-color: red;
    width: 70px;
    height: 70px;
    display: block;
}
.button2 {
    background-color: cyan;
    width: 70px;
    height: 70px;
    display: block;
}
.button3 {
    background-color: yellow;
    width: 70px;
    height: 70px;
    display: block;
}
.button4 {
    background-color: green;
    width: 70px;
    height: 70px;
    display: block;
}

CSS。サンプルなのでピクセル数はテキトーです。

2. それぞれのボタン部分をソーシャルボタンに置き換える

これを基本にして<a class="button1">button1</a>〜<a class="button4">button4</a>それぞれにTwitterやFacebookなど、ソーシャルボタンを表示するコードに置き換えるだけ。足りなければこの部分を増やすのもアリ。
私が使っているソーシャルボタンについてはこちらの記事でまとめてあるので合わせてご参考ください。