トップ –> MovableType Tips –> MT3.3でTagCloud(タグクラウド)

MovableType Tips

MT3.3でTagCloud(タグクラウド)

tagcloud_sample MovableType3.3ベータ2のデフォルトのタグの表示は、サイドバーでタグをリストで表示しているので、どうにかしてタグクラウドならないかと検索していたらSixApart(USA)にタグクラウドの表示方法が載っていたのでご紹介します。


このタグクラウドは、サイドバーでの表示方法の例です。いろいろカスタマイズしてみてください。

1.テンプレート
下記のソースをサイドバーに追加してください。

<div class="module-tagcloud module">
<h2 class="module-header">Tag cloud</h2>
<div class="module-content">
<ul class="module-list">
<MTTags>
<li class="module-list-item taglevel<$MTTagRank$>">
<a href="<$MTTagSearchLink$>"><$MTTagName$></a>
</li>
</MTTags>
</ul>
</div>
</div>

<$MTTagRank$>の説明

MTTagRank
特定のエントリー・タグの頻度を表示します。数値が小さい方が頻度が高くなります。このテンプレート・タグは、タグ・クラウドを表示する際に利用します。
アトリビュート: max="xx" 頻度の基準値を設定します。初期値は6です。

2.スタイルーシート追加

.module-tagcloud .module-content a {text-decoration: none; }
.module-tagcloud .module-content { text-align: left; }
.module-tagcloud .module-content .module-list { list-style: none; }
.module-tagcloud .module-content .module-list .module-list-item { display: inline; }
.module-tagcloud .module-content .module-list li.taglevel1{ font-size: 20px; }
.module-tagcloud .module-content .module-list li.taglevel2{ font-size: 18px; }
.module-tagcloud .module-content .module-list li.taglevel3{ font-size: 16px; }
.module-tagcloud .module-content .module-list li.taglevel4{ font-size: 14px; }
.module-tagcloud .module-content .module-list li.taglevel5{ font-size: 12px; }
.module-tagcloud .module-content .module-list li.taglevel6{ font-size: 10px; }

青の部分は、こちらで追加しました。タグレベルごとにフォントカラーを指定すればカラフルなタグクラウドができますね。

また<$MTTagRank$>のmaxを指定することで、タグレベルを増やしたり減らしたりすることができます。例えば<$MTTagRank max="10"$>にすると、10段階にタグレベルをわけることができます。スタイルシートもあわせて10段階に変更します。

参照先: SixApart(USA)「Everybody loves tags !」

トラックバック

【ブログタイトル】 tomochica* weblog
【記事タイトル】 タグクラウド
【記事概要】 先日タグの機能をつけましたが、それを使って一番やりたかったこと.. タグクラウド... [ 詳しくはこちら ]

ご意見・ご感想 (3)

ikias:

迅速な対応、本当に感謝します。どうもありがとうございました^^。

こんにちは、はじめまして。
タグクラウドのフォントカラー指定は下記のようにしてしましたよ。ご参考になれば幸いです^^
.module-tagcloud .module-content .module-list li.taglevel1 a{ color: #99ffff; }
.module-tagcloud .module-content .module-list li.taglevel2 a{ color: #ccff33; }
.module-tagcloud .module-content .module-list li.taglevel3 a{ color: #ffcc00; }
.module-tagcloud .module-content .module-list li.taglevel4 a{ color: #f0f0f0; }

ikias:

はじめまして。エントリを参考させて、ありがとうございます。
ところが、素人なので、なかなかタグレベルごとにフォントカラーを指定できませんでした...。CSSアドレスは下の通りで、教えてもらえませんか。

ご意見・ご感想を投稿

・ 商品に対するお問い合わせも受け付けております。
・ ご意見・ご感想の内容は確認後表示されます。しばらくお待ちください。
・ 本サイトと無関係の内容は、削除いたします。ご了承ください。

January 3, 2007

  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      

Recent Comments

ikias on MT3.3でTagCloud(タグクラウド): 迅速な対応、本当に感
magnet on MT3.3でTagCloud(タグクラウド): こんにちは、はじめま
ikias on MT3.3でTagCloud(タグクラウド): はじめまして。エント

Index