「Movable Type」でタグクラウドを表示する
「Movable Type」3.3以降では、エントリーにタグを付けることができるようになりました。
はじめは、エントリーにタグを付けていませんでした。あるとき、あるエントリーに対して関連エントリーを表示させたいと思いたって、調べてみると、タグ付けしておく必要があることが判明しました。
それ以来、エントリーに対するタグ付けをはじめました。
詳細は、「Movable Typeで関連エントリーを表示する」を参照してください。
タグ付けされたエントリーが増えてきたので、「タグクラウド」をつかってエントリーを検索できたらできたら便利かなぁと思い、挑戦してみました。
Movable Type(3.3以降)で「タグクラウド」を表示するための設定を紹介します。
(A)「メインページ」のテンプレートで、タグクラウドを表示したい場所(サイドバー)に、以下のコードを挿入します。
---------------------------------------- ここから
<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」で変更することができます。
10段階でタグのレベルを評価したい場合には、次のようにします。
<$MTTagRank max="10"$>
デフォルトでは、6段階(1-6)で評価するように設定されているようです。
(B)「スタイルシート」のテンプレートに以下のコードを追加します。
---------------------------------------- ここから
.module-tagcloud .module-content a {text-decoration: none; }
.module-tagcloud .module-list-item { display: inline; background: none }
.module-tagcloud .module-content {text-align: center; }
.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: 19px; }
.module-tagcloud .module-content .module-list li.taglevel2 { font-size: 17px; }
.module-tagcloud .module-content .module-list li.taglevel3 { font-size: 15px; }
.module-tagcloud .module-content .module-list li.taglevel4 { font-size: 13px; }
.module-tagcloud .module-content .module-list li.taglevel5 { font-size: 11px; }
.module-tagcloud .module-content .module-list li.taglevel6 { font-size: 9px; }
/* タグ名の表示するフォントの色を指定する */
.module-tagcloud .module-content .module-list li.taglevel1 a{ color: #ff0000; }
.module-tagcloud .module-content .module-list li.taglevel2 a{ color: #ffb74c; }
.module-tagcloud .module-content .module-list li.taglevel3 a{ color: #00b66e; }
.module-tagcloud .module-content .module-list li.taglevel4 a{ color: #0000ff; }
.module-tagcloud .module-content .module-list li.taglevel5 a{ color: #0f5474; }
.module-tagcloud .module-content .module-list li.taglevel6 a{ color: #a757a8; }
---------------------------------------- ここまで
色は、虹の7色をもとに設定しました。黄色は見にくかったので、利用せずに6色です。
以上で、タグ名のよって、大きさと色の違う「タグクラウド」を表示することができます。
表示例は、このblogのトップページで確認することができます。いかかでしょうか？若干、浮いてますか？(笑)
「タグクラウド」を表示するにあたり、以下のサイトを参考にさせていただきました。
ありがとうございました。
(参考)
○「Everybody loves tags!」
○「MT3.3でTagCloud（タグクラウド）」
○「tagwireプラグインでカラフルなタグクラウドを作る」
