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

MovableType

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
【記事タイトル】 タグクラウド
【記事概要】 先日タグの機能をつけましたが、それを使って一番やりたかったこと.. タグクラウド... [ 詳しくはこちら ]

【ブログタイトル】 インターネット*ノート
【記事タイトル】 今更ながらMTのタグクラウドを導入してみました。
【記事概要】 MTを使い始めてから半年あまりになりますが、今更ながらタグクラウドを入れてみました。 [ 詳しくはこちら ]

【ブログタイトル】 hands in hands
【記事タイトル】 MovableTypeタグクラウド
【記事概要】 MT3.3でTagCloud(タグクラウド)(MovableTypeカスタマイズ... [ 詳しくはこちら ]

【ブログタイトル】 ハンゾウ日記 by vl0o0lv.com
【記事タイトル】 links for 2007-06-26
【記事概要】 MT3.3でTagCloud(タグクラウド):magnet :.. ... [ 詳しくはこちら ]

【ブログタイトル】 msmcINFO2.0
【記事タイトル】 Movable Type 3.3のTagCloud(タグクラウド)
【記事概要】 Movable Type 3.3のTagCloud(タグクラウド)。標準の表示も... [ 詳しくはこちら ]

【ブログタイトル】 Sadoru.log
【記事タイトル】 タグクラウドをいじってみた
【記事概要】 右側メニューに表示されてる”タグクラウド”。 記事ごとに設定した”タグ”の出現回... [ 詳しくはこちら ]

ご意見・ご感想 (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アドレスは下の通りで、教えてもらえませんか。

ご意見・ご感想を投稿

・ ご意見・ご感想の内容は確認後表示されます。しばらくお待ちください。
・ 本サイトと無関係の内容は、削除いたします。ご了承ください。

August 15, 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