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

シェアする

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

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

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

Before

デフォルトのfacebook「いいね!」ボタンはこれくらいの大きさでした。
fblike_normal
スマホだと押しづらいんですよね、これ・・・。

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

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

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

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

After

そして大きくなったfacebook「いいね!」ボタンはこれです。
fblike_large
かなり大きくなりましたね。まぁそもそも押されてないのですが・・・。
これで押されるようになるかな・・・?

この記事が気に入ったら
いいね!お願いします