サイドメニュー(プラグイン)を折りたたみ可能にするカスタマイズを紹介します。こちらはlightframe対象です。standardをお使いの方は
こちらをご覧ください。
まずHTMLの<head>から</head>までの間の好きなところに次の記述を加えます。
<head>
～<script type="text/javascript">
<!--
function oritatami(id_name)
{
p_menu = document.getElementById(id_name).style;
if (p_menu.display == 'none') p_menu.display = "block"; else p_menu.display = "none";
}
// -->
</script>～
</head>ここまではstandardと同じです。
次に
<!--▼▼ プラグイン カテゴリー１ ▼▼-->から
<!--▲▲ プラグイン カテゴリー１ ▲▲-->で囲まれている部分を次のように書き換えます。
<!--▼▼ プラグイン カテゴリー１ ▼▼-->
<!--plugin-->
<!--plugin_first-->
<%plugin_first_content>
<!--/plugin_first-->
<!--/plugin-->
<!--▲▲ プラグイン カテゴリー１ ▲▲-->次に
<!--▼▼ プラグイン カテゴリー２ ▼▼-->から
<!--▲▲ プラグイン カテゴリー２ ▲▲-->で囲まれている部分を次のように書き換えます。
<!--▼▼ プラグイン カテゴリー２ ▼▼-->
<!--plugin-->
<!--plugin_second-->
<%plugin_second_content>
<!--/plugin_second-->
<!--/plugin-->
<!--▲▲ プラグイン カテゴリー２ ▲▲-->テンプレートのHTMLの編集はここまでです。
ここからプラグインのHTMLを編集します。
まずプラグインカテゴリー１にある全てのプラグインを編集します。
既存のHTMLの上下に次のような記述を加えます。
<div class="plugin1_outline">
<div class="plugin1_title" style="text-align:<%plugin_first_talign>">
<a href="javascript:oritatami('p1')">
プラグインタイトル</a></div>
<div id="p1" style="DISPLAY: block">
<div class="plugin1_body">
<div style="margin: 10px 0; text-align:<%plugin_first_ialign>">
<%plugin_first_description></div>
<div style="margin: 10px 0; text-align:<%plugin_first_align>"> ～
(既存のプラグインHTML)
～</div>
<div style="margin: 10px 0 0 0; text-align:<%plugin_first_ialign>">
<%plugin_first_description2></div>
</div></div></div>プラグインタイトルには「最近の記事」や「カテゴリ」等そのプラグインのタイトルに置き換えてください。
p1というところが２箇所あります。ここには他のプラグインを編集する度にp2,p3…など適当な重ならない名前を入れてください。
blockと記載されているところがあります。初期状態で折りたたまれていてほしいプラグインには
noneと書き換えてください。
次にプラグインカテゴリー２にある全てのプラグインを編集します。
既存のHTMLの上下に次のような記述を加えます。
<div class="plugin1_outline">
<div class="plugin1_title" style="text-align:<%plugin_second_talign>">
<a href="javascript:oritatami('p10')">
プラグインタイトル</a></div>
<div id="p10" style="DISPLAY: block">
<div class="plugin1_body">
<div style="margin: 10px 0; text-align:<%plugin_second_ialign>">
<%plugin_second_description></div>
<div style="margin: 10px 0; text-align:<%plugin_second_align>"> ～
(既存のプラグインHTML)
～</div>
<div style="margin: 10px 0 0 0; text-align:<%plugin_second_ialign>">
<%plugin_second_description2></div>
</div></div></div>プラグインカテゴリー１のときと同じようにタイトルや変数名を適当なものに変えてください。
プラグインのHTMLを既にカスタマイズしている方は、そのバックアップもとっておきましょう。
かなり大変なカスタマイズです。挑戦されるかたは頑張ってくださいね。
- 関連記事
-
