タグクラウドにスクロールバーを付加してみる

BlogPeople のリンクリストにスクロールバーをつける（小粋空間）

今回もまた小粋空間さんの手法を利用させていただく。

本当はBlogPeopleのリンクリストを使いたかったんだけど、取得したコードを実行するとJavaScriptでエラーが発生してしまうので、断念。その代り、やたらと長くなったタグクラウドにスクロールバーを付けてみた。

まずはウィジェットを以下のように修正。

<div class="widget-tag-cloud widget">
    <h3 class="widget-header">タグクラウド</h3>
    <div class="widget-content">
        <div class="tagcloud">
            <ul class="widget-list">
    <mt:Tags limit="10000" sort_by="rank">
            <li class="rank-<$mt:TagRank max="20"$> widget-list-item"><a href="<$mt:TagSearchLink$>"><$mt:TagName$></a></li>
    </mt:Tags>
            </ul>
        </div>
    </div>
</div>

太文字にしたのが今回の追加分。

これだけではスクロールバーが表示されないので、スタイルシートでタグクラウドを表示する高さとかも一緒にしていする。

.tagcloud{
    height: 300px;
    overflow: auto;
}

 これで、だらだら長く表示していたタグクラウドがすっきり表示されるようになった。