2007_1117_000000.jpg
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;
}

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

カテゴリー: MovableType

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

MovableType

iPod Touchから投稿

iPodからの投稿です。 キーボードが小さくてなかなか大変です。 でも 続きを読む …

MovableType

PholiotのxmlをEntryImagesプラグインで作成すると良いですぞ!

エタハーではおなじみの右上に写真がじわじわ動いているブログパーツ、Ph 続きを読む …

MovableType

MTの検索をAjaxで高速化する、さらにタグクラウドもAjaxで表示!

またまたタグクラウド関連なのですが、普通検索もそうですけど、MTの検索 続きを読む …