Movable Typeのタグ機能に関するまとめ（その1）

トップ > Movable Type > カスタマイズ備忘録 > Movable Typeのタグ機能に関するまとめ（その1）

« Windowsが固まる不具合再び | Movable Typeのタグ機能に関するまとめ（その2） »

Movable Typeのタグ機能に関するまとめ（その1）

Posted by 琉羅 at 2007年05月11日 13:34

最近Movable Typeのタグ機能を使ったカスタマイズを色々としてみました。
というのも、ちょっと気になったことがあってタグについて調べていたのですが、開設当初よりこのブログで使っていたタグ機能はほとんど意味無し状態だったことに気付いたのです。

一応タグクラウドなんかもサイトマップになんとなく設置していたのですが、これらを含めて私が行ったタグに関するカスタマイズをまとめてみました。

Movable Type標準のタグ機能を理解する

まずは基本から・・・という訳で、私が参考にしたページをご紹介。

これらを熟読すれば、タグに関する事項は大体理解できると思います。これらを踏まえた上で、これから実際に私が利用したタグ機能をご紹介していきます。

エントリーにタグを表示する

まず私は各エントリーに設定したタグを表示させることから始めました。
各タグには"mt-search.cgi"によるタグ検索へのリンクを付加して、同じタグが設定されているエントリーを抽出できるようになっています。

<div class="entrytags">
  Tags: <MTEntryIfTagged><MTEntryTags glue=",&nbsp;"><a href="<$MTTagSearchLink$>"><$MTTagName$></a></MTEntryTags>
  <MTElse>has no entry tags.</MTElse></MTEntryIfTagged>
</div>

エントリー・アーカイブはどこに設置してもOKですが、それ以外のテンプレートについては<MTEntries>～</MTEntries>内に設置します。

タグクラウドを設置する

次にやってみたかったのはタグクラウドの設置です。他のブログで見てこれは是非・・・という単純な理由で（・∀・；）

作成方法は小粋空間さんのエントリーに詳しく記載してありますが、ここでは私が設置した方法を改めてご紹介させていただきます。まずは、下記のソースコードを設置したい箇所に記述します（私の場合はサイトマップですが、設置箇所に合わせて各自で修正ください）。

<div id="tagcloud">
  <h2>タグクラウド</h2>
  <ul>
    <MTTags><li class="taglevel<$MTTagRank$>"><a href="<$MTTagSearchLink$>"><$MTTagName$></a></li></MTTags>
  </ul>
</div>

次にCSSに下記のようなソースコードを追加します（これはあくまで私の例ですのでフォントサイズやレイアウトに関しては各自で調整ください）。

div#tagcloud ul {
  text-align: center;
  list-style: none;
}
div#tagcloud ul li {
  padding: 0 0.2em;
  display: inline;
}
div#tagcloud ul li.taglevel1 { font-size: 26px; }
div#tagcloud ul li.taglevel2 { font-size: 23px; }
div#tagcloud ul li.taglevel3 { font-size: 20px; }
div#tagcloud ul li.taglevel4 { font-size: 17px; }
div#tagcloud ul li.taglevel5 { font-size: 14px; }
div#tagcloud ul li.taglevel6 { font-size: 11px; }

更に私の場合はフォントカラーも変更しましたのでCSSに下記のソースコードを追加しました。

div#tagcloud ul li.taglevel1 a { color: red; }
div#tagcloud ul li.taglevel2 a { color: blue; }
div#tagcloud ul li.taglevel3 a { color: #333; }
div#tagcloud ul li.taglevel4 a { color: #666; }
div#tagcloud ul li.taglevel5 a { color: #999; }
div#tagcloud ul li.taglevel6 a { color: #ccc; }

これでタグクラウドは完成です。私の場合は下記のような感じになりました。

サラリーマン白書のタグクラウド

このタグクラウドを設置した時点で、私はタグに関するカスタマイズが終わったと思っていたのですが、最近になって色々調べているとどうやら"mt-search.cgi"における通常の検索結果とタグの検索結果で表示される項目が違っているブログが多いことに気付いたのです。
実は最初気付いた時、Movable Type標準のタグ機能では実現できないことかと思って放置していたのをすっかり忘れてましたorz

長くなりそうですので、それらを含めたタグ機能については次回のエントリーにしたいと思います。