ブログ勉強中のコダマです。

eCREOLABのサイトを普通のwebサイトからMovableTypeに移植しているんですが、MovableType以前に、スタイルシートの初心者なので覚える事がいっぱいあって大変です。
で、どうせ勉強するなら、という事でサイトの更新をしつつ、進み具合を報告していきたいと思います。

今日はタグクラウドを追加してみました。
Flickrやニコニコ動画なんかで使われているアレです。

■MTでのタグクラウドの作り方
MovableTypeはエントリー・タグのランキングを管理するMTTagsがあるので、それを使うと簡単に追加でます。

■タグクラウドのソース
<div class="module-tagcloud module">
    <h2 class="module-header">人気タグ</h2>
    <div class="module-content">
        <ul class="module-list">
            <MTTags>
                <li class="module-list-item taglevel<$MTTagRank$>">
                <a href="<$MTTagSearchLink$>"><$MTTagName$>  </a>
                </li>
            </MTTags>
        </ul>
    </div>
</div>

■スタイルシート
.module-tagcloud .module-content {text-align: left;}
.module-tagcloud .module-content .module-list { list-style: none;}
.module-tagcloud .module-content .module-list .module-list-item { display: inline; }
.module-tagcloud .module-content .module-list li.taglevel1 { font-size: 21px; }
.module-tagcloud .module-content .module-list li.taglevel2 { font-size: 18px; }
.module-tagcloud .module-content .module-list li.taglevel3 { font-size: 15px; }
.module-tagcloud .module-content .module-list li.taglevel4 { font-size: 13px; }
.module-tagcloud .module-content .module-list li.taglevel5 { font-size: 11px; }
.module-tagcloud .module-content .module-list li.taglevel6 { font-size: 10px; }

初期値では6段階のランクを持てるようになっています。
ランクの数は MTTagRank max="10" とすると、10段階に変更できるようです。