BloggerのラベルをCSS3で簡単に装飾して見栄えよくしよう

Attractive Css3 Labels / Category Widget For Blogger | Blogger Trix | Blogger Tips and Tricks | Free Templates

ここで公開されているCSS3をほとんどそのまま利用して装飾します。

Blogger Trix というサイトでは、ほかにもBlogger用のCSS3が公開されているので、一通り見てみてもよいかもしれません。ナビゲーションとかメニューとかあります。
海外のBloggerのテンプレートに使われてそうなものが結構掲載されています。

現在のBloggerの標準テンプレートではうまく反映しないものもあるので、中身をみて少し書き換えるなどが必要なものもあります。

CSS3でIEとか大丈夫なの？

こんな感じです。これが許容できるかどうかにもよるかと思います。

はてなブックマークのところで使われているタグの表示がいいなと思って、同じものらしきものを探して今回採用してみました。
はてなブックマークのタグの表示も試してみたところ、同じ感じでIEのバージョンによって変わります。CSSがどうなってるのかは確認してないのでわかりません。

今回使用したCSS3

.post-header .post-labels{
 margin:0;
 padding:0;
 position:relative;
 } 
.post-header .post-labels a{
 float:left;
 height:14px;
 line-height:14px;
 position:relative;
 font-size:10px;
 margin-bottom: 9px;

 margin-left:2px; /*20px*/
 margin-right:8px; /*20px*/

 padding:0 10px 0 12px;
 background:#0089e0;
 color:#fff;
 text-decoration:none;
 -moz-border-radius-bottomright:4px;
 -webkit-border-bottom-right-radius:4px; 
 border-bottom-right-radius:4px;
 -moz-border-radius-topright:4px;
 -webkit-border-top-right-radius:4px; 
 border-top-right-radius:4px; 
 } 
.post-header .post-labels a:before{
 content:"";
 float:left;
 position:absolute;
 top:0;
 left:-7px;
 width:0;
 height:0;
 border-color:transparent #0089e0 transparent transparent;
 border-style:solid;
 border-width:7px 7px 7px 0;  
 } 
.post-header .post-labels a:after{
 content:"";
 position:absolute;
 top:5px;
 left:0;
 float:left;
 width:4px;
 height:4px;
 -moz-border-radius:2px;
 -webkit-border-radius:2px;
 border-radius:2px;
 background:#fff;
 -moz-box-shadow:-1px -1px 2px #004977;
 -webkit-box-shadow:-1px -1px 2px #004977;
 box-shadow:-1px -1px 2px #004977;
 }  
.post-header .post-labels a:hover{background:#555;} 
.post-header .post-labels a:hover:before{border-color:transparent #555 transparent transparent;}