Bloggerのテンプレートはその動作を読み取るのに苦労するんですが、少し勉強してタグの書き方を覚えたんで、以前Javascriptを使わずにTag Cloudにする方法を書いたんですが、それをもうちょっと改造してみた。
ちょっと説明すると、「includable」というタグはメソッドみたいなもので、「id='main'」のincludableタグはC#で言うところの「static void main」みたいなもの(厳密には違うけどイメージで)。
各ウィジェットに一つあるはずです。
<b:includable id='main'>「id」属性をメソッド名のように使用している。
「var」というのは引数にあたる。例えば、
var='i'なら、この変数を使用して
data:i.titleなどのように使用する。
これら main 以外の inculudable タグの処理を「inculude」タグ(incudableじゃないよ)で使用する、という流れになる。
以下に記したものを例にすると、main 以外に「setAnc」という incudable タグがある。
<b:includable id='setAnc' var='label'> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url' expr:title='data:label.count + " Posts in " + data:label.name'><data:label.name/></a> </b:if> </b:includable>
これを main 内の inculude タグで使用している。
<b:include data='label' name='setAnc'/>name属性で使用するincludable タグのidを指定する。
name='setAnc'
data属性は引数で、ネーミングから分かるようにラベルを渡している。
data='label'
これらのことから
<b:include data='label' name='setAnc'/>をコードっぽく書くと「setAnc(label)」みたいな。
そんな感じで改造したタグクラウドが以下になります。
Tag Cloud XML Sample
<b:widget id='Label1' locked='false' title='Tag Cloud' type='Label'> <b:includable id='setAnc' var='label'> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url' expr:title='data:label.count + " Posts in " + data:label.name'><data:label.name/></a> </b:if> </b:includable> <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:label.count > 20'> <span class='label_xxl'><b:include data='label' name='setAnc'/></span> <b:else/> <b:if cond='data:label.count > 12'> <span class='label_xl'><b:include data='label' name='setAnc'/></span> <b:else/> <b:if cond='data:label.count > 7'> <span class='label_l'><b:include data='label' name='setAnc'/></span> <b:else/> <b:if cond='data:label.count > 3'> <span class='label_m'><b:include data='label' name='setAnc'/></span> <b:else/> <b:if cond='data:label.count > 1'> <span class='label_s'><b:include data='label' name='setAnc'/></span> <b:else/> <span class='label_xs'><b:include data='label' name='setAnc'/></span> </b:if></b:if></b:if></b:if></b:if> </b:loop> </span> </div> </b:includable> </b:widget>
一応スタイルも貼っときます。
CSS Sample
#labelCloud span{
line-height:1.1em;
padding:1px;
}
.label_xs,
.label_xs a{font-size:10px;}
.label_xs a:link,
.label_xs a:visited{color:#666;}
.label_s,
.label_s a{font-size:12px;}
.label_s a:link,
.label_s a:visited{color:#808080;}
.label_m,
.label_m a{font-size:14px;}
.label_m a:link,
.label_m a:visited{color: #999;}
.label_l,
.label_l a{font-size:16px;}
.label_l a:link,
.label_l a:visited{color:#ccc;}
.label_xl,
.label_xl a{font-size:18px;}
.label_xl a:link,
.label_xl a:visited{color:#ddd;}
.label_xxl,
.label_xxl a{font-size:20px;}
.label_xxl a:link,
.label_xxl a:visited{color:#eee;}
参考:
0 Comments:
コメントを投稿