HR Scrollのプラグインエリアのようにセレクトボックスで表示したいプラグインだけを表示させるという小技。
説明はヘタクソなので細かい部分はフィーリングで汲み取ってください。
また、動作の保証はしません。
【Javascript】(←クリックで開閉)
【HTML】(←クリックで開閉)
説明はヘタクソなので細かい部分はフィーリングで汲み取ってください。
また、動作の保証はしません。
【Javascript】(←クリックで開閉)
以下のソースを<head></head>の間にコピペしてください。
<script type="text/javascript">
<!--
flag="reset"; //resetは最初に表示されるボックスのID名で、セレクトボックスの▼を選択したときに出てくるボックスでもあります
function Plug_Select(Id_num){
if(
document.getElementById(Id_num).style.display != 'block'){
if(flag==0) flag=Id_num;
else{
document.getElementById(flag).style.display = 'none';
flag=Id_num;
}
document.getElementById(Id_num).style.display='block';
}
else{
document.getElementById(Id_num).style.display = 'none';
}
}
//-->
</script>
<!--
flag="reset"; //resetは最初に表示されるボックスのID名で、セレクトボックスの▼を選択したときに出てくるボックスでもあります
function Plug_Select(Id_num){
if(
document.getElementById(Id_num).style.display != 'block'){
if(flag==0) flag=Id_num;
else{
document.getElementById(flag).style.display = 'none';
flag=Id_num;
}
document.getElementById(Id_num).style.display='block';
}
else{
document.getElementById(Id_num).style.display = 'none';
}
}
//-->
</script>
【HTML】(←クリックで開閉)
太字は注釈。重要ではない。
※
Aこの部分はプラグインを増やす場合にのみ一意になるよう変えてください。
例)plugin2ならB_<!--$plugin_key-->、plugin3ならC_<!--$plugin_key-->
理由)$plugin_keyではプラグイン番号は識別せず、おなじIDが二つ以上あるとエラーが出るため。
<!--セレクトボックス設定-->
<select onchange="Plug_Select(this.options[this.selectedIndex].value)">
<option value="reset">▼</option>
<!--プラグイン1にあるプラグインタイトルの羅列-->
<!--plugin1-->
<option value="A_<!--$plugin_key-->"><!--$plugin_title--></option>
<!--/plugin1-->
</select>
<!--表示部分-->
<div id="reset">
<!--ここから最初に表示される内容-->
<div id="TopExplanation">
<!--$g_explanation-->
</div>
<!--ここまで最初に表示される内容-->
</div>
<!--ここからプラグイン1の繰り返し-->
<!--plugin1-->
<div style="display:none;" id="A_<!--$plugin_key-->">
<div class="PluginTitle <!--$plugin_title_align-->">
<!--$plugin_title-->
</div>
<div class="PluginContents <!--$plugin_contents_align-->">
<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>
</div>
</div>
<!--/plugin1-->
<select onchange="Plug_Select(this.options[this.selectedIndex].value)">
<option value="reset">▼</option>
<!--プラグイン1にあるプラグインタイトルの羅列-->
<!--plugin1-->
<option value="A_<!--$plugin_key-->"><!--$plugin_title--></option>
<!--/plugin1-->
</select>
<!--表示部分-->
<div id="reset">
<!--ここから最初に表示される内容-->
<div id="TopExplanation">
<!--$g_explanation-->
</div>
<!--ここまで最初に表示される内容-->
</div>
<!--ここからプラグイン1の繰り返し-->
<!--plugin1-->
<div style="display:none;" id="A_<!--$plugin_key-->">
<div class="PluginTitle <!--$plugin_title_align-->">
<!--$plugin_title-->
</div>
<div class="PluginContents <!--$plugin_contents_align-->">
<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>
</div>
</div>
<!--/plugin1-->
※
Aこの部分はプラグインを増やす場合にのみ一意になるよう変えてください。
例)plugin2ならB_<!--$plugin_key-->、plugin3ならC_<!--$plugin_key-->
理由)$plugin_keyではプラグイン番号は識別せず、おなじIDが二つ以上あるとエラーが出るため。
$plugin_titleだと同じタイトルが2つ以上あるとkey同様に自身の手によるプラグイン番号の識別が必要になりますが、おなじプラグインの中に同じタイトルがあったりしたら意味がないし、"(ダブルクォーテーション)がある場合にエラーがでてしまいます。
<!--$plugin_no-->という変数を使えばプラグインごとに一意な名前がつけられると思ったのですがうまくいかない。
<!--plugin1--> <!--$plugin_no--> <!--/plugin1-->」 と 「<!--plugin1--> [<!--$plugin_no-->] <!--/plugin1-->」 は結果が異る。
結果) 1 2 3 4 5 6 7 8 9 10 11 12 13 , [14] [15] [16] [17] [18] [19] [20] [21] [22] [23] [24] [25] [26]
前後の文章によるのかな。
余談ついでに、「もしプラグインXを使用するならば」、と言う感じの条件があれば良いなと思ったりします。使用するというのはブログ利用者向けですが、テンプレート作成者向けに言えば「プラグインの中身があるならば」かな。
<!--pluginX--><!--/pluginX-->の中身はプラグインの数だけ繰り返される仕組みなので、前に作ってから放置しているテンプレートだとプラグインがない場合に無様な姿になってしまうのでそれを避けたいところ。
<!--$plugin_no-->という変数を使えばプラグインごとに一意な名前がつけられると思ったのですがうまくいかない。
<!--plugin1--> <!--$plugin_no--> <!--/plugin1-->」 と 「<!--plugin1--> [<!--$plugin_no-->] <!--/plugin1-->」 は結果が異る。
結果) 1 2 3 4 5 6 7 8 9 10 11 12 13 , [14] [15] [16] [17] [18] [19] [20] [21] [22] [23] [24] [25] [26]
前後の文章によるのかな。
余談ついでに、「もしプラグインXを使用するならば」、と言う感じの条件があれば良いなと思ったりします。使用するというのはブログ利用者向けですが、テンプレート作成者向けに言えば「プラグインの中身があるならば」かな。
<!--pluginX--><!--/pluginX-->の中身はプラグインの数だけ繰り返される仕組みなので、前に作ってから放置しているテンプレートだとプラグインがない場合に無様な姿になってしまうのでそれを避けたいところ。
PR