スクリプト
まずはJavascriptの設定。
テンプレートの編集でHTMLの<body>の直後に以下のスクリプトを設置してください。
<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の編集
それからテンプレートのプラグインを表示する部分を編集します。
説明ではプラグインカテゴリー１を開閉することにしますがここから先はちょっとややこしいかもしれないです。
忍者の新規テンプレートもしくはそれに対応しているテンプレート、およびわたしが作成したテンプレートに関しては完成したもののソースを一番下においておきますのでコピペでお持ち帰りください。
なお、そのほかの方はスタイルシートの指定が異なるので以下の説明文に従って変更してみてください。
まず、テンプレートの中から
<!--plugin1-->～<!--/plugin1-->で囲まれた部分を探します。
テンプレートごとに位置は異なるとは思いますがプラグインに対応している限りどこかにあります。
さらに
<!--plugin1-->～<!--/plugin1-->で囲まれた部分の中から
<!--$plugin_title-->という独自タグを探します。
それをこのように書き換えてください。
<a href="JavaScript:openPlugin('open<!--$plugin_no-->')"><!--$plugin_title--></a>
ここが開閉スイッチになります。
<!--$plugin_title-->が見つかったらその下に
<!--$plugin_header_explanation-->、
<!--$plugin_data-->、
<!--$plugin_footer_explanation-->という独自タグがそれぞれ<div>タグか何かで囲まれているはずです。
そうしたらそのすべてを囲うようにさらに<div>～</div>で囲います。 その際にidとstyleを指定します。
指定してみるとこんな風になります。ちなみにclass指定に****が入っているのはテンプレごとに指定は違うからです。すべてに同じ指定が入るという意味ではありません。
<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>
ピンク色の部分が新しく囲った部分です。
style="display:none;"と記入した部分は最初の状態を閉じた状態にするという指定です。
ここを削ると初期状態が開いた状態になります。
｢閉じる｣ボタンを設置するには、
ピンクで囲まれた中に
<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-->
つたない説明ですがこれで開閉にするのは完了です。
おそらくこれが一番簡単なものかと思います(^^;)
次はこれの応用編をUPします。
▼忍者ブログの通常テンプレート用プラグインカテゴリー１のHTMLソース <!--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-->
▼配布テンプレ用プラグイン１のHTMLソース
注：私の作ったテンプレートといえど、すべてがこのような指定をしているわけではありません。カスタマイズする際はあらかじめ元のテンプレートを保存しておくことをお勧めします。
<!--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-->
です。
