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

2017/07/16

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

ブログ改造の熱が冷めてきている@knk_nです。なかなかアクションに結びつきません。

カッコイイ見た目には憧れるものの、見やすさ・読みやすさ・使いやすさを優先しようと考えるとこれがなかなか難しい。
もうしばらくぼんやり考えることにします。かっこよさはとりあえず二の次、三の次で。

そんなわけで今回は「ソーシャルボタンを縦に並べる方法」を紹介します。
記事本文の上下にあるやつですね。

1 1. 全体の骨組みづくり
2 2. それぞれのボタン部分をソーシャルボタンに置き換える
- 2.1 ボタンの幅が気になる人は…
3 おわりに

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。サンプルなのでピクセル数はテキトーです。