「<a href=”http://wondada.cocolog-nifty.com/hibi_saisai/”target=”_blank”>日々歳々</a>」のカテゴリーをなんとかしたくて、カテゴリー・クラウドに挑戦してみました。参考にしたページはこちら。

<A href=”http://support.typepad.jp/cgi-bin/typepad_jp.cfg/php/enduser/std_adp.php?p_faqid=525″target=”_blank”>TypePad  サポート</a>

■サイドバーテンプレートに以下のタグをはりつける。場所はカテゴリー・クラウドを表示したい場所。


<div class="box1"><pre><code><div class="module-category-cloud module">

    <h2 class="module-header"><$MTTrans phrase="Categories"$></h2>

    <div class="module-content">

        <ul class="module-list">

            <MTCategoryCloud>

                <MTBlogIfArchives archive_type="Category">

                    <li class="module-list-item cloud-weight-<$MTCategoryCloudWeight$>"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a></li>

                <MTElse>

                    <li class="module-list-item cloud-weight-<$MTCategoryCloudWeight$>"><$MTCategoryLabel$></li>

                </MTElse>

                </MTBlogIfArchives>

            </MTCategoryCloud>

        </ul>

    </div>

</div>

</code><pre></div>

■styles.cssテンプレートにカテゴリー・クラウドのデザインを書き込む。うちは、ちょこっと数字を変えてみました。

.module-category-cloud .module-list
{
margin-right: 0;
margin-left: 0;
}

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

.module-category-cloud .cloud-weight-1 { font-size: 9.5px; }
.module-category-cloud .cloud-weight-2 { font-size: 10px; }
.module-category-cloud .cloud-weight-3 { font-size: 12.5px; }
.module-category-cloud .cloud-weight-4 { font-size: 14px; }
.module-category-cloud .cloud-weight-5 { font-size: 14.5px; }
.module-category-cloud .cloud-weight-6 { font-size: 16px; }
.module-category-cloud .cloud-weight-7 { font-size: 16.5px; }
.module-category-cloud .cloud-weight-8 { font-size: 18px; }
.module-category-cloud .cloud-weight-9 { font-size: 22px; }
.module-category-cloud .cloud-weight-10 { font-size: 24px; }

■表示されたカテゴリー・クラウドはこんな感じ。CSSのデザインをなんとかすれば、もう少しかっこよくなりそうな気がするんだけど… そこは放置しています(汗)

Photo_2