Customize in Ninja Blog

１．管理画面の『プラグインの設定』→『プラグインの追加』でカテゴリのプラグインを新たに作成。
ここでは、一応名前を「カテゴリタグクラウド」で保存。

２．「カテゴリタグクラウド」の『HTMLの編集』をクリック。

３．ソースが出てくるのでそれを▼のものに置き換える。

<script type="text/javascript"><!--
var density = 1;
var seed = 4;
var highest_count = 0;
url_array = new Array();
name_array = new Array();
count_array = new Array();

<!--plugin_category-->
url_array[url_array.length] = "<!--$plugin_category_link-->";
name_array[name_array.length] = "<!--$plugin_category_title-->";
count_array[count_array.length] = <!--$plugin_category_num-->;
<!--/plugin_category-->


for (var i = 0; i < count_array.length; i++)
{
  if (count_array[i] > highest_count) {
    highest_count = count_array[i];
  }
}

var dif = Math.floor((highest_count - density) / seed);

for (var i = 0; i < name_array.length; i++)
{
  var size_string = "70%";
  var font_size = 1;
  if (count_array[i] > highest_count - dif) {
    size_string = "190%";
    font_size = 5;
  }
  else if (count_array[i] > dif * 2) {
    size_string = "160%";
    font_size = 4;
  }
  else if (count_array[i] > dif) {
    size_string = "130%";
    font_size = 3;
  }
  else if (count_array[i] > dif / 2) {
    size_string = "100%";
    font_size = 2;
  }
  if (count_array[i] >= density) document.write('<a href="', url_array[i], '" title="', count_array[i] ,'件のエントリー"><span class="font_', font_size, '" style="font-size: ', size_string ,'">', name_array[i], '</span></a> ');
}
//-->
</script>

<noscript>
<!--plugin_category-->
<div class="plugin_data">
<a href="<!--$plugin_category_link-->">
<!--$plugin_category_title-->
(<!--$plugin_category_num-->)
</a>
</div>
<!--/plugin_category-->
</noscript>

４．『変更』をクリックして完成です。

javascriptでこのタグクラウドはできているのでjavascriptをOFFにしているとタグクラウドにはなりません。
タグクラウドにならなくても通常のカテゴリのリストには見えます。

このブログでやってみた状態▼

う～ん。ツリー化したときに[大カテゴリ]小カテゴリのようにしているせいかいまいちですね(￣▽￣;)
忍者ブログもタグに対応してくれれば、これ要らないので、みんなで要望のほうがいいかも（笑

「空のBox」を追加する方法。

スクリプトの設定

<script type="text/javascript" language="JavaScript">
<!--
function oneOpenPlugin(id){
    if(document.getElementById){
        if(document.getElementById(id).style.display == "block"){
            document.getElementById(id).style.display = "none";
        }
        else{
        <!--plugin1-->
        document.getElementById("open<!--$plugin_key-->").style.display = "none";
        <!--/plugin1-->
        document.getElementById("closeBox").style.display = "none";
        document.getElementById(id).style.display = "block";
        }
    }
}
//-->
</script>

HTMLの設定

<!--plugin1-->
<div class="****">
<div class="**** <!--$plugin_title_align-->">
<a href="JavaScript:oneOpenPlugin('open<!--$plugin_key-->')"><!--$plugin_title--></a>
</div>
<div id="open<!--$plugin_key-->" style="display:none;" >
<div class="**** <!--$plugin_explanation_align-->">
<!--$plugin_header_explanation-->
</div>
<div class="**** <!--$plugin_contents_align-->">
<!--$plugin_data-->
</div>
<div class="**** <!--$plugin_explanation_align-->">
<!--$plugin_footer_explanation-->
</div>
<a href="JavaScript:oneOpenPlugin('closeBox')">×</a>
</div>
</div>
<!--/plugin1-->
<div style="display: none;" id="closeBox"></div>

<a href="JavaScript:oneOpenPlugin('closeBox')"><img src="画像のURL"></a>

<!--plugin1-->
<div class="PluginInnerBlock">
    <div class="PluginTitle <!--$plugin_title_align-->">
         <a href="JavaScript:oneOpenPlugin('open<!--$plugin_key-->')"><!--$plugin_title--></a>
    </div>

    <div id="open<!--$plugin_key-->" style="display:none;">
        <div class="PluginExplanation <!--$plugin_explanation_align-->">
            <!--$plugin_header_explanation-->
        </div>
        <div class="PluginContents <!--$plugin_contents_align-->">
            <!--$plugin_data-->
        </div>
        <div class="PluginExplanation <!--$plugin_explanation_align-->">
            <!--$plugin_footer_explanation-->
        </div>
