20Aug,2006
MT 3.3にアップグレードしてから若干時間が経ってしまいましたが新たに追加された<MTTags>~</MTTags>を中心にしてタグクラウドを作成しました。
今回はその作成方法とタグクラウドのスタイルについて考えてみました。
MT3.3から新しく追加された、エントリータグ関連のMTタグを使うことで驚くほど簡単に作成が出来ます。もちろん、タグの出現頻度によってスタイルを変更する必要がありますので、CSSの設定については次にまとめました。
以下は今回タグクラウドを設置する際に使用したMTタグです。
エントリー・タグの一覧を表示するためのコンテナ・タグです。
アトリビュート
glue="XX"
複数のエントリー・タグを並べて表示するときの、区切り文字を設定します。区切り文字には'(シングル・クォーテーション)や"(ダブル・クォーテーション)は使えません。
エントリー・タグの名前を表示するための変数タグ。
アトリビュート
quote="1"
エントリー・タグの名前の前後に、ダブル・クォーテーションを付加します。
normalize="1"
エントリー・タグの名前から、記号等を削除します。
特定のエントリー・タグの頻度を表示します。数値が小さい方が頻度が高くなります。このタグは、タグクラウドを表示する際に利用します。
アトリビュート
max="xx"
頻度の基準値を設定します。初期値は6です。
CSSのクラスを振り分けるるために以下のような形で使用しています。
class="tagLebel<$MTTagRank max="6"$>"
特定のブログ内で、指定したエントリー・タグを付加したエントリーを検索するためのリンクです。
使用したMTタグを実際に組み立てると、以下のようになります。
<ul>
<MTTags>
<li class="tagLebel<$MTTagRank max="6"$>"><a href="<$MTTagSearchLink$>" title="<$MTTagName$>"><$MTTagName$></a></li>
</MTTags>
</ul>
まずは出力されたXHTML ソースは以下のようなパターンとなります。
tagLebel1からtagLebel6には個別にスタイルを当てていきます。
尚、数字が小さい方(1)が最も出現頻度が多いので目立つスタイルを指定しましょう。
<ul>
<li class="tagLebel1"> </li>
<li class="tagLebel2"> </li>
<li class="tagLebel3"> </li>
<li class="tagLebel4"> </li>
<li class="tagLebel5"> </li>
<li class="tagLebel6"> </li>
</ul>
で指定したスタイルはというと、以下の通りです。
tagLebel1からtagLebel6の順番で目立つようにと文字の大きさを割り振りました。
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: inline;
margin: 0 5px 0 0;
padding: 0;
}
ul li.tagLebel1 {
font-size: 200%;
}
ul li.tagLebel2 {
font-size: 180%;
}
ul li.tagLebel3 {
font-size: 160%;
}
ul li.tagLebel4 {
font-size: 140%;
}
ul li.tagLebel5 {
font-size: 120%;
}
ul li.tagLebel6 {
font-size: 100%;
}
タグクラウドのスタイルについてはcollisions.dotimpac.toさんが「タグクラウドのスタイルを考える」で上手にまとめています。
collisions.dotimpac.toさんのいうように出現頻度を表すグラフというのがしっくりくると思います。その場合、文字の大きさだけでなく、文字の濃淡などでも上手にデザインできるかもしれませんね。
また、タグの出現頻度を視覚化といったところでタグクラウド+SOMの要素なんかが入ってくると分類の方法としてタグが便利になってくるのかなあと感じます。
このエントリーのトラックバックURL:
http://saladbowl.org/mt/mt-tb.cgi/438
コメントしてください