Last Update : 2009/03/23
Type : PC用テンプレート
Column : 2
フレームみたいな感じです。前回のリベンジです。
画像素材はIrusuさんからお借りしています。再配布・加工・自作発言は禁止です。
差し替え等しないかぎりはテンプレート内のIrusuさんへのリンクを消さないでください。
PR
Last Update : 2008/10/07
Type : PC用テンプレート
Column : 2
なんだか不具合があったようなのでただいま公開停止中です。 時間があるときに対応したいと思います。
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が二つ以上あるとエラーが出るため。
Last Update : 2008/03/08
Type : PC用テンプレート
Column : 2
曜日ごとにアイコン変わります。
このテンプレートに使用しているアイコンは七ッ森さんの素材を使わせていただきましたので、再配布・加工・自作発言は禁止いたします。
