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

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

Posted at June 1,2007 2:05 AM
Tag:[Customize, FC2, Folding]

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

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

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

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

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

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

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

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

download

2.折りたたみスクリプトのアップロード

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

ファイルのアップロード

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

URLのコピー

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

3.script 要素追加

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

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

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

4.プラグイン表示用タグの修正

サイドメニューを表示するプラグインに対して修正を行ないます。下記のように青色部分(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' と設定してください。

5.スタイルシートの修正

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

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 では他の表示に影響があるかもしれませんので、クラス属性等の設定が必要かもしれません)。

関連記事
zenback
人気エントリー
トラックバックURL


コメント

はじめまして。

つい最近、サイドバーを折りたたみにしました。
最初はちゃんとなっていたんですが、
少し前から折りたたみの部分が真ん中に
寄ってしまいます・・・
どーしてなんでしょう?
教えていただけたらうれしいです。

[1] Posted by blue★boy : November 12, 2007 11:24 PM

>blue★boyさん
こんにちは。
ご質問の件につきまして、サイトを拝見させて頂いたところ、折りたたみの箇所が見当りませんでした。
事象が確認できるURLまたは、その状態で再度ご連絡頂けますでしょうか。
それではよろしくお願い致します。

[2] Posted by yujiro logo : November 13, 2007 11:07 AM

すみません。

テンプレートを変えて解決しました。
お手数おかけしましたm(. . )m

[3] Posted by blue★boy : November 15, 2007 8:28 PM

こんばんわ。
ブログのカスタマイズをしたいと何度かこちらにお邪魔しておりましたが、
うまくいかず諦めてブログ自体放置してました。
久しぶりにこちらにお邪魔させて頂くと、他のテンプレートでも折りたたみが出来ると言う記事を拝見し早速試してみました。

1つだけ出来て他は出来ていませんでした;;
プラグイン2・3も変更して青い部分を追加したのですが出来ない所か
ブログパーツが消えてしまいました。
とりあえずプラグイン1のみ設定してみたのですが、何がおかしいのでしょう。
お時間があれば見て頂きたいのですが、ブログのアドレスを載せるのに抵抗がります。 数多い訪問を避けたいので。。。
管理人様だけにお教えするにはどうすれば宜しいですか?
管理人のみ観覧が無いみたいなので^^;
メールでも宜しいでしょうか?

[4] Posted by りさ : January 13, 2008 11:38 PM

先ほどコメント送信する際 エラーになってしまいました。
リロードしたら反映はされていたのですが、
Recent Commentsの所でnewになっていなかったので管理人様が気付いてくれるか心配になりました。
この記事で管理人様が気付いてくれると良いのですが。。。

[5] Posted by りさ : January 14, 2008 12:49 AM

>りささん
こんばんは。
グローバルナビゲーション(上部)の「Contact」からメールを送信できます。
またコメントは管理画面から常にチェックしてますので大丈夫です。
それではよろしくお願い致します。

[6] Posted by yujiro logo : January 16, 2008 10:31 PM

初めまして、しゅがと申します。

サイドメニューを折りたたもうとしていまして、他のメニューはちゃんと折りたためるんですが
月刊アーカイブの右側に+(まだスクリプト初期設定のままです。)が表示されてしまって
それをクリックすれば折りたためるようになってしまいました・・
どうしたら月刊アーカイブという文字で折りたためるようになれるでしょうか、そして+はどうしたら消せるのでしょうか;
お手数おかけしますが、宜しくお願い致します。

その様子を画像にしました。見れなかったらごめんなさい・

http://blog-imgs-21.fc2.com/s/u/g/sugarmaou/12.gif

[7] Posted by しゅが : March 31, 2008 3:19 PM

度々質問すみません;

HTMLに折りたたみタグを打って、スタイルシート設定する前にサイト確認したら、すでに折りたためるようになってました。
この場合はスタイルシート設定しなくて宜しいのでしょうか?
まだ月刊アーカイブの件は解決しておりません、質問だらけですが。こちらも宜しくお願い致します・・

[8] Posted by しゅが : March 31, 2008 3:42 PM

>しゅがさん
こんにちは。
ご返事遅くなり申し訳ありません。
ご質問の件ですが、サイトのURLをご連絡頂けますでしょうか。
それではよろしくお願い致します。

[9] Posted by yujiro logo : April 4, 2008 3:26 PM

こんばんわ。返事が遅くなってしまい、申し訳ありませんでした。
二つ問題ありましたが、無事に解決できました。お手数おかけしてすみません;
わざわざお忙しいときに、質問にご対応して下さり、有り難う御座いました!

[10] Posted by しゅが : May 15, 2008 10:27 PM

>しゅがさん
こんばんは。
ご連絡ありがとうございました。
無事に直ったようでよかったです。
ではでは!

[11] Posted by yujiro logo : May 17, 2008 3:29 AM

サイドメニューの折りたたみ方を調べていたらこちらに辿り着きました。
他にも幾つか有りましたがこちらのが一番分かりやすかったので組み込んでみました。
一応折りたたむ事はできましたが3つあるカテゴリの最初だけしか折りたたまれません。
どこか設定をミスっているのでしょうか。それともこういう仕様なのでしょうか。
以下が該当部分です。

<!-- ■RIGHT -->
<div id="right">

<!--plugin-->
<!--plugin_first-->
<div class="me-t">
<p style="text-align:<%plugin_first_talign>" id="plugin1name"><%plugin_first_title></p>
</div>
<div class="me-box" 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>
<script type="text/javascript">
FoldNavigation('plugin1','on',false);
</script>
</div>
<!--/plugin_first-->

