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

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

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

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

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

手順１．まずは FontAwesome と Bootstrap を読み込み

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

• FontAwesome
• Bootstrap

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

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

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

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

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

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

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

• FontAwesome　：　https://getbootstrap.com/
• Bootstrap　：　https://fontawesome.com/download

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

手順２．bootstrap.socialのダウンロード＆読み込み

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

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

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

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

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

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

手順３．実際にSNSボタンを作ってみる

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ここまでのまとめ

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

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

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