CSSだけで超キレイなSNSボタン作成! bootstrap.social を使ってみた

Twitter とか Facebook とか Google とか Tumblr とか LinkedIn とか・・・

こういう SNSボタン を自前で作成しようとすると、果てしなく時間がかかります。

あとデザインとか整えるのも、素人にはとても難しいです(というかムリ)

そこで便利だったのが bootstrap.social というCSSフレームワーク

ここではこれを使い、CSSだけで綺麗なSNSボタンを作る手順をまとめてみました。

手順1.まずは FontAwesome と Bootstrap を読み込み

まず bootstrap.social を使うのに必要なのが、次の2つ

  • FontAwesome
  • Bootstrap

この2つを事前に読み込みしておく必要があります。

 

一番簡単なのは CDN経由で読み込みすること ですね。

例えば次コードみたいな感じで

上のは bootstrap が用意しているCDNから全部読み込んでます。

ちなみに FontAwesome からリンクする場合、登録が必要になったみたいです。

「登録なしで今すぐ読み込みしたい」<== こういう場合は上記のCDNを使うのが手っ取り早いかも

 

あとちなみに、CDNを使わないなら次URLからダウンロードでもできます。

取りあえずCDNでも直読みでもいいので、
FontAwesome と Bootstrap さえ読み込みしとけばOKです。

手順2.bootstrap.socialのダウンロード&読み込み

そうしたら次に bootstrap.social 本体を読み込みします。

ダウンロード先 : https://lipis.github.io/bootstrap-social/

上URLに進んだら、【Download】をクリックすればzipがダウンロードできます。

 

そしてDLして解凍したら、bootstrap-social.css だけインクルードすればOKです。

例えば次がその読み込み例

SNSボタンなので、後読み(bodyタグ内)でも問題ないと思います。

手順3.実際にSNSボタンを作ってみる

あとはSNSボタン作成用のタグを書くだけで作れます。

FontAwesome を使ってるので、各SNSのアイコン表示も可能です。

 

例えば次が Twitter 用のSNSボタン作成例

上コードを見ても分かりますが、重要ポイントは次の3つ

  • クラス名に btn-social  を必ず付与する
  • 各SNSの指定は btn-*  から指定可能
  • アイコンは FontAwesome から指定

どういうSNSに対応してるかは公式サイトの方を見てください。

例をいくつか挙げると、 btn-facebook  とか btn-flickr  とか btn-github  とか・・・

有名どころのSNSならほぼ全部対応してます、超便利

 

あと実際に表示されるSNSボタンはこんな感じ

bootstrap.socialで作ったTwitterのSNSログイン用ボタン

結構お洒落な感じで、どんなデザインでも違和感なく使えそうです。

デザインとか大きさも統一されてるので、使い勝手も中々よさげ

もしSNSボタンが正常に表示されない場合は...

これは自分のケースですが、
SNSボタンが正常に表示されないことがありました。

なぜか文字色が黒色で表示されちゃうんですよね、例えば次画像みたいな感じで

bootstrap.socialでSNSボタンを作ったけど、なぜか文字色が黒になるときの対処法

多分、環境によってはこういう現象に悩まされる人も多いと思います。

 

こういう場合、次のCSSを追加してあげましょう

単純に文字色を白に変更してるだけです。

原因究明とかも面倒なので、とりあえず上のCSSだけ追加しとけば問題なし

ここまでのまとめ

今紹介した bootstrap.social 、使い方も簡単で本当に便利です。

自分もSNSボタンを設置したいときに使わせてもらってます。

以上、CSSだけで綺麗なSNSボタンを作成するやり方でした。ではでは(^_^)/~

CSS

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください