Friday, January 19, 2007

|Blogger|template| Blogger の Label を TagCloud 化

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

templete by 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. 保存

で終了となります. 再構築の必要がないので,ブログを更新して表示して見てください.
スクリーンショット: Label を TagCloud 化

今回のミソは &lt;span &gt;


 因みに &lt;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 の表示形式を工夫する方法としては以下のエントリもあります. こちらも参考に.


追記 at 2007年02月28日


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

7 comments:

tumusho said...

初めまして、tumushoと言います。
大変参考となる情報ありがとうございます。
さっそくTagCloud化やってみましたところ、うまく行きました!

ありがとうございました。

Jan 19, 2007, 3:52:00 PM
Jyun. said...

コメント及び早速試していただいてありがとうございます.

つたない説明でしたが,無事設置することができたようでよかったです.

スタイルなどに関する説明も付け加えました. また何かありましたら,よろしくお願いします.

Jan 19, 2007, 11:59:00 PM
Kamimura said...

jyun.さん、お久しぶりです。
 私のブログにアドバイスを下さり、有難うございました。
 この仕組、なかなか良さそうですね。

 Tag Click が提供しているタグクラウドは、時々、読み込みが遅いのが欠点ですね。
 登録しておくと、被リンク先が増えると言う利点はあるのですが、Blogger のラベルとの整合性も悩ましいところです。

 jyun.さんの「ラベルからタグクラウド」を利用する方が、よりスマートにできそうですね。

 役に立つ情報提供、有難うございまーす。

Jan 26, 2007, 2:33:00 PM
Kamimura said...

 先ほどコメントしたばかりなのですが、早速 jyun.さんの「ラベルクラウド(?)」導入してみました。
 いい感じですね!
 Tag Click さんのは外しちゃいました。
 投稿数が少ないラベルの表示を少しだけ大きくするように、ちょっと手を加えてみました(ってゆうか、if条件を削除しただけです(笑))。

 見た目もスマートになったと思います。
 感謝感激です。
 有難うございまーす。

Jan 26, 2007, 5:10:00 PM
Jyun. said...

>kamimura さん
こちらこそコメントありがとうございます.
最近他にも,"Label Cloud" を少し違う方法で実装・紹介しているブログがあったりとしているのですが,その割には全体的にラベルカスタマイズ手法はあまり広まってないな・・・とぼやいてみる今日この頃です.
やっぱりテンプレHTMLをいじるのは皆さん億劫なのかな~

僕自身は TagClick 利用したことないのですが,自分には二つ並べる理由もないし,Label が多くてタグクラウドをやりたいならカスタマイズしてしまおうと思い立ったわけです.

すんなり導入できているようで良かったです.

Jan 26, 2007, 8:51:00 PM
Kamimura said...

Jyun.さん、どもでーす。
 バックリンクの件も、見事解決しました。
 かさねがさね、有難うございま~す。
PS:
 Jyun.さんの"Label Cloud" を導入したので、用済みになった TagClick のタグクラウドですが、ホームページで再就職してもらいました(笑)。

Jan 27, 2007, 1:16:00 AM
レプリカ時計 said...

この情報はけっこうアテになるね。なかなかアテになる情報ってなかったけど。リアルなインフォありがとう。120パー信用してまっす!

レプリカ時計

Aug 20, 2011, 5:54:00 AM

Link Code for this post:

Template Design. 2008 Jyun.