FC2 サイドバーの折りたたみ

質問

FC2でブログをやっています。
この度カテゴリやアーカイブを折りたたみにしようと思っていろいろ試してるのですがうまくいきません(>_<)
サイドバー(タイトルバー全体)をクリックして開閉するようにしたくて、いろんなサイトにいって試してるのですが、イマイチ意味が分かりません。
プラグインの一つは折りたたみに成功したのですが、どのサイトを見ても「二つ目以降もid="○○name"、id="○○list"を○○の名前を変えて追加するだけです」としか書かれてなくて、具体的にどこにどうやってソースを書いたらいいのか分かりません。
FC2の場合はテンプレートのHTMLじゃなくてプラグインのHTMLをいじらないといけないんですかね？

あとcookie制御に出来る方法を簡単に書かれてるサイトがありましたら教えてください。

回答No.6

Muller3 · ベストアンサー

ページ全体の読み込みが遅いということでしたら、スライドダウンにしてもあまり意味がないというか、もっと遅くなってしまうかもしれません。外部スクリプト（しかもたくさんの）を読むので。。。

FC2ブログでもできることはできるので、やってみたいということでしたら、先にご紹介したこちらの
http://www.koikikukan.com/archives/2005/08/24-235656.php
記事の通りにすればできます。

注意点は、

「１．Ajax用JavaScriptライブラリのダウンロード」
で「scriptaculous-js-1.8.1.zip」をダウンロードすると、中にいっぱいファイルが入っています。が、その中で使うのは
controls.js
effects.js
prototype.js
だけです。これをファイルアップロードします。

「４．１ protptype.js を修正する」
「prototype.js」の記述が最新バージョンでは少し変わっています。

show: function(element) {
$(element).style.display = 'block';
return element;
},
とします。

「６．テンプレートの修正」
で、青字の中の「<$MTBlogURL$>・・・」部分は、Fc2にアップしたファイルのパスに置き換えます。

「７．２ 個別に設定する」
は、すでにテンプレートに
<script type="text/javascript">
FoldNavigation('○○','on',false);
</script>
と入れていると思いますが、これを
<script type="text/javascript">
FoldNavigationSlowly('○○','on',false);
</script>
と、「Slowly」を付け加えればOKです。

あとは、折りたたみスピードを調整したり（私の感覚では0.3ぐらいがいいんですけど）します。

お礼

親切・迅速な対応ありがとうございました♪
お陰で問題解決出来ました！
ほんとに感謝してます！！
お礼20ptじゃ足りないくらいです。

回答No.7

Muller3

プラグインを有効にしたままでできる方法がわかりました。
もしかしたら、こちらの方が軽いかもしれないので、やってみて下さい。

<!--▼メニューここから▼-->
<div id="menu">
<div class="menu_naka">
<!--▼プラグインここから▼-->
<!--plugin-->
<!--▼プラグイン1ここから▼-->
<!--plugin_first-->
<p class="menu_title" style="text-align:<%plugin_first_talign>" id="<%plugin_first_no>name"><%plugin_first_title></p>
<div class="menu_body" id="<%plugin_first_no>list">
<div class="menu_text">
<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">
FoldNavigationSlowly('<%plugin_first_no>','on',false);
</script>
</div>
</div>
<!--/plugin_first-->
<!--/プラグイン1ここまで-->

<!--▼プラグイン2ここから▼-->
<!--plugin_second-->
<p class="menu_title" style="text-align:<%plugin_second_talign>" id="<%plugin_second_no>name"><%plugin_second_title></p>
<div class="menu_body" id="<%plugin_second_no>list">
<div class="menu_text">
<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">
FoldNavigationSlowly('<%plugin_second_no>','on',false);
</script>
</div>
</div>
<!--/plugin_second-->
<!--/プラグイン2ここまで-->

<!--/plugin-->
<!--/プラグインここまで-->

</div>
</div>
<!--/メニューここまで-->

