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

テンプレートのメモだけで、肝心のカスタマイズ部分のソースを張り忘れていました。 Labelをクラウドにのソースです。 CSSに以下の指定を追加します。CSSはHeadタグの最後です。Bodyの開始タグを検索した方が早いかもしれません。

1:/* Lable Cloud
2:----------------------------------------------- */
3:#labelCloud a {
4: text-decoration: none;
5: white-space: nowrap;
6: line-height: 130%;
7:}
8:#labelCloud span.label_xs {
9: font-size : 75%;
10: opacity : 0.2;
11:}
12:#labelCloud span.label_s {
13: font-size : 90%;
14: opacity : 0.4;
15:}
16:#labelCloud span.label_m {
17: font-size : 120%;
18: opacity : 0.6;
19:}
20:#labelCloud span.label_l {
21: font-size : 150%;
22: opacity : 0.8;
23:}
24:#labelCloud span.label_xl {
25: font-size : 200%;
26: opacity : 1.0;
27:}

次にラベルウィジェットを以下に置き換えます。

1:<b:widget id='Label1' locked='false' title='Labels' type='Label'>
2:<b:includable id='main'>
3: <b:if cond='data:title'>
4: <h2><data:title/></h2>
5: </b:if>
6: <div class='widget-content'>
7: <span id='labelCloud'>
8: <b:loop values='data:labels' var='label'>
9: <b:if cond='data:blog.url == data:label.url'>
10: <data:label.name/>
11: <b:else/>
12: <b:if cond='data:label.count > 20'>
13: <a expr:href='data:label.url'><span class='label_xl' expr:title='data:label.count'><data:label.name/></span></a>
14: <b:else/><b:if cond='data:label.count > 10'>
15: <a expr:href='data:label.url'><span class='label_l' expr:title='data:label.count'><data:label.name/></span></a>
16: <b:else/><b:if cond='data:label.count > 5'>
17: <a expr:href='data:label.url'><span class='label_m' expr:title='data:label.count'><data:label.name/></span></a>
18: <b:else/><b:if cond='data:label.count > 1'>
19: <a expr:href='data:label.url'><span class='label_s' expr:title='data:label.count'><data:label.name/></span></a>
20: <b:else/>
21: <a expr:href='data:label.url'><span class='label_xs' expr:title='data:label.count'><data:label.name/></span></a>
22: </b:if></b:if></b:if></b:if>
23: </b:if>
24: </b:loop>
25: </span>
26:
27: <b:include name='quickedit'/>
28: </div>
29:</b:includable>
30:</b:widget>

idが"Label1"かどうかは、その人のカスタマイズ状況によって違うと思うので適宜変更してください。結構泥臭いif-elseでゴリゴリ書いています。"data:label.count > n"の部分を書き換えてラベルのサイズを調整しています。エントリ数が多い方はこの数を100,70,50,20,10などに調整して下さい。分岐点の数字に根拠はありません。その時のラベルが適当にそれっぽく見える数字を選びました。当然ながら、テンプレートが壊れても当方は責任を負いかねます。

柔軟材

2006/11/05

Labelをクラウドに、のソース

自己紹介

Google Buzz