スポンサーサイト 
-- -- --
-- --:--:--

スポンサー広告  Comment -  Trackback -  edit.

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

テンプレート講座第十回 
2006 06 16
Fri 02:09:25

テンプレート講座  Comment 0  Trackback 0  edit.

今回はちょっと質問も有りましたので、開閉スクリプトを使ったプラグインの開閉をしてみたいと思います。

使用するスクリプトは、当方で使っている一番簡単なスクリプトです。
共有登録しているodorikoを例に解説してみましょう。
スクリプトは以下のものを使用します。(ほとんどのテンプレートに実装されていますが、無い場合は以下を追加して下さい。)

<script type="text/javascript">
<!--
function dd(id){
if(document.all)OBJ = document.all(id).style; else if(document.getElementById)OBJ = document.getElementById(id).style; if(OBJ) OBJ.display=='none'?OBJ.display='':OBJ.display='none';
}
//--></script>


続いては、プラグインの設定に移る訳ですが、プラグインの開閉は、個別には出来ません。
カテゴリー別の開閉という事になります。
これは変数が個別ではなく、カテゴリーで分けられている為です。
まず基本となるプラグイン変数を使った設定を見てみましょう。

<!-- プラグインカテゴリー1の設定 -->
<!--plugin_first-->
<div class="menu_title">▽<%plugin_first_title></div>
<ul class="menu_ul" style="text-align:<%plugin_first_align>">
<li><%plugin_first_content></li>
</ul>
<!--/plugin_first-->

<!-- プラグインカテゴリー2の設定 -->
<!--plugin_second-->
<div class="menu_title">▽<%plugin_second_title></div>
<ul class="menu_ul" style="text-align:<%plugin_second_align>">
<li><%plugin_second_content></li>
</ul>
<!--/plugin_second-->

<!-- プラグインカテゴリー3の設定 -->
<!--plugin_third-->
<div class="menu_title">▽<%plugin_third_title></div>
<ul class="menu_ul" style="text-align:<%plugin_third_align>">
<li><%plugin_third_content></li>
</ul>
<!--/plugin_third-->


大体、テンプレートで実装されているプラグインの設定は同じ様な構成になっています。
(多少のタイトルデザインの違いは有りますが、基本は同じです。)
ここでスクリプトを使う為に、設定する訳ですが、通常はタイトルをクリックする事で開閉するようにしています。

<div id="menu_open"><a href="javascript:void(0)" onclick="dd('menu_column')">▽Plugin Menu.</a></div>
<div id="menu_column" style="display: none;">

この部分が開閉したいプラグインパーツなどが入ります。

</div>


上の設定は、プラグインメニュー全てを開閉する設定にしていますが、基本は同じで、タイトル部分のonclick="dd('menu_column')に内容部分のブロックタグにID名を付けその名前を(’プラグインブロックID名’)と言うように設定する事で開閉させている訳です。

更に、<div id="menu_column" style="display: none;">のブロックタグにスタイル属性を加えています。

style="display: none;


display: noneとする事で、初期設定は閉じた状態です。
これをstyle="display: ;と言うようにnoneを削除する事で、初期設定は開いた状態になります。

これらを基本として、実際にプラグインカテゴリーを設定してみましょう。

<!-- プラグインカテゴリー1の設定 -->
<!--plugin_first-->
<div class="menu_title">▽<%plugin_first_title></div>
<ul class="menu_ul" style="text-align:<%plugin_first_align>">
<li><%plugin_first_content></li>
</ul>
<!--/plugin_first-->


上記のタグは、プラグインカテゴリー1のスクリプト設定追加前の状態です。

<!-- プラグインカテゴリー1の設定 -->
<!--plugin_first-->
<div class="menu_title"><a href="javascript:void(0)" onclick="dd('<%plugin_first_title>')">▽<%plugin_first_title></a></div>
<ul id="<%plugin_first_title>" class="menu_ul" style="display: none;text-align:<%plugin_first_align>">
<li><%plugin_first_content></li>
</ul>
<!--/plugin_first-->


ここの中で赤文字で書かれた部分がスクリプト用に追加された部分です。
タイトル部分に、スクリプトを読み込むリンクタグを追加しているのが判りますね。
ここでonclick="dd('')"の部分に注意して下さい。
始めに説明した部分では、menu_columnの様に内容部分を囲っているタグに付けたID名が書かれていますがプラグインではカテゴリーにいくつかのパーツを追加する為、パーツの名前の変数を使用しています。
<%plugin_first_title>と言う変数は、パーツ毎のタイトルを読み込むFC2テンプレートの変数です。
ここではこの変数を使ってパーツ毎に開閉スクリプトを使用出来るようにしています。
(同じ名前のタイトルを付けるとエラーとなりますので注意して下さい。)

