ラベルリストをクラウド化しました。

 サイドバーにあるラベルが縦長になり、見難くなっていたので、

柔軟材: Labelをクラウドに、のソース

 を参考に、クラウド化してみました。

 少しだけカスタマイズ(ラベル数を表示)していますので、一応ソースも掲載しておきます。

 追加するCSSはこちら。

/* Lable Cloud
----------------------------------------------- */
#labelCloud a {
 text-decoration: none;
 white-space: nowrap;
 line-height: 130%;
}
#labelCloud span.label_xs {
 font-size : 75%;
 opacity  : 0.2;
}
#labelCloud span.label_s {
 font-size : 90%;
 opacity  : 0.4;
}
#labelCloud span.label_m {
 font-size : 120%;
 opacity  : 0.6;
}
#labelCloud span.label_l {
 font-size : 150%;
 opacity  : 0.8;
}
#labelCloud span.label_xl {
 font-size : 200%;
 opacity  : 1.0;
}


 ラベルウィジェットはこちら。

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
 <b:if cond='data:title'>
  <h2><data:title/></h2>
 </b:if>
 <div class='widget-content'>
  <span id='labelCloud'>
  <b:loop values='data:labels' var='label'>
   <b:if cond='data:blog.url == data:label.url'>
    <data:label.name/>
   <b:else/>
    <b:if cond='data:label.count > 20'>
     <a expr:href='data:label.url'><span class='label_xl' expr:title='data:label.count'><data:label.name/></span></a>
    <b:else/><b:if cond='data:label.count > 10'>
     <a expr:href='data:label.url'><span class='label_l' expr:title='data:label.count'><data:label.name/></span></a>
    <b:else/><b:if cond='data:label.count > 5'>
     <a expr:href='data:label.url'><span class='label_m' expr:title='data:label.count'><data:label.name/></span></a>
    <b:else/><b:if cond='data:label.count > 1'>
     <a expr:href='data:label.url'><span class='label_s' expr:title='data:label.count'><data:label.name/></span></a>
    <b:else/>
     <a expr:href='data:label.url'><span class='label_xs' expr:title='data:label.count'><data:label.name/></span></a>
    </b:if></b:if></b:if></b:if>
   </b:if>
 (<data:label.count/>)
  </b:loop>
  </span>

  <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>


0 Comments:

コメントを投稿

このblogのコメント欄は、リアルタイム表示ではありません。掲載まで多少の時間がかかること、また掲載致しかねる場合があることを予め御了承ください。