サイドバーにあるラベルが縦長になり、見難くなっていたので、
柔軟材: 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のコメント欄は、リアルタイム表示ではありません。掲載まで多少の時間がかかること、また掲載致しかねる場合があることを予め御了承ください。