Movable Type 備忘録

MovableType 3.3 用タグクラウド追加

Jul012006
Author: bzbell
Categories: Customize
Tags: MovableType, TagCloud

Prev Page: MovableTypeに年別アーカイブを追加する
Next Page: Yahooの検索サービスをサイト内に設置する

MovableType(ムーバブルタイプ) 3.3 の新機能の1つとして、タグが使えるようになりました。
ここでいうタグとは、HTMLやXHTMLのマークアップする為のタグではなく、記事に関連するキーワードのことをいいます。

このタグ( キーワード )は、各記事に個別に、自由に設定することができます。

タグクラウドとは、カンタンにいうと各記事に設定されたタグ( キーワード )を一覧表示したものです。
タグクラウド

ということで、わたしのサイトで無料配布しているテンプレートに、以下の機能を追加しました。

各記事に設定されたタグを表示する。
メインインデックス、個別エントリ・アーカイブ、月別アーカイブ、カテゴリ・アーカイブに追加しました。

具体的には、<div class="entry-footer">～</div>内に、以下のコードを追加しています。

<!-- ▼タグ▼ -->
<MTEntryIfTagged>
<dl class="entry-tags">
<dt class="entry-tags-header">このエントリのタグ</dt>
<MTEntryTags>
<dd>/<a href="<$MTTagSearchLink$>" rel="tag"><$MTTagName></a></dd>
</MTEntryTags>
<dt class="entry-tags-footer"></dt>
</dl>
</MTEntryIfTagged>
<!-- ▲タグ▲ -->

スタイルシートに追加したクラスは以下の通りです。

/* エントリのタグ */
dl.entry-tags {
margin: 0;
padding: 0;
border-bottom: 1px dotted #36414d;
}
dl.entry-tags dt.entry-tags-header {
display: inline;
font-weight: bold;
}
dl.entry-tags dd {
display: inline;
margin: 0;
padding: 0;
padding-right: 2px;
}
dl.entry-tags dt.entry-tags-footer {
display: inline;
clear: both;
}

タグクラウド・テンプレートを追加した。
各記事に設定されたタグ一覧を表示するテンプレートを追加しました。

タグクラウド・テンプレートは、メインページをベースに以下のコードを追加したものです。

<!-- ▼タグクラウド▼ -->
<dl class="tagcloud">
<dt class="tagcloud-header">タグクラウド</dt>
<MTTags>
<dd class="tagcloud-tags"><a class="tags-rank<$MTTagRank$>" href="<$MTTagSearchLink$>"><$MTTagName$></a></dd>
</MTTags>
<dt class="tagcloud-footer"></dt>
</dl>
<!-- ▲タグクラウド▲ -->

タグクラウドのコードは上記だけなので、サイドバーに表示してもいいかも、です。

また、MovableType(ムーバブルタイプ) 3.3 のタグ機能では、タグの出現頻度によってランク付けされています。
各ランクのフォントサイズ、文字色をスタイルシートで変更できるようにしています。

スタイルシートに追加したクラスは以下の通りです。

/******************************************/
/** ▼タグクラウド関連▼                 **/
/******************************************/
dl.tagcloud {
margin: 0;
padding: 0;
font-weight: bold;
font-size: 14px;
}
dl.tagcloud dt.tagcloud-header {
margin-bottom: 10px;
border-bottom: 1px solid #36414d;
}
dl.tagcloud dd.tagcloud-tags {
display: inline;
margin: 0;
padding: 0;
}
dl.tagcloud dd.tagcloud-tags a.tags-rank1 {
font-size: 18px;
font-weight: bold;
color: #3366CC;
}
dl.tagcloud dd.tagcloud-tags a.tags-rank2 {
font-size: 16px;
}
dl.tagcloud dd.tagcloud-tags a.tags-rank3 {
font-size: 14px;
color: #777;
}
dl.tagcloud dd.tagcloud-tags a.tags-rank4 {
font-size: 12px;
}
dl.tagcloud dd.tagcloud-tags a.tags-rank5 {
font-size: 11px;
}
dl.tagcloud dd.tagcloud-tags a.tags-rank6 {
font-size: 10px;
color: #CCC;
}
dl.tagcloud dt.tagcloud-footer {
}
/******************************************/
/** ▲タグクラウド関連▲                 **/
/******************************************/

MovableType 3.3 用タグクラウド追加

Trackback Pings(0)

Comments(0)

Post a Comment