BloggerのSNSボタン表示がモバイル用では変だったので修正してみた

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

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

しかしながら、スマートフォンで見てみると、ボタンの間隔が広いせいかずれていたので修正をしてみました。

確認に使用したスマートフォンは「Y!mobile 402SH」になります。従って、ほかのスマートフォンではずれて表示される場合がありますのでご了承願います。

修正方法

下記のコードは、以前横並びをきれいにさせたときに使用したコードになります。

<!--リストマーカー非表示・左余白なし-->
<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"/>

上記のままだと、デフォルトで設定されているモバイル用のCSSの影響を受け、ボタンの間隔が空いていました。

今回は、一番左のボタンを端から3px余白を開け、モバイル用CSSの影響を受けているボタンの周りの余白を0にしたうえで、3pxの余白を開けるという方法をとりました。

調整して修正したコードをモバイル用のぽ端を表示するためのコードの場所に貼りかえます。下記のコードはその例を表示しました。

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

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