ソーシャルボタンのレイアウト

はてなブックマークボタンに新しいデザインを追加し、表示速度を改善しました - はてなブックマーク日記 - 機能変更、お知らせなどはてなブックマークのソーシャルボタンに新しいデザインが追加されたようです。

ソーシャルボタンの見た目が今風になるのは良いのですが、バルーン型の(1 行タイプの)ソーシャルボタンは複数のソーシャルボタンを一列に並べようとすると、場合によっては不自然な余白ができてしまったりとレイアウトに苦労します。はてなダイアリーのソーシャルボタンが Twitter だけカウントを表示していないのも、(表示すると)レイアウトが崩れるからじゃないのかなぁと勝手に推測しています(他の理由があったらごめんなさい)。

実際にどれ位の余白ができるのかを確認するために、ざっと html を記述してみました。下図は、TwitterはてなブックマークFacebook の各ソーシャルボタンを 0, 1桁, 2桁, 3桁, 4桁, 5桁の場合にどのように見えるかを表したものです。右側の余白が分かるように、各種ソーシャルボタンが確保している幅を赤枠で囲んでいます。また、はてなブックマークについては、新デザイン (standard-balloon) と旧デザイン (standard) の両方を表示しています。

ソーシャルボタンのレイアウト

上記を見ると、特に何も考慮せずに一列に並べた場合、値が 2 桁くらいまでは Twitterはてなブックマークの新デザインで右側にかなりの余白ができてしまう事が分かります。一方で、Facebookはてなブックマークの旧デザインについては値の大小に関わらず右側の余白は変わらないようです*1Facebook については、昔は他のバルーン型のソーシャルボタンと同様、右側に余白ができてしまっていたように記憶していたのですが、いつの間にか値の大きさによって幅が調整できるようになっているようです。

上記の結果から考えると、これらのソーシャルボタンを横一列に並べる場合、Twitter のソーシャルボタンを一番右に配置して、はてなブックマークは旧デザインのボタンを使うのがレイアウト上は一番楽なのかなぁと言う気がします。

*1:はてなブックマークの旧ソーシャルボタンの場合、はてなブックマーク数が 5 桁を超えると表示されなくなるのですね。