デカッ!CSSでFacebookの「いいね!」ボタンを大きくする表示する方法!

Web・ブログのこと CSS
スポンサーリンク

Facebook

デカいボタン!カズヤ(@kazumiso_s)です。

ブログやサイトを運営している方は専用のFacebookページを設けてファンとの繋がりを取っていることかと思います。

そのFacebookページに「いいね!」してもらうためのボタンをCSSで大きく表示する方法があったのでご紹介!

スポンサーリンク

CSSでFacebookの「いいね!」ボタンを大きくする

いいね!ボタンを設置する際のタグには「fb-like」というClassが指定してあります。

このClassに対して以下のスタイルを指定するだけでボタンが大きくなる!

もちろん、大きくなっても普通にボタンは押せますよ。

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

transform:scaleは要素の拡大・縮小を設定するもの。

これに2を設定してあげると2倍の大きさで表示するという命令になるため、Facebookボタンが拡大されるというものです!

個別に設定した場合はタグ毎に設定する!

CSSに記述するとサイトに表示している「いいね!」ボタン全てに反映されてしまいます。

特定の箇所に設置した「いいね!」ボタンだけ大きく表示したい場合は、タグに個別設定してあげましょう!

<div class="fb-like" 
data-href="https://www.facebook.com/applian.jp"
data-width="450"
data-layout="button_count"
data-show-faces="false"
data-send="false"
↓これを追加
style="transform:scale(2);-webkit-transform:scale(2);-moz-transform:scale(2);"
↑これを追加
></div>

最後に

あまり大きすぎるとロゴが荒くなるので拡大は2倍くらいにしておきましょう。

自身のサイトに合わせて色々な大きさを試してみてください!

スポンサーリンク

この記事は私が書きました。

管理人:カズヤ(@kazumiso_s)

31歳、横浜市在住の2児の父。本業はシステムエンジニアで目標は今の会社で取締役になること。「毎日に価値を見出す」ことを信念に置き、未来に役立つ情報を発信しています。難病「好酸球性副鼻腔炎」という嗅覚障害持ち。最近生まれて初めて坊主にした。詳細なプロフィールはこちらから

この記事をシェアはこちらから。

フォローして頂けるとブログの更新情報をお届けできます。

この記事が気に入ったら「いいね!」
最新情報をお届けします。

もう1記事いかがですか。