Top ＞ menufolder.js マニュアル
主な機能
本スクリプトを用いることでサイドメニューの折りたたみ、サブカテゴリーリストを折りたたみをすることができます。基本的な動作としては、メニュータイトル部分またはカテゴリー名横に折りたたみ用リンクを表示し、リンクをクリックすることでメニューリストの開閉を行うことができます。またタイトル部分にリスト数を表示することができます。 折りたたみ状態をメニュー単位にCookieで保持します。これによりページ間の移動やページの更新を行っても同じ折りたたみ状態を継続することができます。
オプション
オプションは下記の通りです。- 折りたたみ用リンク形式の選択：折りたたみマークによるリンクまたはブロックレベル要素によるリンク（サブカテゴリーリストは折りたたみマークのみ）
- 折りたたみマーク表示位置の選択：メニュータイトルの左または右
- サブカテゴリーリスト折りたたみマーク表示位置の選択：カテゴリー名の左または右
- リスト数表示位置の選択：メニュータイトルの左または右
- リスト数を計数用タグの指定
- リスト数から不要な値分の減算（メニュー単位）
- タイトルと折りたたみマーク、あるいはタイトルとリスト数の表示間隔の調整（サブカテゴリーリストの場合、カテゴリー名と折りたたみマークの間隔の調整
- 折りたたみ状態保持の選択
設定データ
ここでは menufolder.js の中程に定義している各データの設定方法について説明します。デフォルトの状態でも動作可能ですが、設定データのカスタマイズを行うことで折りたたみ関する動作をきめ細かく設定することができます。linkType
- 名称：リンク方式
- 用途：折りたたみ用のリンクの形式を設定します。
- 設定値：
unblock：タイトル前後いずれかに折りたたみ用マークを表示して折りたたみマークにリンク／block：タイトル枠全体にリンク付与
- 名称：折りたたみマーク表示
- 用途：上記 linkType の設定で 'block' を選択した場合、折りたたみマークの表示・非表示を設定します。メニュータイトル枠全体をリンクにする場合のみ有効です。
- 設定値：true：表示／false：非表示
- 名称：サイドメニュー用折りたたみマーク
- 用途：サイドメニューのタイトル横に表示する折りたたみ用リンクのマークです。「open～」が閉じている状態で表示されるマーク、「close～」は開いている状態で表示されるマークです。
- 設定値：任意の文字（設定したマークを''で括るように）
- 名称：折りたたみマーク位置
- 用途：折りたたみマークをタイトルの前後どちらに表示するかを設定します。折りたたみマークを表示する場合のみ有効です。
- 設定値：
true：タイトルの前に表示／false：タイトルの後に表示。ただしメニューの左端または右端に表示する場合は true を設定（スタイルシートで位置を調整します）
- 名称：リスト数表示位置
- 用途：リスト数表示位置をタイトルの前後どちらに表示するかを設定します
- 設定値：
true：タイトルの前に表示／false：タイトルの後に表示
- 名称：リスト数表示を括るマーク
- 用途：「left～」には左側の文字（'('、'['等）、「right～」には右側の文字（')'、']'等）を設定します。何も設定しない場合はいずれも '' という状態にしてください。また片方だけの設定も可能です。
- 設定値：任意の文字
- 名称：リンク数減算が必要なメニュー数
- 用途：BlogPeople・MyBlogList等でリスト数と無関係なリンク（バナーリンクや「私を登録」等）が表示される場合、そのリンク数を合計値から減算するための設定です。ここではリンク数を減算したいメニューリストの数を半角数字で設定します（実際にいくつ減算するかは次の項目で設定します）。
- 設定値：任意の数字（減算したいメニューリストが1つであれば「1」）。不要な場合は「0」。
- 名称：各リンクのオフセット数
- 用途：まず [x] の部分に、減算するメニューが先に設定した linkNumber の中で何番目に表示されるかを指定します。 1番目に表示されるのであれば（プログラムの都合上） [0] 、2番目に表示されるものは [1] …という具合に設定してください。メニューが表示される順番は基本的に画面の左上から右下です。減算が不要なエントリーやカテゴリー等の他のメニューは数に含みません。linkNumber を「0」に設定した場合はこの設定を変更する必要はありませんので、そのままにしておいてください。そして右辺には実際に減算したい値を半角数字で設定します。
- 設定値：任意の数字（1つ減算する場合は「1」）
- 名称：トラックバック数の除数
- 用途：トラックバック先のリンクとトラックバック元のリンクを同時に表示している場合、リスト数が倍になってしまいます。この値はその除数を指定するものです。「2」となっている場合はリスト数の合計を2で割ります。この設定はトラックバック先とトラックバック元のリンクを 1：1 で表示させている場合のみ有効です。li タグを使用してツリー表示等を行っている場合は FoldNavigationByTagName を利用してください。除算が不要な場合は「1」を設定してください。
- 設定値：除数を半角数字で設定
- 名称：カテゴリーリスト数計算方法
- 用途：カテゴリーリスト数計算方法を li タグ（サブカテゴリー表示）で計数するか、a タグ（従来の一括表示）で計数するかを指定します。他のタグで計数する場合はfalseを設定してください。
- 設定値：
true：li タグで計数／false：a タグで計数
- 名称：タイトル表示位置補正フラグ
- 用途：スタイルシートで折りたたみマークを左端または右端に配置する場合、タイトルがメニュー中央から外れるので、タイトル位置を補正する・しない設定します。
- 設定値：
true：補正する／false：補正しない
- 名称：タイトル表示位置補正方向
- 用途：上記でタイトル位置を補正する場合、補正する方向を設定します。補正する必要がない場合は本項目はそのままの状態にしておいてください。
- 設定値：
true：タイトルを左方向に補正／false：タイトルを右方向に補正
- 名称：タイトル表示位置補正オフセット
- 用途：modification を有効にしている場合に有効となります。上記の centeringPosition で補正する方向のオフセットを半角数字で指定します。なお「1」は半角1文字に相当します。補正する必要がない場合は本項目はそのままの状態にしておいてください。
- 設定値：任意の値。不要な場合は「0」を設定。
- 名称：タイトルと折りたたみマークのスペース
- 用途：タイトルとリスト数の空白を半角スペース数で設定します。
- 設定値：任意の値。「1」は半角スペース1文字分です。スペースが不要な場合は「0」を設定。
- 名称：タイトルとリスト数のスペース
- 用途：タイトルとリスト数の空白を半角スペース数で設定します。
- 設定値：任意の値。「1」は半角スペース1文字分です。スペースが不要な場合は「0」を設定。
- 名称：サブカテゴリーの折りたたみ有効フラグ
- 用途：サブカテゴリーの折りたたみの有効／無効を設定します。ここでは有効にします。
- 設定値： true：有効／false：無効
- 名称：サブカテゴリーの折りたたみマーク
- 用途：サブカテゴリー名横に表示する折りたたみ用リンクのマーク
- 設定値：任意の文字（設定したマークを''で括るように）
- 名称：サブカテゴリー用折りたたみマーク挿入位置
- 用途：折りたたみマークをカテゴリー名の前後どちらに表示するかを設定します。
- 設定値：true：カテゴリー前に折りたたみマークを配置／false：カテゴリー後に折りたたみマークを配置
- 名称：サブカテゴリーのタイトルとマークのスペース
- 用途：サブカテゴリーのタイトルとマークの空白を半角スペース数で設定します。
- 設定値：任意の値。「1」は半角スペース1文字分です。スペースが不要な場合は「0」を設定。
- 名称：状態保持フラグ
- 用途：折りたたみ状態を cookie に保持する／しないを設定します。「保持」を設定した場合、最後に変更した折りたたみ状態が他のページへのジャンプ時やブラウザ起動時、および更新時に反映されます。
- 設定値：
true：有効／false：無効
下記にサンプルを示します。青字部分が前記の設定項目、赤字が設定値に該当しています。変更する際は赤字部分を修正してください。
//--------------------------------------------------------
// メニュータイトル用設定データ
//--------------------------------------------------------
// リンク方式
// 折りたたみマークにリンク付与：'unblock'
// メニュータイトル枠全体にリンク付与 'block'
var linkType = 'unblock';
//-----------------------
// 折りたたみマーク関連
//-----------------------
// 折りたたみマーク表示(メニュータイトル枠全体をリンクにする場合のみ有効)
// 表示する：true
// 表示しない：false
var displayMark = false;
// 折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
var openMarkForSideBarMenu = '▽';
var closeMarkForSideBarMenu = '△';
// 折りたたみマーク位置(折りたたみマークを表示する場合のみ有効)
// タイトル前に折りたたみマークを配置：true
// タイトル後に折りたたみマークを配置：false
// 左端または右端に折りたたみマークを配置：true
var preMarkForSideBarMenu = true;
//---------------
// リスト数関連
//---------------
// リスト数表示位置
// タイトル前にリスト数を表示：true
// タイトル後にリスト数を表示：false
var listNumberPosition = true;
// リスト数表示を括るマーク
var leftMarkForListNumber = '';
var rightMarkForListNumber = '';
// リンク数減算が必要なメニュー数
// リンク数を減算する必要があるメニューはここに含めてください
// 注:対象となるid属性名が「linkx(xは数字)」であること
// 減算するメニューがない場合:0
var linkNumber = 2;
// 減算する各メニューのオフセット値
// 注:対象となるid属性名が「linkx(xは数字)」であること
var offsetValue = new Array(linkNumber);
offsetValue[0] = 3;
offsetValue[1] = 2;
// トラックバック数の除数
// 注1:対象となるid属性名が「trackback」であること
// 注2:除算が不要な場合は'1'を設定すること
var trackbackNumber = 2;
// サブカテゴリーリスト数計数方法
// liタグで計数：true
// aタグで計数：false
// 注:他のタグを指定する場合はfalseを設定してください
var subCategoryCount = true;
//-------------------
// 表示位置補正関連
//-------------------
// タイトル表示位置補正フラグ(折りたたみマークを左端または右端に配置する場合)
// 補正する：true
// 補正しない：false
var correctFlag = true;
// タイトル表示位置補正(折りたたみマークを左端または右端に配置する場合)
// ・タイトルを右方向に移動：true
// ・タイトルを左方向に移動：false
// 注:補正が不要な場合は offsetForCentering に'0'を設定してください
var centeringPosition = true;
// タイトル表示位置補正オフセット(スタイルシートで折りたたみマークを左端または右端に配置した場合)
// またはマークとタイトル間の半角空白数(折りたたみマークをタイトルの左または右に配置した場合)
var offsetForCentering = 0;
// タイトルと折りたたみマークのスペース(折りたたみマークを表示をする場合のみ有効)
// 折りたたみマークを左端または右端に配置する場合'0'を設定
var offsetForTitleAndMark = 0;
// タイトルとリスト数のスペース(リスト数を表示するメニューに有効)
var offsetForTitleAndLinkNumber = 1;
//--------------------------------------------------------
// サブカテゴリーリスト用設定データ
//--------------------------------------------------------
// サブカテゴリーフラグ
// サブカテゴリーの折りたたみを有効にする(別途テンプレート設定が必要)
// 有効にする：true
// 無効にする：false
var subCategory = true;
// サブカテゴリー用折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
var openMarkForSubCategories = '▼';
var closeMarkForSubCategories = '▲';
// サブカテゴリー用折りたたみマーク挿入位置
// カテゴリー前に折りたたみマークを配置：true
// カテゴリー後に折りたたみマークを配置：false
var preMarkForSubCategory = false;
// サブカテゴリーのタイトルとマークのスペース
var offsetForTitleAndMarkOfSubcategory = 0;
//--------------------------------------------------------
// 状態保持用設定データ
//--------------------------------------------------------
// 状態保持フラグ
// 有効にする：true
// 無効にする：false
var holdState = true;
注：Macの場合、上記スクリプト内にある折りたたみマーク「▽」や「▼」でエラーになる（ページが表示されない）可能性がありますので、正常に動作しない場合はこの文字を他の半角英文字に変更してみてください。なおエラー状況はページを表示した後で Firefox の「ツール」→「JavaScriptコンソール」を選択することで確認できます。
menufolder.js の起動方法
この項では menufolder.js に実装された関数の起動方法を説明します。ここでは通常メニューの折りたたみを例に挙げています。サブカテゴリーリストの設定方法については「サブカテゴリーリストの折りたたみ」を参照ください。１．menufolder.js のインクルード文追加
折りたたみを利用する各テンプレートの <head>～</head> の間に下記のタグを追加してください。charset 属性は menufolder.js の文字コードを指定してください。
<script type="text/javascript" src="<$MTBlogURL$>menufolder.js" charset="utf-8"></script>２．各メニューに id 属性追加
下記の要領で、折りたたみたいサイドメニューのタイトルに「id="xxname"」、リストの方に「id="xxlist"」を付与します。"name"と"list"は固定名称です。"xx"の部分にはメニュー毎に異なる名称を付与します（例えばカテゴリーリストは"category"、エントリーは"entry"等）。同じ名称が存在すると正常に動作しませんのでご注意ください。
下記は設定例です。この例と同じように各メニューに青色部分の id 属性を追加してください。
<div class="sidetitle" id="categoryname">
Categories
</div>
<div class="side" id="categorylist">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a> [<$MTCategoryCount$>]<br />
</MTCategories>
</div>
なおリスト数表示を補正する必要がある BlogPeople や MyBlogList 等のリンクメニューにつきましてはid属性を "linkx～"（xは半角数字）で統一してください。その場合のタイトル部は「id="link1name"」、リスト部は「id="link1list"」という具合になります（複数存在する場合は数字の部分が増えていきます）。
３．menufolder.js の関数実行スクリプト追加
各テンプレートの、折りたたみを指定している各メニューの直下（例えばカテゴリーリストであれば４項のタグのすぐ下）に下記のスクリプトを追加します。
３．１ リスト数を計算するタグを指定しない起動
<script type="text/javascript">
<!--
FoldNavigation('idName','initState',viewListNumber);
//-->
</script>
３．２ リスト数を計算するタグを指定した起動
<script type="text/javascript">
<!--
FoldNavigationByTagName('idName',initState',viewListNumber,'tagName');
//-->
</script>
スクリプト内の赤字部分を適宜設定します。それぞれの意味と設定値は下記の通りです。
idName
- 名称：id属性名
- 用途：折りたたむメニューのid属性を指定します。
- 設定値：このスクリプトの直前のメニューのid属性名（"name"または"list"を除去した形）
- 名称：初期状態
- 用途：ページを最初に表示した時の折りたたみ状態を指定します
- 設定値： on：開いた状態／off：閉じた状態
- 名称：リスト数表示
- 用途：メニュータイトル横にリスト数の表示・非表示を設定します
- 設定値： true：表示／false：非表示
- 名称：タグ名
- 用途：リスト数を計数するタグを指定します（リスト数を表示する場合のみ有効）。FoldNavigation は計数に a タグ（最近のコメントの場合は'#'も含む）を用いるので、その場合はこのパラメータを用いた関数 FolsNavigationByTagName を起動する必要はありません。リストに li タグが用いられている場合は必ず FoldNavigationByTagName を起動してタグ名を指定してください。なお li タグを用いたサブカテゴリーリストについては id 属性を 固定していれば FoldNavigation で自動的に計数します。
- 設定値：任意のタグ名
<script type="text/javascript">
<!--
FoldNavigation('category','on',true);
//-->
</script>
という内容で配置します。
ul - li タグを使った「最近のコメント」であれば、id属性に"comment"を指定、初期状態は「開く」、リスト数を表示したい場合、「最近のコメント」メニューの直下に、
<script type="text/javascript">
<!--
FoldNavigationByTagName('category','on',true,'li');
//-->
</script>
という内容で配置します。第4パラメータに li を指定することでコメント数のみを計数します。
