Bloggerのタグ クラウドを改良する

ネタとしては古いですが「そんなことはどーでもイイのだ。」

当ブログのタグ クラウドは先人様の遺産を使用させて頂いているのですが、不満な点が二つほどあったので改良しました。
元ネタは柔軟材: Labelをクラウドに、のソースです。


Javascriptで実装している人もいるようですが、Bloggerならタグ クラウドにするのにJavascriptなんて要りません。

ちなみにBloggerの場合、タグではなくラベルなんですが…　。


とりあえず、先人様のソースのままだと...

これがデフォルトの表示状態。
『Blogger』と言う文字に注目して下さい。

『Blogger』という文字をクリックすると、このように文字の大きさが変わってしまいます。

これが修正後です。
文字の大きさが変わらないようにしました。

title属性も見直す

titleも投稿数のみでさみしいので…

ラベルの文字も表示するようにしました。
投稿数が少ないと文字が小さいですから、補助的な意味合いでも良いかな?と。

改良後のTag Cloud

<b:widget id='Label1' locked='false' title='Tag Cloud' 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:label.count > 15'>
<b:if cond='data:blog.url == data:label.url'>
<span class='label_xl'><data:label.name/></span>
<b:else/>
<a  class='label_xl' expr:href='data:label.url' expr:title='data:label.name + "(" + data:label.count + ")"'><data:label.name/></a>
</b:if>
<b:else/>
<b:if cond='data:label.count > 7'>
<b:if cond='data:blog.url == data:label.url'>
<span class='label_l'><data:label.name/></span>
<b:else/>
<a  class='label_l' expr:href='data:label.url' expr:title='data:label.name + "(" + data:label.count + ")"'><data:label.name/></a>
</b:if>
<b:else/>
<b:if cond='data:label.count > 3'>
<b:if cond='data:blog.url == data:label.url'>
<span class='label_m'><data:label.name/></span>
<b:else/>
<a  class='label_m' expr:href='data:label.url' expr:title='data:label.name + "(" + data:label.count + ")"'><data:label.name/></a>
</b:if>
<b:else/>
<b:if cond='data:label.count > 1'>
<b:if cond='data:blog.url == data:label.url'>
<span class='label_s'><data:label.name/></span>
<b:else/>
<a  class='label_s' expr:href='data:label.url' expr:title='data:label.name + "(" + data:label.count + ")"'><data:label.name/></a>
</b:if>
<b:else/>
<b:if cond='data:blog.url == data:label.url'>
<span class='label_xs'><data:label.name/></span>
<b:else/>
<a  class='label_xs' expr:href='data:label.url' expr:title='data:label.name + "(" + data:label.count + ")"'><data:label.name/></a>
</b:if>
</b:if></b:if></b:if></b:if>
</b:loop>
</span>
</div>
</b:includable>
</b:widget>

スタイル(CSS)

サンプル程度に。

#labelCloud span,
#labelCloud a{
  line-height:1.2em;
  padding:1px;
}

#labelCloud .label_xs  { font-size:90%; }
#labelCloud a.label_xs{ color:#808080; }
#labelCloud .label_s    { font-size:100%; }
#labelCloud a.label_s  { color:#999; }
#labelCloud .label_m  { font-size:120%; }
#labelCloud a.label_m{ color: #ccc; }
#labelCloud .label_l    { font-size : 150%; }
#labelCloud a.label_l  { color: #ddd; }
#labelCloud .label_xl  { font-size : 180%; }
#labelCloud a.label_xl{ color: #eee; }

#labelCloud a:hover{
  color: $sidebarhovertxtcolor;
  text-decoration:underline;
}

タグ付けされている数が1個のタグは表示しないようにする

タグの種類が異様に多い方におすすめ。
以下の部分をバッサリ削除すると1個だけのタグは表示されなくなります。

<b:else/>
<b:if cond='data:blog.url == data:label.url'>
<span class='label_xs'><data:label.name/></span>
<b:else/>
<a  class='label_xs' expr:href='data:label.url' expr:title='data:label.name + "(" + data:label.count + ")"'><data:label.name/></a>
</b:if>
</b:if>

応用すれば、2つ以下でも3以下でも可能です。
分からなければ聞いてくだせえぇ。