<!--plugin_second-->
<div class="me-t">
<p style="text-align:<%plugin_second_talign>" id="plugin2name">
<%plugin_second_title>
</p>
</div>
<div class="me-box" id="plugin2list">
<p style="text-align:<%plugin_second_ialign>">
<%plugin_second_description>
</p>
<%plugin_second_content>
<p style="text-align:<%plugin_second_ialign>">
<%plugin_second_description2>
</p>
<script type="text/javascript">
FoldNavigation('plugin2','on',false);
</script>
</div>
<!--/plugin_second-->

<!--plugin_third-->
<div class="me-t">
<p style="text-align:<%plugin_third_talign>" id="plugin3name">
<%plugin_third_title>
</p>
</div>
<div class="me-box" id="plugin3list">
<p style="text-align:<%plugin_third_ialign>">
<%plugin_third_description>
</p>
<%plugin_third_content>
<p style="text-align:<%plugin_third_ialign>">
<%plugin_third_description2>
</p>
<script type="text/javascript">
FoldNavigation('plugin3','on',false);
</script>
</div>
<!--/plugin_third-->
<!--/plugin-->


</div>
<!-- ■RIGHT -->

よろしくお願い致します。

[12] Posted by アーク : April 11, 2009 11:18 PM

>アークさん
こんばんは。
ご質問の件ですが、すいませんがサイトのURLをご連絡ください。
それではよろしくお願い致します。

[13] Posted by yujiro logo : April 11, 2009 11:26 PM

> ご質問の件ですが、すいませんがサイトのURLをご連絡ください。

未だ公開はしておりませんがこちらです。

よろしくお願い致します。

[14] Posted by アーク : April 11, 2009 11:31 PM

>アークさん
こんばんは。
ご連絡ありがとうございました。
プラグイン用独自タグ内に設定した、折りたたみ用の id 属性値(xxname/xxlist)は、追加したプラグイン数だけ繰り返し適用されてしまいます。言い換えると、異なるプラグインパーツに同じ id 属性値が設定されるので、動作的には、各プラグイン(plugin1/plugin2/plugin3)の最初のパーツでしか折りたたみができないことがわかりました。

ということで、JavaScript を使って、id属性値を動的に設定する方法を検討してみます。
カスタマイズがうまくできましたら、別途エントリー致します。
すいませんが少々お時間ください。

なお、頂いたURLは非表示に致しました。また、最初のコメントのリストを正常に表示するよう修正しましたので、再投稿された分は削除致しました。

それではよろしくお願い致します。

[15] Posted by yujiro logo : April 12, 2009 2:51 AM

>yujiro様

おはようございます。
また、素早く対応して頂きありがとうございます。

> ということで、JavaScript を使って、id属性値を動的に設定する方法を検討してみます。
> カスタマイズがうまくできましたら、別途エントリー致します。

そうでしたか。原因が分かり一安心です。
カスタマイズよろしくお願い致します。

> なお、頂いたURLは非表示に致しました。
> また、最初のコメントのリストを正常に表示するよう修正しましたので、
> 再投稿された分は削除致しました。

ありがとうございます。

よろしくお願い致します。

[16] Posted by アーク : April 12, 2009 7:06 AM

>yujiro様
こんばんは。

カスタマイズの状況は如何でしょうか。
もし、既に何処かにアップされているのでしたら教えて頂けますでしょうか。
また、カスタマイズが困難な場合はこのまま使い続けても問題は無いでしょうか。

よろしくお願い致します。

[17] Posted by アーク : April 21, 2009 10:58 PM

アークさん、こんにちは。hatenaです。

管理人でもないのに失礼します。

カスタマイズについてですが、すでに、下記が投稿されてますよ。
http://www.koikikukan.com/archives/2009/04/14-015555.php

また、そこで私もコメントをつけてますが、私の下記の記事で、
別の方法を紹介していますので、よろしかったらご参考に。
http://hatenachips.blog34.fc2.com/blog-entry-64.html

[18] Posted by hatena : April 22, 2009 4:29 PM

hatenaさん、こんばんは。

いつの間にか解決していたのですね。
ここに何かしらの書き込みが有るのかと思ってました。

教えて頂いたサイトはどちらも拝見してきました。
ありがとうございます。

初心者なもので複雑なものは扱えません。
それで探したら此方のが一番分かり易かったもので組み込んでみました。

改良版はどちらも難しそうですが勉強してみます。
hatenaさんの方のが少し分かり易そうでした。

最初に書き込みをした時よりは少し分かるようになりましたので、
時間を掛けてでも自分のテンプレートに組み込んでみたいと思います。

ありがとうございました。

[19] Posted by アーク : April 22, 2009 10:03 PM

>アークさん
こんにちは。
ご連絡ありがとうございました。
基本的にコメント欄での連絡は行っておりませんのでご容赦ください。
また何かご不明な点がありましたらご連絡ください。

>hatenaさん
ご対応ありがとうございました!

[20] Posted by yujiro logo : April 23, 2009 12:49 PM

こんばんわ。
昨日は適切なアドバイスをありがとうございます。
お陰で、サイドバーの重複がなくなりました。

今夜はサイドメニューの折り畳みについて、
お聞きしたいコトがあります。
『小粋空間』『showry's Blog』を参考に、
何とかDL・設置するコトが出来ました。
プラグインの箇所も同様に書き換えたのですが、
サイドメニューのタイトルがなくなってしまいました。
こちらの解説を何度も読み返してみたのですが、
何度やっても解決しません。

お手数お掛けしますが、
宜しくお願いします。

[21] Posted by Makky : March 31, 2011 12:50 AM

連続投稿すみません。

今、何とか解決致しました。
お騒がせして申し訳ありません。

[22] Posted by Makky : March 31, 2011 12:56 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)