サイドメニュー(プラグインメニュー)を折りたたみ可能にする方法を紹介します。ただしこのカスタマイズは大変な割りに利便性が低いような気がするのであまりお薦めではありません。挑戦されるかたは
バックアップをとっておいてくださいね。
まず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>次に
<!--▼▼ プラグイン カテゴリー1 ▼▼-->から
<!--▲▲ プラグイン カテゴリー1 ▲▲-->で囲まれている部分を次のように書き換えます。
<!--▼▼ プラグイン カテゴリー1 ▼▼-->
<!--plugin-->
<!--plugin_first-->
<%plugin_first_content>
<hr class="left_width" />
<!--/plugin_first-->
<!--/plugin-->
<!--▲▲ プラグイン カテゴリー1 ▲▲-->次に
<!--▼▼ プラグイン カテゴリー2 ▼▼-->から
<!--▲▲ プラグイン カテゴリー2 ▲▲-->で囲まれている部分を次のように書き換えます。
<!--▼▼ プラグイン カテゴリー2 ▼▼-->
<!--plugin-->
<!--plugin_second-->
<%plugin_second_content>
<hr class="right_width" />
<!--/plugin_second-->
<!--/plugin-->
<!--▲▲ プラグイン カテゴリー2 ▲▲-->テンプレートのHTMLの編集はここまでです。
ここからプラグインのHTMLを編集します。
まずプラグインカテゴリー1にある全てのプラグインを編集します。
既存のHTMLの上下に次のような記述を加えます。
<div class="menu_title" style="text-align:<%plugin_first_talign>">
<a href="javascript:oritatami('p1')">
プラグインタイトル</a></div>
<div id="p1" style="DISPLAY: block">
<table width="100%"><tr><td class="menu_cont">
<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>
</td></tr></table>
</div>プラグインタイトルには「最近の記事」や「カテゴリ」等そのプラグインのタイトルに置き換えてください。
p1というところが2箇所あります。ここには他のプラグインを編集する度にp2,p3…など適当な重ならない名前を入れてください。
blockと記載されているところがあります。初期状態で折りたたまれていてほしいプラグインには
noneと書き換えてください。
FC2管理画面「プラグインの設定」でタイトルを入力するところがありますが、ここは空白にしてください。
次にプラグインカテゴリー2にある全てのプラグインを編集します。
既存のHTMLの上下に次のような記述を加えます。
<div class="menu_title" style="text-align:<%plugin_second_talign>">
<a href="javascript:oritatami('p10')">
プラグインタイトル</a></div>
<div id="p10" style="DISPLAY: block">
<table width="100%"><tr><td class="menu_cont">
<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>
</td></tr></table>
</div>プラグインカテゴリー1のときと同じようにタイトルや変数名を適当なものに変えてください。
プラグインのHTMLを既にカスタマイズしている方は、そのバックアップもとっておきましょう。
かなり大変なカスタマイズです。挑戦されるかたは頑張ってくださいね。
- 関連記事
-
そこまでやるなら、ウェブでもっと自由にレイアウトしたほうが、って意見もあるでしょうね。
ユーザーの要望に応える姿勢にアタマ下がります。