サイドメニュー(プラグイン)を折りたたみ可能にするカスタマイズを紹介します。こちらは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と同じです。
次に
<!--▼▼ プラグイン カテゴリー1 ▼▼-->から
<!--▲▲ プラグイン カテゴリー1 ▲▲-->で囲まれている部分を次のように書き換えます。
<!--▼▼ プラグイン カテゴリー1 ▼▼-->
<!--plugin-->
<!--plugin_first-->
<%plugin_first_content>
<!--/plugin_first-->
<!--/plugin-->
<!--▲▲ プラグイン カテゴリー1 ▲▲-->次に
<!--▼▼ プラグイン カテゴリー2 ▼▼-->から
<!--▲▲ プラグイン カテゴリー2 ▲▲-->で囲まれている部分を次のように書き換えます。
<!--▼▼ プラグイン カテゴリー2 ▼▼-->
<!--plugin-->
<!--plugin_second-->
<%plugin_second_content>
<!--/plugin_second-->
<!--/plugin-->
<!--▲▲ プラグイン カテゴリー2 ▲▲-->テンプレートのHTMLの編集はここまでです。
ここからプラグインのHTMLを編集します。
まずプラグインカテゴリー1にある全てのプラグインを編集します。
既存の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というところが2箇所あります。ここには他のプラグインを編集する度にp2,p3…など適当な重ならない名前を入れてください。
blockと記載されているところがあります。初期状態で折りたたまれていてほしいプラグインには
noneと書き換えてください。
次にプラグインカテゴリー2にある全てのプラグインを編集します。
既存の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>プラグインカテゴリー1のときと同じようにタイトルや変数名を適当なものに変えてください。
プラグインのHTMLを既にカスタマイズしている方は、そのバックアップもとっておきましょう。
かなり大変なカスタマイズです。挑戦されるかたは頑張ってくださいね。
- 関連記事
-
作りこみをしていく中でサイトのレイアウトが気になり始めたので、左側のコラムのみ開閉式に挑戦してみました。
( Θ_Θ)何でも挑戦
予想していたよりも簡単に変更する事ができました。
次はサイトマップに挑戦してみようかなーなんて思ってます。
いつも参考にさせていただきありがとうございます。
サイト改造したらまた遊びにきます。