カテゴリークラウド⇔カテゴリーリスト切替

右サイドバーのカテゴリーリストは、エントリー数が多いとフォントを強調するようにしている。

これを、切替ボタンで、クラウドに変換できるようにしてみた。

コードをメモしておく。Movabletypeを使っている方はお試しを。

別に難しいことま全くしていない。
phpで無理やり書き換えているだけ。

1).htaccsessの編集

phpを利用するため、ページをphp化しておく必要がある。
htmlのままでphpを利用したい方は、.htaccsessに下記の記述を追加する。

AddType application/x-httpd-php .php .html

2)メインコードをコピペ
サイドバー部に、下記コードをコピーする

+++

<?php if ( $_POST['changeCloudFormat'] == 'c' ) { ?>

<MTCategories>
<MTIfNonZero tag="MTCategoryCount">
<a class="tag_<$MTCatLevel restrict="1" $>" href="<$MTCategoryArchiveLink$>"><MTCategoryLabel pmhc="" ></a><font color="#777777">(<$MTCategoryCount$>)</font>　
<MTElse>
<font color="#777777"><MTCategoryLabel pmhc="" >(<$MTCategoryCount$>)</font>　
</MTElse>
</MTIfNonZero>
</MTCategories>

<?php } elseif( $_POST['changeCloudFormat'] == '' ) { ?>

<MTTopLevelCategories>
<li style="list-style: none;"><img alt="folder_s.jpg" src="http://www.web2-labo.com/images/folder_s.jpg" />
<MTIfNonZero tag="MTCategoryCount">
<a class="tag_<$MTCatLevel restrict="1" $>" href="<$MTCategoryArchiveLink$>"><MTCategoryLabel pmhc="" ></a><font color="#777777">(<$MTCategoryCount$>)</font></li>
<MTElse>
<font color="#777777"><MTCategoryLabel pmhc="" >(<$MTCategoryCount$>)</font></li>
</MTElse>
</MTIfNonZero>

<MTHasSubCategories>
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li style="list-style: none;">└<a class="tag_<$MTCatLevel restrict="1" $>" href="<$MTCategoryArchiveLink$>"><MTCategoryLabel pmhc="" ></a><font color="#777777">(<$MTCategoryCount$>)</font></li>
<MTElse>
<li style="list-style: none;">└<font color="#777777"><MTCategoryLabel pmhc="" >(<$MTCategoryCount$>)</font></li></MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</MTHasSubCategories>
</MTTopLevelCategories>

<?php }

if ( $_POST['changeCloudFormat'] == "" ) {
$changeCloudFormat = 'c';
$format = "カテゴリクラウドに切替";
} elseif( $_POST['changeCloudFormat'] == "c" ) {
$changeCloudFormat = '';
$format = "カテゴリリストに切替";
}

?>
<form method="POST" action="<?php echo $_SERVER[REQUEST_URI]; ?>">
<input type="hidden" name="changeCloudFormat" value="<?php echo $changeCloudFormat; ?>" />
<input type="submit" value="<?php echo $format; ?>" />
</form>

+++

3)スタイルシートの編集

下記をスタイルシートに追加する。

+++

/* タグ・ポイント */
body,td,th{
font:85% verdana,arial,sans-serif;
}

/* Tag cloud */
ul li.tag {
margin-right: 5px;
display: inline;
list-style: none;
}

li.tag a.level1 {
font-size: 175%;
color: #000000;
font-weight:bold
}

li.tag a.level2 {
font-size: 160%;
color: #000000;
}

li.tag a.level3 {
font-size: 145%;
color: #555555;
}

li.tag a.level4 {
font-size: 135%;
color: #555555;
}

li.tag a.level5 {
font-size: 120%;
color: #555555;
}

li.tag a.level6 {
font-size: 110%;
color: #aaaaaa;
}

.tag_1 {
text-decoration:none;
font-size: 110%;
color: #aaaaaa;
}

.tag_2 {
text-decoration:none;
font-size: 110%;
color: #555555;

}

.tag_3 {
text-decoration:none;
font-size: 135%;
color: #555555;

}

.tag_4 {
text-decoration:none;
font-size: 145%;
color: #555555;
}

.tag_5 {
text-decoration:none;
font-size: 160%;
color: #000000;

}

.tag_6 {
text-decoration:none;
font-size: 175%;
color: #000000;
font-weight:bold

}

+++

書き手のプロフィールはこちら ⇒ かん吉プロフィール

当ブログの記事に共感していただけたら、また読みに来ていただけると嬉しいです。読んでくれる方の数が多くなると、更新するヤル気に繋がります（＾＾）

ツイッター、Google+、Google+ページ、ミクシイページでも、更新履歴を流してます。



Share on Tumblr



  

当ブログの更新をメールで受け取れます

配信： FeedBurner

※読者さんのお声をお聞かせください