ネットのサラダボウル

サイト売買・サイト買取 サイトストック

  • 前のエントリー
  • 次のエントリー

タグクラウドを設置しました。

20Aug,2006

MT 3.3にアップグレードしてから若干時間が経ってしまいましたが新たに追加された<MTTags>~</MTTags>を中心にしてタグクラウドを作成しました。

今回はその作成方法とタグクラウドのスタイルについて考えてみました。

タグクラウドの作り方 MTタグ編

MT3.3から新しく追加された、エントリータグ関連のMTタグを使うことで驚くほど簡単に作成が出来ます。もちろん、タグの出現頻度によってスタイルを変更する必要がありますので、CSSの設定については次にまとめました。

以下は今回タグクラウドを設置する際に使用したMTタグです。

<MTTags>~</MTTags>

エントリー・タグの一覧を表示するためのコンテナ・タグです。

アトリビュート
glue="XX"
複数のエントリー・タグを並べて表示するときの、区切り文字を設定します。区切り文字には'(シングル・クォーテーション)や"(ダブル・クォーテーション)は使えません。

<$MTTagName$>

エントリー・タグの名前を表示するための変数タグ。

アトリビュート
quote="1"
エントリー・タグの名前の前後に、ダブル・クォーテーションを付加します。

normalize="1"
エントリー・タグの名前から、記号等を削除します。

<$MTTagRank$>

特定のエントリー・タグの頻度を表示します。数値が小さい方が頻度が高くなります。このタグは、タグクラウドを表示する際に利用します。

アトリビュート
max="xx"
頻度の基準値を設定します。初期値は6です。

CSSのクラスを振り分けるるために以下のような形で使用しています。
class="tagLebel<$MTTagRank max="6"$>"

<$MTTagSearchLink$>

特定のブログ内で、指定したエントリー・タグを付加したエントリーを検索するためのリンクです。

まとめ

使用したMTタグを実際に組み立てると、以下のようになります。

<ul>
<MTTags>
<li class="tagLebel<$MTTagRank max="6"$>"><a href="<$MTTagSearchLink$>" title="<$MTTagName$>"><$MTTagName$></a></li>
</MTTags>
</ul>

タグクラウドの作り方 CSS編

まずは出力されたXHTML ソースは以下のようなパターンとなります。
tagLebel1からtagLebel6には個別にスタイルを当てていきます。
尚、数字が小さい方(1)が最も出現頻度が多いので目立つスタイルを指定しましょう。

XHTML

<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の順番で目立つようにと文字の大きさを割り振りました。

CSS

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の要素なんかが入ってくると分類の方法としてタグが便利になってくるのかなあと感じます。

2006年08月20日 | Movable Type , アイデア・ヒント | コメント(0) | トラックバック (0) | Hatenaブックマークに追加 このエントリのHatenaブックマーク詳細 del.icio.usブックマークに追加

トラックバック

このエントリーのトラックバックURL:
http://saladbowl.org/mt/mt-tb.cgi/438

コメント

コメントしてください

保存しますか?

  • 第二新卒者などへ向けた転職支援サイト

注目のエントリ

  • 簡単にプロフィールが作れちゃう「iddy.jp」を公開Hot!
  • サイト流通サービス「サイトストック」をリリースHot!
  • モバイルSEOサービス始めます!Hot!
  • .htaccess Editorが Web Designingに掲載されました。Hot!
  • スピリチュアルのスピリチュアルによるスピリチュアルのためのサイト SQ Life オープンHot!
  • Movable Type コンテスト 2006Hot!

最近のエントリ

  • @font-face規則でウェブフォントを表示してみた
  • 銀座週間
  • twitter.jp から学ぶ多言語サービスの提供に関する姿勢
  • デジパのデザイナーがこういうのやり始めました。
  • .htaccess Editor 翻訳プロジェクトが一気に加速
  • AXIS Condensed 発売予定日ほぼ決定!
  • あなたのサイトをオンライン査定します!
  • KAYAC、CUPPY リニューアル
  • 小林章さんの新しいブログ「ここにも Futura」
  • XHTML+CSS関連の書籍出ます。

タグクラウド

カテゴリ

  • Movable Type 
  • WEB2.0 
  • お知らせ 
  • アイデア・ヒント 
  • ウェブデザイン 
  • ウォッチング 
  • ポッドキャスト 
  • 写真・カメラ 
  • 動画関連 
  • 広告・メディア 
  • 日常コラム 
  • 書体関連 
  • 検索エンジン 
  • 注目のエントリ 

月別アーカイブ

  • 2008年03月
  • 2008年02月
  • 2007年12月
  • 2007年11月
  • 2007年08月
  • 2007年07月
  • 2007年06月
  • 2007年05月
  • 2007年04月
  • 2007年03月
  • 2007年02月
  • 2007年01月
  • 2006年12月
  • 2006年11月
  • 2006年10月
  • 2006年09月
  • 2006年08月
  • 2006年07月
  • 2006年06月
  • 2006年05月
  • 2006年04月
  • 2006年03月
  • 2006年02月
  • 2006年01月
  • 2005年12月
  • 2005年11月
  • 2005年10月
  • 2005年09月
  • 2005年08月
  • 2005年07月
  • 2005年06月
  • 2005年05月

フィード

  • Atom
  • RSS 1.0
  • RSS 2.0
  • RSD
Copyright © 2005-2007 Hideyo Ryoken. All rights reserved.