【Google Blogger】ブログのラベルをタグ・クラウドのように視覚化

ブログを書いているとラベルがどんどん増えてしまいます。数が増えると縦のスペースもどんどん占領してしまい、ラベルの下に表示されているものがどんどん下に行ってしまいます。ラベルの表示を何とかしたい。2列に並べるとか横に並べるとかしてすっきりさせようと思い立ち、タブ･クラウドのように視覚化して表示することにしました。今回は「柔軟材」さんのサイトで見つけたソースをほぼそのまま使わせていただきました。

●参考サイトURL

• ラベルリストの表示法いろいろ：クリボウの Blogger Tips
• Labelをクラウドに、のソース：柔軟材

BloggerブログのCSSへのソース追加と、ラベルウィジェットソースのカスタマイズをしたのでその手順を記します。

◆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>
  </b:loop>
  </span>
  <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>

1. CSSソースの追加
Bloggerブログのダッシュボードから「テンプレート」をクリックします。「テンプレート」の「カスタマイズ」を選び、Bloggerテンプレートデザイナーの「アドバンス」をクリック、メニューの中から「Add CSS」をクリックすると右側に「Add custom CSS」にテキストボックスが表示されます。上記の「柔軟材」サイトのCSSソースをコピーして貼り付けます。最後に「ブログに適応」ボタンをクリックして登録します。





2. ラベルウィジェットのソースをカスタマイズ
CSSソースの追加が済んだら、「Bloggerに戻る」リンクをクリックして「テンプレート」画面に戻ります。「テンプレート」の「HTMLの編集」を開きます。「HTMLの編集」画面が表示されたら「続行」ボタンをクリックします。HTMLの編集のソース表示画面で「ウィジェットのテンプレートを展開」のチェックボックスをオンにします。ソース内のラベルウィジェット部分のソースを上記ソースに書き換えます。"data:label.count > n"のn部分を書き換えることで、ブログのラベルごとの件数構成に合わせることでサイズ調整が出来ます。ソースを書き換えたら「テンプレートを保存」ボタンをクリックします。
これで作業は終了です。