MovableType 3.3 で Tag cloud を簡単に実装する方法

2006-06-24T23:42:09+09:00

Tag: CSS, design, MovableType, tag, tagcloud, tips, webdesign

2006年6月27日の Movable Type 3.3 本公開に向けて、すごい勢いでベータテスト版が更新されていますね。

このブログもすでに beta2 でテストしていますが、beta3, 4 と出るようで、フィードバックがとても追いつきません。

MT3.3 で一番キャッチーだと思う機能は、やはり、Tag 機能が正式にサポートされたことだと思います。

そこで簡単に Tag cloud を実装するためのソースを備忘録として書いてみました。

（id や class の名称は使うサイトでバッティングしないように適宜置き換えるとして）(X)HTML 側は至ってシンプルです。

このサンプルでは、Tag をリスト形式でマークアップし、リストの中身に Tag の名称、クリックすることで Tag 検索結果にリンクさせるようにしました。

リンクアンカーに対して class指定に class="level<$MTTagRank$>" と行っておくことで、後に CSS 側で頻度別に見栄えを指定できるようになる仕組みです（"<$MTTagRank$> は、Tag の頻度を表す MT タグです。数字が小さいほど頻度が高くなります）。

<ul id="tag-cloud">
<MTTags>
<li class="tag">
<a class="tag level<$MTTagRank$>" href="<$MTTagSearchLink$>" title="<$MTTagName$>(<$MTTagCount$>)" rel="tag"><$MTTagName$></a>
</li>
</MTTags>
</ul>

それでは、念願の（？）cloud っぽさを実装するために CSS で見た目を制御してみましょう。先に (X)HTML 側で指定した class="level<$MTTagRank$>" 別にフォントサイズや色の濃淡などをアレンジするだけでおしゃれな tag cloud ができあがります。

ここでは、頻度によって文字の大きさを変更するような CSS のサンプルを書いてみます。もし活用いただく際には、大きさはお好みで調節してください。

/* Tag cloud */
ul li.tag {
    margin-right: 5px;
    display: inline;
    list-style: none;
    }

li.tag a.level1 {
    font-size: 175%;
    }

li.tag a.level2 {
    font-size: 160%;
    }

li.tag a.level3 {
    font-size: 145%;
    }

li.tag a.level4 {
    font-size: 135%;
    }

li.tag a.level5 {
    font-size: 120%;
    }

li.tag a.level6 {
    font-size: 110%;
    }

ちなみに、"<$MTTagRank$> には基準値を設定するアトリビュート max="xx" が指定できます。基準値は 6 ですが、タグの種類と数が多くなってきた場合にそなえて、あらかじめ段階を増やしてカスタマイズしても良いかもしれません。

参考：Movable Type 3.3 マニュアル（ベータ版）: テンプレート・タグリファレンス

タグリファレンスをCtrl + F で tag と検索するだけで、MT3.3 で追加された Tag 関係の MTタグを参照できます。Tag の出現数を横に表示させるなど、いろいろカスタマイズできそうですね。

すでにキーワード欄を使って Tag cloud を実装するポピュラーな方法としては、 Ogawa::Memoranda さんの Tagwire plugin がオススメです。 mt-keywords2tags/mt-cats2tags という便利なスクリプトをつくってくださっているので MT3.3 に問題なく移行できることと思います。

正式リリースが延期になったみたいです。がんばれ SixApart さん！

by purprin
at June 24, 2006 23:42
in Design

▲ top

« Prev entry
Next entry »

TrackBacks

Trackback List

MT3.3への移行とTag Cloudの導入 from LUXURY プランナー、加藤康祐のブログ

Folksonomyの代表格がTaggingによる分類なわけで、Technoratiを使いつつ、いつしかMovableTypeでもタグがデフォルトで本格採...

June 30, 2006 10:41 PM
タグクラウドを実装 from ちょほいとまちなは

移転と同時にMTのバージョンも3.31にアップしました。タグというものの使い方が、イマイチ理解できていませんが(^ ^;) 「MT タグ　クラウド」でグ...

August 13, 2006 7:40 PM
Ｍｏｖａｂｌｅｔｙｐｅ3.3 タグクラウド from web2.0的アフィリエイト・ラボ

Ｍｏｖａｂｌｅｔｙｐｅ3.3で編集できるようになったＴａｇで、タグクラウドを実装...

September 28, 2006 4:05 PM

▲ top

Comments

* Gravatarに登録(FREE)するとあなたのアバターが表示されます。

▲ top

- Ohma Yusuke
- はじめまして、IROYA.netを運営しております者です。
  この度は、当サイトにてご紹介させていただきましたのでコメントさせていただきました。
  これからも楽しみに拝見させていただきますね。
June 25, 2006 12:32 PM
- purprin
- > Ohma Yusuke さん
  ご紹介いただきありがとうございます！
  こちらこそ IROYA.net さんブックマークさせていただきました。とても素敵なサイトですね。勉強になります。
June 25, 2006 2:43 PM
- ieiri
- ぬお。かっこいい。これからチェキらせていただきます！
June 25, 2006 10:32 PM
- purprin
- > ieiri さん
  (/e＼)ﾃﾚ　ありがとうございます！
June 26, 2006 8:50 AM
- kosuk
- 参考にさせていただきました。ちといじらせてもらって、思い通りのタグクラウドが表示できるようになりました。ありがとうございます！サイトのデザインも素敵ですね。
June 30, 2006 10:48 PM
- purprin
- > kosuk さん
  タグ表示できてよかったです。こちらこそありがとうございます！
July 1, 2006 7:14 PM

▲ top

pur*log