上記をメニュー部分に差し替えるだけでできますので。
結構簡単なことだったのですが、気付くのが遅くてすみません(^^;

回答No.5

Muller3

＞折りたたみをすると何だか重い気がしますが、<div class="menu_text">～<script type="text/javascript">のなかに入れるものが長ければしょうがないことなのでしょうか？

クリックすると反応が遅い、ということでしょうか。
内容が多いとそれはあるかもしれません。内容を読み込んでから表示するので。
クライアント側の環境もありますし、サーバーの状態にもよるかもしれません（外部スクリプトを読むので）

<div class="menu_body" id="○○list">のid="○○list"を
<div class="menu_text">に入れてみたらどうでしょう？（どっちでもいい、というだけの話ですが）

内容が多いものについてはスライドダウンさせるという手もあります。
http://www.koikikukan.com/archives/2005/08/24-235656.php
（これはMovableTypeでの方法なのでFC2だとまた違います）
動きがあるのでごまかせる、というだけかもしれませんが。

私は内容の多いものはスライドダウン（違う方法ですが）にしています。かなり多い内容でも滑らかです。

補足

いえ、ページ全体の読み込みが遅いのです…
折りたたみした部分は問題ないのですが…
そのスライドダウンがとても魅力的なのですが、それのFC2版はないのでしょうか？

回答No.4

Muller3

#3の補足です。
プラグイン「リンク」に「プラグイン説明(下部)」というのがあります。
「リンク」のHTMLソースを入れる際、この「プラグイン説明(下部)」に描かれているソースを、</ul>の下に、<p>タグでくくって入れて下さい。

回答No.3

Muller3

プラグインを使わないでやるしかないかと思います。
どうするかというと、

<!--▼プラグインここから▼-->
（略）
<!--/プラグインここまで-->

この部分を以下のように置き換えます。
例えば「最近の記事」の場合

<p class="menu_title" style="text-align:left" id="○○name">最近の記事</p>
<div class="menu_body" id="○○list">
<div class="menu_text">
↓ここから
<ul>
<!--recent-->
<li &align>
<a href="<%recent_link>" title="<%recent_title>"><%recent_title> (<%recent_month>/<%recent_day>)</a>
</li>
<!--/recent-->
</ul>
↑ここまで
<script type="text/javascript">
FoldNavigation('○○','on',false);
</script>
</div>
</div>

「最近の記事」の部分には、プラグインのタイトルを入れます。
「↓ここから」から「↑ここまで」の間を、各ブラグインのHTMLで置き換えます。
これをプラグイン（項目）の数だけ繰り返します。
これでプラグインを無効にしても、サイドバーの項目は表示されたままになります。（プラグインの部分はソースから外しても構わないと思います）
で、○○の部分を、各項目ごとに共通の文字に入れ替えれば、できるはずです。

補足

やっと出来ました！！
<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>
の部分を削って、この中にプラグインの内容を入れればいいんですね！
でも折りたたみをすると何だか重い気がしますが、<div class="menu_text">～<script type="text/javascript">のなかに入れるものが長ければしょうがないことなのでしょうか？

回答No.2

Muller3

「サイドメニューの折りたたみ for FC2 ブログ」
http://www.koikikukan.com/archives/2007/06/01-020555.php

これを元に説明すると、
id="○○name"　はクリックする「タイトル」部分の要素のタグに、
id="○○list"　は折りたたみたい「内容」が入っているブロック要素に
入れればいいのです。
でもって
<script type="text/javascript">
FoldNavigation('○○','on',false);
</script>
を入れます。
これがワンセット。

折りたたみたい項目にそれぞれこれらを入れていきます。
○○の部分は折りたたむタイトルと内容とで同じになっていれば、何でもいいんです。
○○の部分は他のセットと重複していてはいけません。
○○の部分に、カテゴリなら「cat」と入れたり、最近のコメントなら「cmmt」と入れたり。

公式テンプレートtakiのソースを例に取ると(○○の部分に「cat」を入れています）

<div class="menuBlockHead" id="catname"><div class="menuHeadText">カテゴリー</div></div>
<div class="menuBlockBody" id="catlist">
<div class="menuText">
<ul>
<!--category-->
<li><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li>
<!--/category-->
</ul>
<script type="text/javascript">
FoldNavigation('cat','on',false);
</script>
</div>
</div>

＞プラグインの一つは折りたたみに成功したのですが

「プラグインカテゴリ」にまとめてプラグインが入っているのではないでしょうか？これだと、HTMLの中に上記ワンセットを入れても、同じプラグインカテゴリの中に入っている項目が全て同じ○○を使うことになってしまうので、一番最初の項目しか折りたたみができません。（ブログを開いてソースを見てみて下さい。同じ○○が使われていませんか？）
ということは折りたたみをしたい場合にもしプラグインを使うなら、一つのプラグインカテゴリには、一つのプラグインしか入れられないことになります。

どのテンプレートをお使いかわからないので、ひとまずここまで。

補足

親切に回答ありがとうございます！
ちなみに共有テンプレートのdo_rose_butterfly2cを使ってます。

<!--plugin_first-->
<p class="menu_title" style="text-align:<%plugin_first_talign>"id="plugin1name"><%plugin_first_title></p>
<div class="menu_body">
<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>

ここまでは出来たのです(Muller3さんの言う通り一番最初の項目しか折りたたみが出来ませんでした…)
この下に同じようなソースを書き足していくってことですよね？

回答No.1

noname#79459

月別・カテゴリ別アーカイブのドロップダウンリスト化
http://blog.fc2.com/custom_manual/#m013

共有プラグイン追加→プラグイン説明（プルダウンで検索）