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