Movable Type 備忘録
MovableType 3.3 用タグクラウド追加
- 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 { } /******************************************/ /** ▲タグクラウド関連▲ **/ /******************************************/
Trackback Pings(0)
No trackbacks found.
Comments(0)
No comments found.


Post a Comment