フォローボタンのcssとjavascripr.js、スキンのjavascript.jsについて

ul.snsp li a span.icon-feedly-square,
ul.snsp li a span.icon-line-square,
ul.snsp li a span.icon-push7-square,
ul.snsp li a span.icon-hatebu-square {
  line-height: 34.5px;
}

このline-heightもいりませんね。

ブラウザはfirefoxで、最初のcssは、今作ってるスキン用に直したものなので一回り小さいかも知れません。
push7のフォローボタンは2つ目のcssを入れないと直りませんが、

今すぐなら、blazechariot-cloud9-で見れます。

> 当サイトのフォローアイコン自体の大きさは大丈夫のような気がします。

アイコン自体は多少大きさが違ってもよいのですが、そのまわりの背景が1px程度ズレていて、font-awesomeとその他と言う感じになっているように思います。

これをあわせるためのスタイルです。

フォント基準のline-heightで合わせると、中身の大きさが異なった場合にそれに合わせて外のボタン部分も影響が出るかと思います。

<ul>
  <li>
    <span>ボタンアイコン</span>
  </li>
  <li>...</li>
  <li>...</li>
</ul>

こういう構造ですから、liでボタンのサイズを決めて、中のフォントサイズは可変で調整が必要(font-awesomeとそれ以外みたいな感じで)ですが、liの中央にフォントを持ってくる方が、フォントのサイズを変更するだけなので構造的には簡単で、また色の変化や例えば形状を変えるのも簡単にできるようになり、例えばfont-awesomeだけではなく、cssスプライト等を利用したり、svgを利用することも簡単にできるようになります。なんせ勝手に中央に揃えるだけなので。

css的には、

ul li {
  position: relative;
  width: 32px;
  height: 32px;
  background-color: #666;
  color: #fff;
}

ul li a {
  color: inherit;
}

ul li span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%,-50%,0);
}

ul li (あるいはフォント、その他画像) {
  font-size: xx;
  /*あるいは
  width: xx;
  height: xx;
  */
}

こんな感じでしょうか。

で、liに仮に.twitterがあった場合、

<ul>
  <li class="twitter">
  ...

こうだとすると、

ul .twitter:hover {
  background-color: #twitter-color;
}

こうでしょうか。

と、お思いでしょうが、それはヘッダなりウィジェットの背景が明るい場合です。
背景が明るい場合の1pxはおそらくこの点に気づきもしないと思うんですが、これが背景が暗くなると目立ちます。何でここには線が入ってるんだろう？と思う人がいるかも知れません。

アンチエイリアスのようなボケた線であれば、「滲みか」ぐらいに思われるかも知れませんが、バッチリ白線なので(笑)

で、前にも書きましたが、寝ログのヘッダのフォローボタン付近のスクリーンショットを何かの記事で見たんですけれども、そこには線がなかったんです。これはOSなりブラウザなりそこらに依存するものかどうかが気になる点です。

ちなみにchromeでは出ないっぽいです。firefoxのみの現象かも知れません。何かfirefoxでfont-awesomeが1pxズレるというのは聞いたことがありますが現象が出ているのはfont-awesome以外なんですよね。

上: firefox
下: vivaldi(chromeも同じかと)

ここらの何かしら情報を持ってる方がいればレス頂きたい感じです。