はじめに

Twitter社による「Bootstrap」を使っているWeb制作者も多いと思います。Bootstrap(読み方:ブートストラップ)とは、CSSのフレームワークで、簡単に今っぽいサイトを作れます。

今っぽいといえば、必ず出てくるのが、いわゆるソーシャルボタンの設置です。たとえば

  • Facebookのいいねボタン(like)
  • Twitterの「ツイートする」ボタン
  • Google+の「g+」ボタン
  • はてなブックマークの「B!」ボタン

などがあげられると思います。

これらのソーシャルボタンは、それぞれが独自に発行しているため、横に並べると、微妙にずれてしまったりして面倒です。

しかし、そこはBootstrap。簡単にできる方法があります。それを紹介します。

Bootstrapでソーシャルボタンを簡単設置!

STEP1

btn-groupというclassを指定し、divで囲みます。

STEP2

それぞれのソーシャルボタンのコードを発行します。リンクは以下にまとまっています。

STEP3

あとは、このdiv内に好きなように設置するだけです。

横幅の調整などは適当に行なうといいと思います!