<a href="JavaScript:oneOpenPlugin('closeBox')">×</a>
    </div>
</div>
<!--/plugin1-->
<div style="display: none;" id="closeBox"></div>

スクリプト

<script type="text/javascript" language="JavaScript">
<!--
function oneOpenPlugin(id){
    if(document.getElementById){
        if(document.getElementById(id).style.display == "block"){
            document.getElementById(id).style.display = "none";
        }
        else{
        <!--plugin1-->
        document.getElementById("open<!--$plugin_key-->").style.display = "none";
        <!--/plugin1-->
        document.getElementById(id).style.display = "block";
        }
    }
}
//-->
</script>

HTMLの編集

<a href="JavaScript:oneOpenPlugin('open<!--$plugin_key-->')"><!--$plugin_title--></a>

<div id="open<!--$plugin_key-->" style="display:none;" onclick="oneOpenPlugin('open<!--$plugin_key-->')">
<div class="**** <!--$plugin_explanation_align-->">
<!--$plugin_header_explanation-->
</div>
<div class="**** <!--$plugin_contents_align-->">
<!--$plugin_data-->
</div>
<div class="**** <!--$plugin_explanation_align-->">
<!--$plugin_footer_explanation-->
</div>
</div>

<!--plugin1-->
<div class="****">
<div class="**** <!--$plugin_title_align-->">
<a href="JavaScript:oneOpenPlugin('open<!--$plugin_key-->')"><!--$plugin_title--></a>
</div>
<div id="open<!--$plugin_key-->" style="display:none;" onclick="oneOpenPlugin('open<!--$plugin_key-->')">
<div class="**** <!--$plugin_explanation_align-->">
<!--$plugin_header_explanation-->
</div>
<div class="**** <!--$plugin_contents_align-->">
<!--$plugin_data-->
</div>
<div class="**** <!--$plugin_explanation_align-->">
<!--$plugin_footer_explanation-->
</div>
</div>
</div>
<!--/plugin1-->

スクリプト

<script type="text/javascript" language="JavaScript">
<!--
function openPlugin(id){
if(document.getElementById){
if(document.getElementById(id).style.display == "none")
document.getElementById(id).style.display = "block";
else
document.getElementById(id).style.display = "none";}}
//-->
</script>

HTMLの編集

<a href="JavaScript:openPlugin('open<!--$plugin_no-->')"><!--$plugin_title--></a>

<div id="open<!--$plugin_no-->" style="display:none;">
<div class="**** <!--$plugin_explanation_align-->">
<!--$plugin_header_explanation-->
</div>
<div class="**** <!--$plugin_contents_align-->">
<!--$plugin_data-->
</div>
<div class="**** <!--$plugin_explanation_align-->">
<!--$plugin_footer_explanation-->
</div>
</div>

<a href="JavaScript:openPlugin('open<!--$plugin_no-->')" title="閉じる">閉じる</a>

<!--plugin1-->
<div class="****">
<div class="**** <!--$plugin_title_align-->">
<a href="JavaScript:openPlugin('open<!--$plugin_no-->')"><!--$plugin_title--></a>
</div>
<div id="open<!--$plugin_no-->" style="display:none;">
<div class="**** <!--$plugin_explanation_align-->">
<!--$plugin_header_explanation-->
</div>
<div class="**** <!--$plugin_contents_align-->">
<!--$plugin_data-->
</div>
<div class="**** <!--$plugin_explanation_align-->">
<!--$plugin_footer_explanation-->
</div>
<a href="JavaScript:openPlugin('open<!--$plugin_no-->')" title="閉じる">閉じる</a>
</div>
</div>
<!--/plugin1-->

