eternalheart.com

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;
}

参考にさせていただきましたサイトの皆様、ありがとうございました。