次にパーツの内容部分を囲っている<ul>タグにもID名が追加されています。
ここでもタイトル部分で使った、変数を使用しています。(onclick=の名前とID名は同じ名前でなければ動作しない事は理解してますよね?)

最後に、<ul>タグにスタイル属性を追加しています。(style="display: none;を追加しています)
このスタイル属性は、《非表示》と言うスタイル属性です。
ですから、初期状態で《非表示》にする場合は、style=display: none;
初期状態で《表示》にしたい場合は、style="display: ;
と言うように、noneを削除する事で《表示》させる事が出来る訳です。
使用している開閉スクリプトは、この属性を、display: none;で有った場合はdisplay: ;に変更し、display: ;で有った場合は、display: none;に変更する作りになっています。

ここまで理解出来れば、他のプラグインカテゴリー2やカテゴリー3に付いても同じように設定出来ますね。

<!-- プラグインカテゴリー1の設定 -->
<!--plugin_first-->
<div class="menu_title"><a href="javascript:void(0)" onclick="dd('<%plugin_first_title>')">▽<%plugin_first_title></a></div>
<ul id="<%plugin_first_title>" class="menu_ul" style="display: none;text-align:<%plugin_first_align>">
<li><%plugin_first_content></li>
</ul>
<!--/plugin_first-->

<!-- プラグインカテゴリー2の設定 -->
<!--plugin_second-->
<div class="menu_title"><a href="javascript:void(0)" onclick="dd('<%plugin_second_title>')">▽<%plugin_second_title></a></div>
<ul id="<%plugin_second_title>" class="menu_ul" style="display: none;text-align:<%plugin_second_align>">
<li><%plugin_second_content></li>
</ul>
<!--/plugin_second-->

<!-- プラグインカテゴリー3の設定 -->
<!--plugin_third-->
<div class="menu_title"><a href="javascript:void(0)" onclick="dd('<%plugin_third_title>')">▽<%plugin_third_title></a></div>
<ul id="<%plugin_third_title>" class="menu_ul" style="display: none;text-align:<%plugin_third_align>">
<li><%plugin_third_content></li>
</ul>
<!--/plugin_third-->



後は、カテゴリー毎に初期設定をどうするか考えてカスタマイズすれば良い訳です。
(ちなみに上のHTMLは共有テンプレートに登録しているodorikoを使っています。)

それと、odorikoでは、プラグインカテゴリー全てを開閉させて居ますが、これも同じようにカスタマイズすれば、メインのプラグイン全てを開閉させ、個別のカテゴリーでも開閉させる事が出来るようになります。
一応参考までに私なりにカスタマイズしたHTMLを掲載しておきますので参考にしてみて下さい。

<div id="menu">

<div id="menu_open"><a href="javascript:void(0)" onclick="dd('menu_column')">▽Plugin Menu.</a></div>
<div id="menu_column" style="display: ;">
<!--plugin-->

<!-- プラグインカテゴリー1の設定 -->
<!--plugin_first-->
<div class="menu_title"><a href="javascript:void(0)" onclick="dd('<%plugin_first_title>')">▽<%plugin_first_title></a></div>
<ul id="<%plugin_first_title>" class="menu_ul" style="display: none;text-align:<%plugin_first_align>">
<li><%plugin_first_content></li>
</ul>
<!--/plugin_first-->

<!-- プラグインカテゴリー2の設定 -->
<!--plugin_second-->
<div class="menu_title"><a href="javascript:void(0)" onclick="dd('<%plugin_second_title>')">▽<%plugin_second_title></a></div>
<ul id="<%plugin_second_title>" class="menu_ul" style="display: none;text-align:<%plugin_second_align>">
<li><%plugin_second_content></li>
</ul>
<!--/plugin_second-->

<!-- プラグインカテゴリー3の設定 -->
<!--plugin_third-->
<div class="menu_title"><a href="javascript:void(0)" onclick="dd('<%plugin_third_title>')">▽<%plugin_third_title></a></div>
<ul id="<%plugin_third_title>" class="menu_ul" style="display: none;text-align:<%plugin_third_align>">
<li><%plugin_third_content></li>
</ul>
<!--/plugin_third-->

<!--/plugin-->
</div>

</div>



以上が開閉スクリプトの改造例ですが、希にプラグインパーツにスクリプトなどが使われている場合、作動しない場合が有りますが、その際はスクリプトの変更が必要になります。
しかし私の技量では全てのスクリプトに対応させる事は、不可能でありその場合は、開閉スクリプトを諦めるか、ブログパーツの使用を断念するかになりますのでご自身の判断でお使い下さい。

Re comments.

Comment form.

  管理者にだけ表示を許可する 
  注意 名前、タイトル、本文を入力する事で投稿可能になります。

Trackbacks.

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。