レッド ■ ワン: red-one

ようやく旧 Blogger を抜け出すことができました．
そこで，テンプレートも新しくし，心機一転．　はじめさせていただきます．

templete by Envy inc.

• Envy Inc.: テンプレート配布開始

# 素晴らしいテンプレートをありがとうです．


-- ここからは Blogger バナシ

　果てさて，新 Blogger になって提供されるようになった Label 機能（カテゴリ，タグ）ですが，Blogger には貼り付けたラベルの一覧を表示する方法がリスティングしかありません．

今回はこれを TagCloud 表示化するようにテンプレートカスタマイズしてみました．

Label 一覧を TagCloud 化

これはテンプレートを直接書き換えるので，テンプレートのバックアップを行ってから自己責任でお願いします．

それでは．

1. Blogger のダッシュボードからテンプレートのHTML編集画面へ移る
   
2. ウィジットのテンプレートを Expand 表示にする
   
3. widget タグの type='Label' とあるものを探す．
   例：　<b:widget id='Label1' locked='false' title='Labels' type='Label'>
   ※　もしなければ，ラベル一覧のエレメントをページに追加していないので，先ずページ要素を追加する
   
4. <b:widget ...> ~ </b:widget> まで，タグで囲まれた所を以下のコードに置き換える（コピー＆ペースト）
   

   
   <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'>
   
       <ul style='font-size:100%; padding:0; text-align:justify;'>
       <b:loop values='data:labels' var='label'>
   
         <li style='list-style:none; display:inline; margin:0 4px 0 0;'>
   
           <b:if cond='data:label.count >= 200'>
             &lt;span class='posts-200' style="font-size: 250%;"&gt;
   
           <b:else/><b:if cond='data:label.count >= 150'>
             &lt;span class='posts-100' style="font-size: 230%;"&gt;
   
           <b:else/><b:if cond='data:label.count >= 100'>
             &lt;span class='posts-100' style="font-size: 200%;"&gt;
   
           <b:else/><b:if cond='data:label.count >= 70'>
             &lt;span class='posts-50' style="font-size: 170%;"&gt;
   
           <b:else/><b:if cond='data:label.count >= 50'>
             &lt;span class='posts-50' style="font-size: 150%;"&gt;
   
           <b:else/><b:if cond='data:label.count >= 30'>
             &lt;span class='posts-30' style="font-size: 140%;"&gt;
   
           <b:else/><b:if cond='data:label.count >= 20'>
             &lt;span class='posts-20' style="font-size: 130%;"&gt;
   
           <b:else/><b:if cond='data:label.count >= 15'>
             &lt;span class='posts-10' 1style="font-size: 120%;"&gt;
   
           <b:else/><b:if cond='data:label.count >= 10'>
             &lt;span class='posts-10' style="font-size: 110%;"&gt;
   
           <b:else/><b:if cond='data:label.count >= 8'>
             &lt;span class='posts-1' style="font-size: 100%;"&gt;
   
           <b:else/><b:if cond='data:label.count >= 5'>
             &lt;span class='posts-1' style="font-size: 85%;"&gt;
   
           <b:else/><b:if cond='data:label.count >= 3'>
             &lt;span class='posts-1' style="font-size: 75%;"&gt;
   
           <b:else/><b:if cond='data:label.count > 0'>
             &lt;span class='posts-1' style="font-size: 65%;"&gt;
   
           <b:else/>
             &lt;span class='posts-0' style="font-size: 50%;"&gt;
   
           </b:if></b:if>
           </b:if></b:if>
           </b:if></b:if>
           </b:if></b:if>
           </b:if></b:if>
           </b:if></b:if>
           </b:if>
   
   
           <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: " + data:label.name'><data:label.name/></a>
   
           </b:if>
   
         &lt;/span&gt;
   
         </li>
       </b:loop>
       </ul>
   
       <b:include name='quickedit'/>
     </div>
   </b:includable>
   </b:widget>
   

   少し長くて冗長かもしれませんが，内容自体は非常に単純なので読んで理解するのも難しくはありません．
   if-then ルールが長いですが，自分の好みに合わせて更にカスタマイズしてください．
   
5. 保存

で終了となります．　再構築の必要がないので，ブログを更新して表示して見てください．

今回のミソは <span >

　因みに <span となっているのはタイプミスではありません．

　新 Blogger の if-else タグ文は，その中でもコンテンツがきちんと閉じてなければなりません．
つまり，<タグ> と </閉じタグ> の組が必ず同じ if 文内になくてはなりません．

今回のように，条件文が多かったり細かく表示を変えたかったりしたい場合などでは，とても冗長になり記述量が増えてしまいます．
しかしながら，（現在の Blogger では）上記のように記述することで if 文コンテンツ内の HTML タグを閉じずにまた正式なタグとして適応させることが出来ます．

注意点

　今回の実装方法は，もしかしたら Blogger のバグを利用したものかもしれません．　将来は仕様が変更されるかもしれませんし，実現できなくなるかもしれません．
　また，&lt; でエスケープしたとしても，構築したブログではタグとして認識されるので，閉じタグなどをきちんと自分で文法チェックしてください．
以上のことを留意してテンプレートに組み込んでください．

スタイルを少し変えたい・・・？

　投稿数自体が少なくてタグ全体の文字が小さくて見えない・・・，というときは以下のようにスタイルを指定して文字の大きさを変えてください．
&kt;head> の中の <style> タグで，

<style>
...

.Label .widget-content ul {
  font-size: 130%! important;
}
...
<style>

他にも，投稿数毎にクラスを割り当てているので，それを利用してより見やすいように調整できます．
例えば，50件以上のものをより強調したい

.Label .posts-50,
.Label .posts-100,
.Label .posts-200 {
  font-size: 150%! important;
  font-weight: bold;
}

投稿数の少ないものをより小さくしたい

.Label .posts-1 {
  font-size: 80%! important;
}

など指定できます．　投稿数が増えると共にかえていきましょう．

その他

その他にも，Label の表示形式を工夫する方法としては以下のエントリもあります．　こちらも参考に．

• Blogger Beta Tips: ラベルをメニューのように使う

追記 at 2007年02月28日

ul タグのスタイルに text-align: justify; を指定して表示を均等割り付けにしました．