ABCK
アジアンビートカンケリキッズ
2005-09-08
■ [custom] プラグインの折りたたみ
プラグインの折りたたみ方法について解説しています。3つの方法を書いていますが動作自体は変わりません。
上から順に難しくなっています。その2とその3はJUGEMカスタマイズ講座 | ナビゲーションの折り畳みのスクリプトを利用しているので、こちらに慣れている人や同サイトのスクリプトを利用してツリー化も行う人向きです。古い方のその3は一応残してありますが、初めての人にはその2をお奨めします。
※ 文中に○○という穴抜きがされていますが、どれもプラグインカテゴリ（以下PC）の番号（first,second,third）を現しています。
■プラグインの折りたたみ その1
この方法では、フリーエリアが複数ある場合には動作しません。しかし、すべてのプラグインタイトルを英数字にすることで解決することができます。もしフリーエリアが複数あり、かつプラグインタイトルを日本語にしたいという場合は、各自で工夫をするかその2その3の方法を選んでください。
詳しく説明すると、プラグインの識別タグ（<%plugin_○○_tag>）をidセレクタとして使用するため、この識別タグや、categoryやsearchなどの識別用の文字列と同じものが他の場所でidセレクタとして使用されていると正しく動作しません。その場合は、識別タグの代わりにプラグインタイトルを使用する方法を解説していますが、それもまた既にidセレクタとして使用されていないことが条件です。これらに反する場合は、各自でプラグインの説明（<%plugin_○○_description>）などを使用するなどの工夫をしてください。意味がわからないという人はとりあえず試してみて、動作しなかったときに改めて他の方法を試すことになるかもしれません。
基本となるJavaScript（以下js）はfrom DFJの折りたたみメニューのスクリプトを利用させて頂きます。
jsを写す
HTMLの<head>から</head>の間に以下を挿入します。
HTMLの変更
1．テンプレートのHTMLから<!––plugin––>を探し、折りたたみたいPCのプラグインタイトル（<%plugin_○○_title>）を、<a href="javascript:void(0)" onclick="dd('<%plugin_○○_tag>')">と</a>で囲みます。メニューのタイトル部分が<h3>最近の記事</h3>の場合は<h3><a href="javascript:void(0)" onclick="dd('<%plugin_○○_tag>')">最近の記事</a></h3>となります。
フリーエリアが複数ある場合は、<%plugin_○○_tag>の代わりに<%plugin_○○_title>を使用します。そうした場合、プラグインの設定にてそれぞれのプラグインタイトルを別々の英数字にする必要があります。また、それらは既にidセレクタとして使用されている文字列以外に限ります（HTMLにid="search"とあれば、searchというタイトルにはすることができません。その場合はどちらかを変更する必要があり、HTMLの方を変えた場合にはスタイルシートの変更も行わなければならないこともあります）。
プラグインタイトルを囲む代わりに、画像や■などの記号を囲むこともできます。そうすることで折りたたみのボタンを作ることができます。
2．次に<%plugin_○○_content>、もしくはプラグインタイトル部以下からそのPCの末尾までを、<div style="display:none" id="<%plugin_○○_tag>">と</div>で囲みます。最初に閉じておく場合はstyle="display:none"に、開いておく場合はstyle="display:block"とします。
1と同じように、フリーエリアが複数ある場合には、<%plugin_○○_tag>の代わりに<%plugin_○○_title>などを使用します。
変更例1
<!––plugin_first––>
<div class="side_menu">
<h3 style="text-align:<%plugin_first_talign>">
<a href="javascript:void(0)"
onclick="dd('<%plugin_first_tag>')">
<%plugin_first_title></a></h3>
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description>
</p>
<div style="display:none" id="<%plugin_first_tag>">
<%plugin_first_content>
</div>
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description2>
</p>
</div>
<!––/plugin_first––>
変更例2
<!––plugin_second––>
<div class="side_title">
<a href="javascript:void(0)"
onclick="dd('<%plugin_second_title>')">■</a>
<%plugin_second_title>
</div>
<div style="display:block" id="<%plugin_second_title>"
class="side_body">
<p><%plugin_second_description></p>
<%plugin_second_content>
<p><%plugin_second_description2></p>
</div>
<!––/plugin_second––>
jsをOFFにしている閲覧者のためには、noscriptを用意するかstyle="display:block"にするといいと思います。
■プラグインの折りたたみ その2
失敗したときのためにテンプレートの予備を用意しておくと安心です。
プラグインの設定変更
1. 管理画面にて、プラグインの設定→（折りたたみたいプラグインの）設定の変更と選択し、上部に記載するプラグインの説明文に以下の例に従って入力していきます。
- 最近の記事を折りたたむ場合＝
plugin_entryと入力 - 最近のコメントの場合＝
plugin_commentと入力 - 最近のトラックバック＝
plugin_tb - 月別アーカイブ＝
plugin_archive - カテゴリー＝
plugin_category - リンク＝
plugin_link - その他＝
plugin_任意の文字列（英数字）
HTMLの変更
2. JUGEMカスタマイズ講座からナビゲーションの折り畳みのスクリプト（<script ...>から</script>まで）をコピーして貼り付けます。ツリー化スクリプトなどがある場合は貼り付ける位置に注意。
3. スクリプトを以下の例に従って変更します。on,offやtrue,falseについては配布元を参照してください。
function InitFoldNavi() { FoldNavigation('
プラグインの説明文に入力した文字列','off',false);
FoldNavigation('plugin_entry','on',true); //最近の記事
FoldNavigation('plugin_comment','on',false); //最近のコメント
FoldNavigation('plugin_tb','on',false); //最近のトラックバック
FoldNavigation('plugin_archive','off',true); //月別アーカイブ
FoldNavigation('plugin_category','off',true); //カテゴリー
FoldNavigation('plugin_link','on',true); //リンク
FoldNavigation('plugin_search','off',false); //ブログ内検索
FoldNavigation('plugin_calender','on',false); //カレンダー
FoldNavigation('plugin_profile','off',false); //プロフィール
FoldNavigation('plugin_mail','off',false); //メールフォーム
FoldNavigation('plugin_rss','off',false); //RSSフィード
FoldNavigation('plugin_ad1','off',false); //アフィリエイト広告1
FoldNavigation('plugin_ad2','off',false); //アフィリエイト広告2
}
4. テンプレートのHTMLから<!––plugin––>を探し、折りたたむプラグインを含むPCの<%plugin_○○_description>とそれを囲むタグを消します。最初から無い場合はこの項目を飛ばしてください。
<!––plugin_first––>
<div class="side_menu">
<h3 style="text-align:<%plugin_first_talign>">
<%plugin_first_title>
</h3>
<div style="text-align:<%plugin_first_ialign>">
<%plugin_first_description>
</div>
<div class="side_body" style="text-align:<%plugin_first_align>">
<%plugin_first_content>
</div>
<div style="text-align:<%plugin_first_ialign>">
<%plugin_first_description2>
</div>
</div>
<!––/plugin_first––>
<!––plugin_second––>
<div class="sidemenu_title"><%plugin_second_title></div>
<div class="sidemenu_body">
<p><%plugin_second_description></p>
<%plugin_second_content>
<p><%plugin_second_description2></p>
</div>
<!––/plugin_second––>
5. 次に<%plugin_○○_title>を囲むタグにid="<%plugin_○○_description>name"を挿入します。
<!––plugin_first––>
<div class="side_menu">
<h3 style="text-align:<%plugin_first_talign>" id="<%plugin_first_description>name">
<%plugin_first_title>
</h3>
<div class="side_body" style="text-align:<%plugin_first_align>">
<%plugin_first_content>
</div>
<div style="text-align:<%plugin_first_ialign>">
<%plugin_first_description2>
</div>
</div>
<!––/plugin_first––>
<!––plugin_second––>
<div class="sidemenu_title" id="<%plugin_second_description>name">
<%plugin_second_title>
</div>
<div class="sidemenu_body">
<%plugin_second_content>
<p><%plugin_second_description2></p>
</div>
<!––/plugin_second––>
6. 最後に<%plugin_○○_content>、もしくはプラグインタイトル部以下からそのPCの末尾までを囲むタグにid="<%plugin_○○_description>list"を挿入します。挿入すべきタグが見当たらない場合は<div id="<%plugin_○○_description>list">と</div>で<%plugin_○○_content>を囲んでください。
<!––plugin_first––>
<div class="side_menu">
<h3 style="text-align:<%plugin_first_talign>" id="<%plugin_first_description>name">
<%plugin_first_title>
</h3>
<div class="side_body" style="text-align:<%plugin_first_align>" id="<%plugin_○○_description>list">
<%plugin_first_content>
</div>
<div style="text-align:<%plugin_first_ialign>">
<%plugin_first_description2>
</div>
</div>
<!––/plugin_first––>
<!––plugin_second––>
<div class="sidemenu_title" id="<%plugin_second_description>name">
<%plugin_second_title>
</div>
<div class="sidemenu_body" id="<%plugin_○○_description>list">
<%plugin_second_content>
<p><%plugin_second_description2></p>
</div>
<!––/plugin_second––>
- 開閉ボタンなどの表示設定はスクリプトの配布元を参考にしてください。
- また、<div>などが多く使われていたり、凝ったデザインである場合には表示が崩れてしまう可能性もあります。
- プラグインタイトルの位置などをCSSで調節する必要がある場合もあります。
- その他、テンプレートによっては動作しないなどの問題があるかもしれません。
- ツリー化との併用もできます。
スクリプトは同じなのでその3と変わりはありません。
■プラグインの折りたたみ その3
失敗したときのために予備を用意しておくと安心です。
テンプレートのHTMLを変更
1. JUGEMカスタマイズ講座からナビゲーションの折り畳みのスクリプト（<script ...>から</script>まで）をコピーして貼り付けます。ツリー化スクリプトなどがある場合は貼り付ける位置に注意。
2. カテゴリーを折りたたみたい場合は、スクリプトに矢印の一行を加えます。他にも折りたたみたい部分がある場合は、○○の部分を新しい文字列に変えたものを加えます。
function InitFoldNavi() {
FoldNavigation('newentry','off',false); //最新エントリ
FoldNavigation('entry' ,'on' ,true); //ページエントリ
FoldNavigation('comment' ,'on' ,false); //最新コメント
FoldNavigation('tb' ,'on' ,false); //最新トラックバック
FoldNavigation('archive' ,'off',true); //アーカイブ
FoldNavigation('link' ,'on' ,true); //リンク
FoldNavigation('profile' ,'off',false); //プロファイル
FoldNavigation('category' ,'off',false); //カテゴリー ←
FoldNavigation('○○' ,'off',false); //○○の説明
}
3. 折りたたみたいプラグインが含まれるPCを、
<!--plugin_○○-->を目印にHTMLから探します。
例えば「最近のエントリー」がPC1に、「最近のコメント」がPC2にあり、
そのどちらも折りたたみたいという場合には<!--plugin_first-->と
<!--plugin_second-->を探します。
4. その下方にあるプラグインタイトルの変数とそれを囲むタグ （<h2 style="text-align:<%plugin_first_talign>"><%plugin_first_title></h2> や <div class="side_title"><%plugin_second_title></div>など）を切り取り、メモ帳などに貼り付けておきます。
5. またそれぞれに<%plugin_○○_description>があれば、
それを囲むタグごとそれを消します（<p style="text-align:<%plugin_first_ialign>">〜</p>など）。description2についてはそのままで平気です。
6. もし上記までを行った状態で<!--plugin_second-->と<%plugin_second_content>の間に何か表記がある場合はそれも切り取り、4でメモ帳などに貼り付けたものの下に貼り付けておきます。
HTML変更例1
変更前
<!--plugin_first--> <h3 style="text-align:<%plugin_first_talign>"> <%plugin_first_title></h3> <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> <!--/plugin_first-->
変更後
<!--plugin_first--> <%plugin_first_content> <p style="text-align:<%plugin_first_ialign>"> <%plugin_first_description2> </p> <!--/plugin_first-->
メモ帳
<h3 style="text-align:<%plugin_first_talign>"> <%plugin_first_title></h3>
HTML変更例2
変更前
<!--plugin_second--> <div class="side_title"><%plugin_second_title></div> <div class="side_body"> <%plugin_second_description> <div class="side_content"> <%plugin_second_content> </div> <%plugin_second_description2> </div> <!--/plugin_second-->
変更後
<!--plugin_second--> <%plugin_second_content> </div> <%plugin_second_description2> </div> <!--/plugin_second-->
メモ帳
<div class="side_title"><%plugin_second_title></div> <div class="side_body"> <div class="side_content">
プラグインのHTMLを変更
7. まず1番上に、4（と6）でメモ帳に移したものを貼り付けます。その中のstyle指定を消します（class="××"は残す）。さらに、<%plugin_○○_title>を任意のタイトルに変更します。
HTML変更例1
<h2 class="side_title">Recent Entry</h2> 元々のHTML
HTML変更例2
<div class="menu_title">Recent Comments</div> <div class="menu_body"> <div class="menu_content"> 元々のHTML
8. 元々のHTMLを<div>で囲います。もし6で移したものがある場合はそのままで結構です。
HTML変更例1
<h2 class="side_title">Recent Entry</h2> <div> 元々のHTML </div>
HTML変更例2
<div class="menu_title">Comments</div> <div class="menu_body"> <div class="menu_content"> 元々のHTML
9. 加えたものにそれぞれidを付けます。もし6を行っている場合は、元々のHTMLのひとつ上にある<div>にidを付けます。idについてはテンプレートHTML変更の2にある以下の色文字の部分を参照します。
FoldNavigation('newentry','off',false); // 最新エントリ
その文字に、タイトルにはnameを、本体にはlistを付けたものがidになります（例はナビゲーションの折り畳みに）。
HTML変更例1
<h2 class="side_title" id="newentryname">Recent Entry</h2> <div id="newentrylist"> 元々のHTML </div>
HTML変更例2
<div class="menu_title" id="commentname">Recent Comments</div> <div class="menu_body"> <div class="menu_content" id="commentlist"> 元々のHTML
例になくても、テンプレートHTML変更の2で加えたものならば折りたたむことができます。 例えばスクリプトに○○をmemoに変えた一行を加えてあれば以下のようにすることで折りたためます。
<h3 id="memoname">MEMO</h3> <div id="memolist"> メモ </div>
10. 折りたたみたいプラグインと同じPCにあるが折りたたまないプラグインにも必要があればタイトルを付けます（付けないとタイトルは表示されません）。やり方は7と同じです。
タイトルが必要のない場合でも6を行っている場合は、6で移したもの（4で移したものを除く）を元々のHTMLの上に貼り付けておく必要があります。
<h3>Search</h3> 元々のHTML
<div class="side_box"> 元々のHTML
備考
- 開閉ボタンなどの表示設定はナビゲーションの折り畳みを参考にしてください。
- また、<div>などが多く使われていたり、凝ったデザインである場合には表示が崩れてしまう可能性もあります。
- プラグインタイトルの位置などをCSSで調節する必要がある場合もあります。
- その他、テンプレートによっては動作しないなどの問題があるかもしれません。
- ツリー化との併用もできます。
スクリプトは同じなのでその2と変わりはありません。
■ [custom] プラグインのツリー化（誘導）
最近のエントリ・コメント・トラックバックとリンクについてはひよこさん（id:hiyokokun）のツリー化の手引き（FC2ツリー化の手引き簡易バージョンでも可。というか楽）での修正HTMLをコピーしてプラグインのHTMLにペーストで、カテゴリーについてはそのリンク先を読めばできます。
リンクのツリー化をするときにはカテゴリーのように、リンクの編集でサイト名を以下のように変更します。
［分類］サイト名
Comment
月別アーカイブが長くなって困っていたのですが、
こちらの記事を参考に、無事に折りたたみが出来ました。
有難うございました。
こちらの記事を参考に ブログの折りたたみに成功しました♪
とっても参考になりました。お世話になりました♪
1の方法で問題なく折りたたみ化できました。
ありがとうございます。
このたび、こちらで折りたたみの勉強をさせていただきました。どうも有難うございました。<(..)>
ちなみにその方法とは折りたたみメニューを使い、ボタンを大カテゴリ、囲むメニュー部分に小カテゴリ（頭に├などを入れて）を置く方法です。
（http://bisco.blog2.fc2.com/blog-entry-46.html）
もっと簡単な方法がどこかにあったような気がするので、検索やフォーラムで見つからなかったら検討してみてください。
HTMLを直すものとばかり思っていました。
勘違いはずかしいです。
無事できました。
が、大カテゴリを残して小カテゴリをたたみたかったので、もうちょっと考えてみます。
む、無理かな…
上から5つ目の項目に「上部に記載するプラグインの説明文」とありますので、plugin_Tree-CATEGORYなどと入れてください。スクリプトの変更時にも同じ文字列を使用します。
pcafeさんの共有プラグインTree-CATEGORYを降りたたみにしようと悪戦苦闘しています。
『その2』の方法を試していますが、最初の『上部に記載するプラグインの説明文』というのがどの部分か分かりません。
たぶん、説明文がないのだと思うのですが、その場合Pタグなどで、自分で作ればいいのでしょうか？
説明どおりにできなかったのはその部分だけなので、これが原因でうまく動作しないのだと思います。
ご面倒でしょうが何か分かれば教えてください。
早速ですが、ｻｲﾄﾞﾊﾞｰを折りたたみたいのですが
うまくいきません(*´つω･｡) ｸｽﾝ･･･
テンプレートは共有の『ako-love-2』です。
IDの振り分けをしたいのですが、HTMLに一括で記載されているので
どうすればよいかわかりません
教えてください<m(__)m>
リンクフリーですのでご自由にどうぞー。
折りたたみの参考にさせていただきました。
ありがとうございました。
ここのページ、リンクさせてください。
よろしくお願いいたします。
上記の折り畳みナビゲーションを公式テンプレート『sofa』でやりましたところ、うまくいきました。ありがとうございます。
カテゴリーのツリー化はまめじろうさんのではなく、<a href="melrose.jugem.jp" target="_blank">strollさんのスクリプト</a>を使いました。
今回参考にさせていただいた覚書も記事に残してますので、もし間違い等ありましたら、コメントでご教示ください。
本当にありがとうございました。
挑戦しようと思ったのですが、まず
>1. JUGEMカスタマイズ講座から ナビゲーションの折り畳みの説明に従い、スクリプトをコピーして貼り付けます。
ここの段階から、スクリプトはJAVAスクリプトをコピペしたらいいだけなのか、それともその上に書いてあったIDも設定しなければいけないのかがわかりませんでした。
しかし、IDを割り振ろうと思っても、プラグインで一括してHTMLに書いているので、一つ一つに割り振ることができません。
最初のところをもう少し詳しく教えていただくことはできませんでしょうか。
