BloggerでSNSボタンを横並びにそろえる方法

Bloggerにおいて、SNSボタンを表示させた際、不揃いになってしまうので横並びでそろえる方法を試してみました。

方法

<ul>タグと<li＞タグを用いてリストとして横並びにします。

横並びにする方法として、

• <ul>タグ内にて、CSSの「list-style:none」を用いてリストマーカーを非表示にし、「padding-left:0;」にてリストの左余白をなしに設定しました。
• <li>タグ内にてCSSの「float: left;」を用いて右に回り込みをさせ、「margin: 0 10px 0 0;」にて余白を10px開ける設定にしました。
• 最後に回り込み解除として、「<br clear="all">」を追加しました。

下記に、例を示します。

<!--リストマーカー非表示・左余白なし-->
<ul style='list-style:none;padding-left: 0;'>
<!--左のボタンの右側に回り込み10px余白を開ける-->
<li style='float: left; margin: 0 10px 0 0;'><!--いいねボタン--></li>
<li style='float: left; margin: 0 10px 0 0;'><!--はてブボタン--></li>
<li style='float: left; margin: 0 10px 0 0;'><!--ツイートボタン--></li>
<li style='float: left; margin: 0 10px 0 0;'><!--Google+1ボタン--></li>
<li style='float: left; margin: 0 10px 0 0;'><!--Pocketボタン --></li>
</ul>>
<!--回り込み解除-->
<br clear="all"/>

今回は、HTMLタグ内にCSSを追加した方法をとりましたが、classを指定して、別にCSSを書く方法もあります。どちらでも好きなほうで試してみてはいかがでしょう。

回り込みを使う以外にも、CSSの「display:inline-block」を使う方法もあるようです。

以上、参考にしていただけたら幸いです。

• 
• list ツイート