MTでタグクラウドに時間の経過も要素に加えて表示させる

MT3.2のころに、Ogawa::Memorandaさんの記事を参考にしてtagwireプラグインを使ってタグクラウドのページを作りましたが、MT3.3以降はタグが正式にサポートされプラグインを使わずにタグクラウドのページを作成しておりました。

ですが、標準で用意されているテンプレートタグはシンプルなものなのでtagwireプラグインを使っていた時のような時間の経過と共に文字の色が薄れていくという時間経過も要素に加えるタグクラウドの作成はできませんでした。

仕方ないなとあきらめていたのですが、やはりOgawa::MemorandaさんのところでTagSupplementalsプラグインというプラグインが公開されておりました。さすが！

Movable Type 3.3でタグ機能がネイティブ対応されましたが、標準で用意されているテンプレートタグだけでは[:Tagwire Plugin.ja_JP:Tagwire Plugin]などと比較して機能が不足しているため、不便を感じなくはありません。

TagSupplementals Pluginは、MT 3.3の提供するテンプレートタグに加えて「あったらいいな」と思われるテンプレートタグのコレクションを実現します。今のところ以下のテンプレートタグを提供しています。

* MTEntryTagsCount変数タグ
* MTRelatedEntriesコンテナタグ
* MTRelatedTagsコンテナタグ
* MTArchiveTagsコンテナタグ
* MTTagLastUpdated変数タグ
* encode_urlplusグローバルフィルタ
* MTSearchTagsコンテナタグ(MT-Search用のテンプレート内でのみ利用可能)
* MTXSearchTagsコンテナタグ(MT-XSearchインストール時のみ利用可能)
* MTTagXSearchLink変数タグ(MT-XSearchインストール時のみ利用可能)

とのこと、すばらしいですね。

テンプレートの作成/修正

Ogawa::Memorandaさんで公開されているタグクラウドのテンプレートを修正して使用します。

<ul id="tags">
<MTTags>
<li title="<$MTTag$>:<$MTTagCount$>:<$MTTagDate format="%Y-%m-%d"$>"><a
title="Tag: <$MTTag$>"
href="<$MTBlogURL$>tag/<$MTTag encode_url="1"$>"><$MTTag$></a></li>
</MTTags>
</ul>

の部分を

<ul id="tags">
<MTTags>
<li title="<$MTTagName$>:<$MTTagCount$>:<$MTTagLastUpdated format="%Y-%m-%d"$>">
<a title="Tag: <$MTTagName$>" href="<$MTTagSearchLink$>"><$MTTagName$></a>
</li>
</MTTags>
</ul>

と修正して新しいインデックステンプレートに保存して再構築します。

これで出現頻度で文字の大きさ、経過時間によって文字の色が変わるタグクラウドができました。

CSSの作成/修正

3ping.orgさんのTag Cloudのスタイルという記事のスタイルがあまりにかっこいいので、参考にしてタグクラウドの見せ方を変えてみました。

こちらも参考までに乗せておきます。

/*--------------------------------------
Tag Cloud
---------------------------------------*/

ul#tags {
border: 1px solid #CCC;
padding: 10px;
margin: 10px;
display: none;
line-height: 1;
font-family: Arial, Helvetica, sans-serif;
}

ul#tags li {
margin: 0;
padding: 0;
display: inline;
}
ul#tags li a {
padding: 0 5px;
position: relative;
text-decoration: none;
background-color: #fff;
border: 1px solid #eee;
}

#tags li.hot a {
color: #00F;
}

#tags li.old a {
color: #777;
}

#tags li.oldest a {
color: #CCC;
}

#tags li a:active,
#tags li a:hover {
color: #6C3;
}

.coffButton {
color: #000;
background: #fff;
border: 1px solid #ccc;
padding: 2px;
cursor: pointer;
}

a.coffButton:hover {
color: #000;
background: #ccc;
}

#coff {
font-weight: bold;
padding: 2px;
}

/* オンマウス */
ul#tags li a:hover {
border-color: #666;
z-index: 10;
}