小粋空間  -  a cheap joke and a play on words site

サイドメニューの折りたたみ for FC2 ブログ

FC2ブログでのサイドメニューの折りたたみカスタマイズを紹介致します。

いつもであれば、当サイト配布のテンプレートをサンプルに説明するのですが、「他のテンプレートで折りたたみカスタマイズは利用できないでしょうか？」というご質問を頂きましたので、ここでは共有テンプレートの「do_qp_dot_3c」を例に説明します。

このカスタマイズを行うことで下記のような折りたたみを行うことができます。

なお、当サイトで配布している FC2 ブログテンプレートの折りたたみについては下記のサイトで公開されています。

• showry's Blog：FC2ブログでサイドメニュー折りたたみスクリプト導入

注：ここではプラグインを例に説明してますが、プラグイン以外のものも、「タイトル（を括るタグ）」＋「メニューリスト（を括るタグ）」というHTMLマークアップになっていれば、何でも折りたためます。

１．折りたたみスクリプトのダウンロード

下記のリンクよりスクリプトのページにジャンプし、menufolder.js のリンクをクリックして、スクリプトファイルをダウンロードしてください。

download

２．折りたたみスクリプトのアップロード

[ツール]→[ファイルのアップロード]よりダウンロードしたファイルをアップロードします。

アップロード先のURLを次項で利用するので、アップロードした後、IEであれば「表示」のリンクを右クリックして「ショートカットのコピー」を選択します。

これでクリップボードにURLがコピーされました。注：左クリックはしないでください。

３．script 要素追加

下記の script 要素を、HTMLテンプレートの </head> の直前に追加してください。

<script type="text/javascript" src="[menufolder.js の URL]" charset="utf-8"></script>

[menufolder.js の URL] には、先程コピーしたURLを貼り付けてください。

４．プラグイン表示用タグの修正

サイドメニューを表示するプラグインに対して修正を行ないます。下記のように青色部分（3ヶ所）を追加してください。

<!--plugin-->
<!--plugin_first-->
 
<div class="left_body">
 
<h3 style="text-align:<%plugin_first_talign>" id="plugin1name"><%plugin_first_title></h3>
 
<div class="menu_text" id="plugin1list">
 
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description></p>
 
<%plugin_first_content>
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description2></p>
 
</div>
 
<script type="text/javascript">
FoldNavigation('plugin1','on',false);
</script>
</div>
<!--/plugin_first-->
<!--/plugin-->

ご利用になるテンプレートによってマークアップが若干異なるかもしれませんが、基本は

• メニュータイトルを表示する要素（例では h3 要素）に id="pluginnname" を追加（x は数字）
• メニューリスト全体を括る要素（例では div 要素）に id="pluginnlist" を追加（x は数字）
• プラグインの最後の方に script 要素を追加

となっています。

n の意味ですが、2つめのプラグインに設定する場合は id="plugin2name" と id="plugin2list"、3番目のプラグインには id="plugin3name" と id="plugin3list" という風にしてください。

また、script 要素の中にある

FoldNavigation('plugin1','on',false);

も、2つめのプラグインは

FoldNavigation('plugin2','on',false);

となります。3つめの場合は 'plugin3' と設定してください。

５．スタイルシートの修正

下記 をスタイルシートに追加してください。

h3 a {
    width: auto;
}
h3 a:link,
h3 a:visited {
    display: block;
    text-decoration: none;
}
h3 a:hover {
    text-decoration: none;
}

この設定はメニュータイトルのリンクを文字以外の部分でも選択できるようにするためのものです。

他のテンプレートで、タイトル部分のタグが h3 ではなく、div であれば

div a {
    width: auto;
}
div a:link,
div a:visited {
    display: block;
    text-decoration: none;
}
div a:hover {
    text-decoration: none;
}

としてみてください（div では他の表示に影響があるかもしれませんので、クラス属性等の設定が必要かもしれません）。