このところ、うちのサイトで公開しているテーマでは、TwitterBootstrapを採用しているものが多くあるのですが、実は、普通にテーマを使っているだけでは余り恩恵がないんです。
もちろん、各テーマごとに工夫を凝らして、ブロックの表示順を変えたりすることで、表示幅のコントロールなどをしているのですが、流石にそれだけでは限界があったりするんですよね。また、色々な表示用のCSSのclassも持っているのですが、これらを利用するには工夫が必要となります。
ここでは、TwitterBootstrapが標準で持っている画像に関するCSSのclassをご紹介しましょう。
「四角い画像を簡単に丸く表示する方法」です。
この画像のソースに、class=”img-circle” を追加するだけで、次のような表示になります。
いかですか？ 簡単でしょ？
ちなみに、正方形の画像ではなくて横長の長方形の画像を使うと、まん丸ではなくて角丸のような表示になります。
これらを使ったサンプルページはこちらです。