Movable Type 備忘録

 MovableType 3.3 用タグクラウド追加

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

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

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

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

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

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

    1. <!-- ▼タグ▼ -->
    2. <MTEntryIfTagged>
    3.     <dl class="entry-tags">
    4.     <dt class="entry-tags-header">このエントリのタグ</dt>
    5.     <MTEntryTags>
    6.         <dd>/<a href="<$MTTagSearchLink$>" rel="tag"><$MTTagName></a></dd>
    7.     </MTEntryTags>
    8.     <dt class="entry-tags-footer"></dt>
    9.     </dl>
    10. </MTEntryIfTagged>
    11. <!-- ▲タグ▲ -->

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

    1. /* エントリのタグ */
    2. dl.entry-tags {
    3.     margin: 0;
    4.     padding: 0;
    5.  
    6.     border-bottom: 1px dotted #36414d;
    7. }
    8. dl.entry-tags dt.entry-tags-header {
    9.     display: inline;
    10.     font-weight: bold;
    11. }
    12. dl.entry-tags dd {
    13.     display: inline;
    14.  
    15.     margin: 0;
    16.     padding: 0;
    17.     padding-right: 2px;
    18. }
    19. dl.entry-tags dt.entry-tags-footer {
    20.     display: inline;
    21.     clear: both;
    22. }

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

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

    1. <!-- ▼タグクラウド▼ -->
    2. <dl class="tagcloud">
    3.     <dt class="tagcloud-header">タグクラウド</dt>
    4.     <MTTags>
    5.     <dd class="tagcloud-tags"><a class="tags-rank<$MTTagRank$>" href="<$MTTagSearchLink$>"><$MTTagName$></a></dd>
    6.     </MTTags>
    7.     <dt class="tagcloud-footer"></dt>
    8. </dl>
    9. <!-- ▲タグクラウド▲ -->

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

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

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

    1. /******************************************/
    2. /** ▼タグクラウド関連▼ **/
    3. /******************************************/
    4. dl.tagcloud {
    5.     margin: 0;
    6.     padding: 0;
    7.  
    8.     font-weight: bold;
    9.     font-size: 14px;
    10. }
    11. dl.tagcloud dt.tagcloud-header {
    12.     margin-bottom: 10px;
    13.     border-bottom: 1px solid #36414d;
    14. }
    15. dl.tagcloud dd.tagcloud-tags {
    16.     display: inline;
    17.     margin: 0;
    18.     padding: 0;
    19. }
    20. dl.tagcloud dd.tagcloud-tags a.tags-rank1 {
    21.     font-size: 18px;
    22.     font-weight: bold;
    23.  
    24.     color: #3366CC;
    25. }
    26. dl.tagcloud dd.tagcloud-tags a.tags-rank2 {
    27.     font-size: 16px;
    28. }
    29. dl.tagcloud dd.tagcloud-tags a.tags-rank3 {
    30.     font-size: 14px;
    31.     color: #777;
    32. }
    33. dl.tagcloud dd.tagcloud-tags a.tags-rank4 {
    34.     font-size: 12px;
    35. }
    36. dl.tagcloud dd.tagcloud-tags a.tags-rank5 {
    37.     font-size: 11px;
    38. }
    39. dl.tagcloud dd.tagcloud-tags a.tags-rank6 {
    40.     font-size: 10px;
    41.     color: #CCC;
    42. }
    43. dl.tagcloud dt.tagcloud-footer {
    44. }
    45. /******************************************/
    46. /** ▲タグクラウド関連▲ **/
    47. /******************************************/

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード