poooooon の Weblog Archives

サイドバーのプラグインを折りたたむ。

参考にさせて頂いた「ニンブロラボ」様の説明が非常に分かりやすいです。

ニンブロラボ. サイドメニュー（プラグイン）を折りたたむ
⇒http://shinobibloglab.blog.shinobi.jp/Entry/30/

以下、ただのメモになります。

作業のメモ

menufolder.jsをダウンロード、自ブログにアップロード。

HTML変更前

<!--plugin1--> <h3 class="plugin_title" align="<!--$plugin_title_align-->"><!--$plugin_title--></h3> <div class="plugin_ex" align="<!--$plugin_explanation_align-->"><!--$plugin_header_explanation--></div> <div class="plugin_contents" align="<!--$plugin_contents_align-->"><!--$plugin_data--></div> <div class="plugin_ex" align="<!--$plugin_explanation_align-->"><!--$plugin_footer_explanation--></div> <!--/plugin1-->

HTML変更後

<!--plugin1--> <h3 class="plugin_title" align="<!--$plugin_title_align-->"id="<!--$plugin_title-->name"><!--$plugin_title--></h3> <div class="side" id="<!--$plugin_title-->list"> <div class="plugin_ex" align="<!--$plugin_explanation_align-->"><!--$plugin_header_explanation--></div> <div class="plugin_contents" align="<!--$plugin_contents_align-->"><!--$plugin_data--></div> <div class="plugin_ex" align="<!--$plugin_explanation_align-->"><!--$plugin_footer_explanation--></div> </div> <!--/plugin1-->

CSS追加

.side { margin: 0; padding: 0; }

プラグインのHTML追加

<script type="text/javascript"> <!-- FoldNavigation('プラグイン名','on',false); //--> </script>

on なら初期状態で開いた状態。
off なら初期状態は閉じた状態。

折りたたみマーク使う

使おうかと考えてましたが、なんだかスマートではない気がしたので、CSSでプラグイン名が並んでもくどくない様に、色を薄くしようかと考えてます。

小粋空間: サイドメニューの折りたたみマークに画像を使用する
⇒http://www.koikikukan.com/archives/2006/08/25-001313.php

ニンブロラボ. プラグイン開閉マークに画像を使用する
⇒http://shinobibloglab.blog.shinobi.jp/Entry/31/

関連リンク

テクノラティ：タグ
⇒プラグイン,カスタマイズ