<!--plugin1-->
<div class="PluginInnerBlock">
<div class="PluginTitle <!--$plugin_title_align-->">
<a href="JavaScript:openPlugin('open<!--$plugin_no-->')"><!--$plugin_title--></a> </div>
<div id="open<!--$plugin_no-->" style="display:none;">
<div class="PluginExplanation <!--$plugin_explanation_align-->">
<!--$plugin_header_explanation-->
</div>
<div class="PluginContents <!--$plugin_contents_align-->">
<!--$plugin_data-->
</div>
<div class="PluginExplanation <!--$plugin_explanation_align-->">
<!--$plugin_footer_explanation-->
</div>
<a href="JavaScript:openPlugin('open<!--$plugin_no-->')" title="閉じる">閉じる</a>
</div>
</div>
<!--/plugin1-->

<!--plugin1-->
<div class="plugin">
<div class="plugin_title"
style="text-align:<!--$plugin_title_align-->;"> <a
href="JavaScript:openPlugin('open<!--$plugin_no-->')"><!--$plugin_title--></a> </div><!--△plugin_title-->
<div id="open<!--$plugin_no-->" style="display:none;">
<div class="plugin_description" style="text-align:<!--$plugin_explanation_align-->;">
<!--$plugin_header_explanation-->
</div><!--△plugin_description-->
<div class="plugin_text" style="text-align:<!--$plugin_contents_align-->;">
<!--$plugin_data-->
</div><!--△plugin_text-->
<div class="plugin_description" style="text-align:<!--$plugin_explanation_align-->;">
<!--$plugin_footer_explanation-->
</div><!--△plugin_description-->
<a href="JavaScript:openPlugin('open<!--$plugin_no-->')" title="閉じる">閉じる</a>
</div><!--△open-->
</div><!--△plugin-->
<!--/plugin1-->

<div style="text-align:center;margin:0px auto;width:90%;">
<!-- 詳細記事ページでの最新記事のタイトルのリスト化　ここから▼ -->
<!--if_entry-->
<ul style="text-align:left;margin:0px auto;">
<strong>最新記事</strong>のタイトル一覧

<!--plugin_entry-->
<li><a href="<!--$plugin_entry_link-->"><!--$plugin_entry_title--></a>(<!--$plugin_entry_mon-->/<!--$plugin_entry_day-->)</li>
<!--/plugin_entry-->
</ul>
<!--/if_entry-->
<!-- 詳細記事ページでの最新記事のタイトルのリスト化　ここまで▲ -->

<!-- 詳細記事以外のページでの記事タイトルのリスト化　ここから▼ -->
<!--if_not_entry-->
<ul style="text-align:left;margin:0px auto;">
<!--if_not_search-->
<!--if_not_page--><strong><!--$g_page_title--></strong>の記事タイトル一覧<!--/if_not_page-->
<!--if_page-->このページにある記事のタイトル一覧<!--/if_page-->
<!--/if_not_search-->
<!--if_search--><strong><!--$g_search_comment--></strong>でのヒット記事一覧<!--/if_search-->

<!--entry-->
<li>(<!--$entry_mon-->/<!--$entry_day-->)<a href="<!--$entry_link-->" title="<!--$entry_title-->"><!--$entry_title--></a></li>
<!--/entry-->
</ul>
<!--/if_not_entry-->
<!-- 詳細記事以外のページでの記事タイトルのリスト化　ここまで▲ -->

<!-- 前後のページへのナビ　ここから▼ -->
<table style="width:80%;margin:10px auto;">
<tr>
<td style="width:50px;">
<!--if_prev_page-->
<a href="<!--$pagelink_prev_link-->" title="前へ">←</a>
<!--/if_prev_page-->
</td>
<td style="text-align:center;font-size:10px;">
*<!--pagelink_10--><!--$pagelink_10_link-->*<!--/pagelink_10-->
</td>
<td style="width:50px;text-align:right;">
<!--if_next_page-->
<a href="<!--$pagelink_next_link-->" title="次へ">→</a>
<!--/if_next_page-->
</td>
</tr>
</table>
<!-- 前後のページへのナビ　ここまで▲ -->
</div>

<script type="text/javascript">
<!--
size = 1;
sizeHeight = new Array("100%","200px");
function scrollbox(c) {
boxID = document.getElementById('scrollbarbox'+c)
size = ( size == 1) ? 0 : 1;
boxID.style.height = sizeHeight[size];
}
//-->
</script>

<div id="scrollbarbox1" style="height: 200px; overflow:auto;">
スクロールバーが表示される中身の部分
</div>

<a href="#scrollbarbox1" onclick="scrollbox(1)" title="スクロールバーの表示・非表示の切り替えをします">Scrollbar ONorOFF</a>