法則73 美しいタグクラウドを作成する

タグのレベルを設定するテンプレートソース

<ul>
<MTTags>
<li class="tagLebel<$MTTagRank max="6"$>">
<a href="<$MTTagSearchLink$>" title="<$MTTagName$>">
<$MTTagName$></a></li>
</MTTags>
</ul>

文字のサイズに強弱を付けるCSSソース

ul li.tagLebel1 {
    font-size: 200%;
}
ul li.tagLebel2 {
    font-size: 180%;
}
ul li.tagLebel3 {
    font-size: 160%;
}
ul li.tagLebel4 {
    font-size: 140%;
}
ul li.tagLebel5 {
    font-size: 120%;
}
ul li.tagLebel6 {
    font-size: 100%;
}

文字のサイズと色の明度に強弱を付けるCSSソース

ul li.tagLebel1 {
    font-size: 200%;
    color: #0050BF;
}
ul li.tagLebel2 {
    font-size: 180%;
    color: #1961C5;
}
ul li.tagLebel3 {
    font-size: 160%;
    color: #3373CC;
}
ul li.tagLebel4 {
    font-size: 140%;
    color: #4C84D2;
}
ul li.tagLebel5 {
    font-size: 120%;
    color: #6696D9;
}
ul li.tagLebel6 {
    font-size: 100%;
    color: #7FA7DF;
}

文字のサイズと色の彩度に強弱を付けるCSSソース

ul li.tagLebel1 {
    font-size: 200%;
    color: #0050BF;
}
ul li.tagLebel2 {
    font-size: 180%;
    color: #2666BF;
}
ul li.tagLebel3 {
    font-size: 160%;
    color: #4C7CBF;
}
ul li.tagLebel4 {
    font-size: 140%;
    color: #7393BF;
}
ul li.tagLebel5 {
    font-size: 120%;
    color: #99A9BF;
}
ul li.tagLebel6 {
    font-size: 100%;
    color: #BFBFBF;
}

• 第4章 Webサイトの価値を高めるデザインの法則