MT4のタグクラウドの表示について。

質問

MT4.1を使っています。
スタイルを変更したらタグクラウドのスタイルが変わってしまい、元に戻そうとしたのですが、うまくいきません。

スタイルシート(ベーステーマ)に以下の記述をしています。
.widget-cloud .widget-list {
margin-right: 0;
margin-left: 0;
}

.widget-cloud .widget-list-item {
display: inline;
margin: 0 5px 0 0;
padding: 0;
line-height: 1.2;
background: none;
}

.module-tagcloud .module-content a {text-decoration: none; }
.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: 20px; }
.module-tagcloud .module-content .module-list li.taglevel2{ font-size: 18px; }
.module-tagcloud .module-content .module-list li.taglevel3{ font-size: 16px; }
.module-tagcloud .module-content .module-list li.taglevel4{ font-size: 14px; }
.module-tagcloud .module-content .module-list li.taglevel5{ font-size: 12px; }
.module-tagcloud .module-content .module-list li.taglevel6{ font-size: 10px; }

ウィジェットセットでタグクラウドを表示しています。
以下の記述をしています。
<MTIf name="main_index">
<div class="widget-cloud widget">
<h3 class="widget-header">タグクラウド</h3>
<div class="widget-content">
<ul class="widget-list">
<MTTags limit="100">
<li class="rank-<$MTTagRank max="100"$> widget-list-item"><a href="<$MTTagSearchLink$>"><$MTTagName$></a></li>
</MTTags>
</ul>
</div>
</div>
</MTIf>

この状態だとタグが箇条書きになっているだけです。
上手くスタイルを反映させるにはどうしたら良いのでしょうか？
また、下記のようなタグクラウドを反映させるにはどうしたらいいのか理解できなかったので、お勧めのページなどありましたら是非ご教授ください。よろしくお願いします。
http://3ping.org/2007/10/20/1428

回答No.1

Muller3

CSSのセレクタがHTMLと合ってないので反映しないのです。
（「module-tagcloud」なんていうclassはHTMLのどこにもありませんよね？）
CSSの知識がないと、他のものを当てはめるといってもちょっと難しいかもしれません。

とりあえずhttp://3ping.org/2007/10/20/1428の指定を4.1のタグクラウドのHTMLに合わせると

ul.tagCloud　→　ul.widget-list
ul.tagCloud li　→　ul.widget-list li
ul.tagCloud li a　→　ul.widget-list li a
ul.tagCloud li.level1 a →　ul.widget-list .rank-1 a
ul.tagCloud li.level2 a →　ul.widget-list .rank-2 a
（中略）
ul.tagCloud li a:hover　→　ul.widget-list li a:hover

に置き換える必要があるかと。
そしてデフォルトのタグクラウドに関するスタイルは消しときます。
本当ならスタイルシートでより後ろに書いた物は前のものを上書きするのですが、セレクタの組み方が違うために上書きされない部分が出てくるかもわからないので。
とりあえず
.widget-cloud .widget-list-item {
display: inline;
margin: 0 5px 0 0;
padding: 0;
line-height: 1.2;
background: none;
}
これは消しておきます。

お礼

Widgetの方のテンプレートを
<div class="widget-tag-cloud widget">
<h3 class="widget-header">タグクラウド</h3>
<div class="widget-content">
<ul class="widget-list">
<mt:Tags limit="100" sort_by="rank">
<li class="rank-<$mt:TagRank max="10"$> widget-list-item"><a href="<$mt:TagSearchLink$>"><$mt:TagName$></a></li>
</mt:Tags>
</ul>
</div>
</div>
の様に変更したところ、表示は元に戻りました。
色の変更などもしたいと思い色々試してみましたが、出来ませんでした。

リンク先のタグクラウドも試してみたのですがまだまだ勉強不足なので、もう少し勉強してからチャレンジしてみようと思っています。
ありがとうございました。