たった１行でfacebookの「いいね！」ボタンを大きくする方法。css3だけで出来ます。

たまに物凄い大きなfacebookの「いいね！」ボタンが付いているサイトありますよね？あれってどうやるんだろうな・・・？と思ってたらものすごく単純で簡単でした。

たった１行でfacebookの「いいね！」ボタンを大きくする方法。css3だけで出来ます。

このサイトは記事下に「VA Social Buzz」というプラグインを使ってバズメディア風のソーシャルボタンを置いています。
プラグインの見た目を変えるのってWordpress Popular Postみたいにプラグイン側で対応していないと結構面倒くさいので、ちょっと諦めてましたが・・・
出来ました。CSS3だけで可能です。

Before

デフォルトのfacebook「いいね！」ボタンはこれくらいの大きさでした。

スマホだと押しづらいんですよね、これ・・・。

なのでstyle.cssにこの定義を挿入します。

.fb-like {
    transform:scale(2);
    -webkit-transform:scale(2);
    -moz-transform:scale(2);
}

こう書けば１行です。
.fb-like {　transform:scale(2);　-webkit-transform:scale(2); -moz-transform:scale(2);}

この「scale(2)「」になっているところを1.5に変えたりすると大きさが調整できます。

After

そして大きくなったfacebook「いいね！」ボタンはこれです。

かなり大きくなりましたね。まぁそもそも押されてないのですが・・・。
これで押されるようになるかな・・・？