右サイドバーのカテゴリーリストは、エントリー数が多いとフォントを強調するようにしている。
これを、切替ボタンで、クラウドに変換できるようにしてみた。
コードをメモしておく。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
}
+++
コメント