はてなブログ純正シェアボタン「Twitter」の段差が気になる

カスタムシェアボタンを利用する方はキレイにシェアボタンが並んでいると思うのですが、純正のシェアボタンを使う方は「はてブ、Facebook、Twitter」のこの三つのみの利用が結構多いと思います。

僕の場合ははてブとTwitterだけですが、Twitterのシェアボタンがはてブのアイコン上に並んでいるのがちょっと気になります。

こんな感じにアイコン1つ分ほど上にあがっているので、大袈裟に言うと「発狂するくらい気になります」

ここのソースを見てみると、下記のようになってます。

確認

.social-buttons .social-button-item {
 display: inline-block;
 vertical-align: top;     
 margin-right: .2em;
 margin-bottom: 5px;
 position: relative;
 }

変更

vertical-align: top; のtopの部分をbottomに変えてあげると下揃いになります。vertical-alignの部分しか変更しないので下記コードをCSSに入れてあげます。

.social-buttons .social-button-item {
 vertical-align: bottom;     
 }

unsetでも他のモノでも下揃いになるのですが、一応下と言うか「底」という意味でちゃんとbottomを指定してあげます。

はてブ、Facebook、Twitterまではキレイに下に揃うのですが、Tumblrは下にさげるとこの様にズレてしまいます。.social-buttons .social-button-itemの直下に書いてあるコード内で色々やってるみたいで僕には無理でした。

純正シェアボタンを使っている方はこの三点の利用が多く見られたので、先ほどのコードをCSSに入れるとTwitterが下へ一段下がり、気になっていた人には良いかと思います。

スマホ用

スマホ専用のレイアウトを使っている方はスマホの方に下記をコピペで入れてください。

<style type="text/css"
.social-buttons .social-button-item {
 vertical-align: bottom;
 }
</style> 

場所はヘッダでも記事上でも記事下でもページャでも良いのですが、記事内の変更なので記事上に入れてます。そういえばpocketもLINEも下揃いになります。

試される方は、決定後に動作確認だけお願いします。また「他に良い方法があるよ～」なんて教えてくれる奇特な方がいましたら一報よろしくお願いします。