ブログ改造の熱が冷めてきている@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など、ソーシャルボタンを表示するコードに置き換えるだけ。足りなければこの部分を増やすのもアリ。
私が使っているソーシャルボタンについてはこちらの記事でまとめてあるので合わせてご参考ください。
![]() |
WordPressプラグイン「WP Social Bookmarking Light」を外すことにしました |
<div class="googlead">
〜
</div>
にはGoogle Adsenseで取得したコードを貼っています。
ボタンの幅が気になる人は…
縦に並べるとボタンの横幅のズレが気になるかもしれません。そんな時は以下の方法を試してみてください。
![]() |
ボタンレイアウトを見直しました | ソーシャルボタンを縦に並べて配置するときに大切なこと |
おわりに
以上ボタンの縦並べでした。そこまで複雑なことはしていないつもりですがいかがだったでしょうか。
今回は@yayoko314さんとのTwitterやりとりがきっかけで当記事を書いてみました。
忘れている部分もあったのでいい勉強になったと思います。ありがとうございました。
やよこぶろぐ | ママやったり嫁だったりピアノのせんせいをしたり、毎日ゆるゆる過ごしています。MacBook、iPhone5、iPhone4、iPad2持ち。アプリ大好きです。 |