Jimdoブログ・一覧のサムネ画像を丸でトリミング表示

cssでトリミング！

Jimdoブログのカスタマイズ、難航していたのですが、ようやく一覧ページの画像だけを（！）cssで丸くすることができました。
＊使用テンプレートは、「cape town」です。他のものでもいけるのかな？

/*blog サムネを丸に、サムネは正方形に*/
#cc-m-1 .cc-imagewrapper img {border-radius: 50%; width:210px; height:210px;}
/* タイトル上に20px */
.j-blog-meta { margin-top: 20px;}
/*タグを大文字にしない*/
.j-blog-page--tag { text-transform: none;}

この、指定の部分「#cc-m-1 .cc-imagewrapper img」を特定するのにけっこう時間がかかってしまいましたが、最終的にはできたので満足です。

あと、かなり表示面積が大きいのが気になってたので、小さく210px四方に。
概要の文章もそんなに量を入れないので、横並びになったときの余分な余白を少なくしたかったのもあり。ｗ

ここはまた変えるかも。

参考サイト：
「スタイルシートで画像を円形に表示する方法」
http://tech.jastin.net/circular-image-using-css/

「画像を丸く円形にくり抜いて表示するCSS - スタイルシートTipsふぁくとりー」 http://www.nishishi.com/css/trim-image-to-circle.html