showry's Blog

このプラグインに折りたたみスクリプトを適用しようとして下記のように変更したとします。

<!--plugin-->
<!--plugin_first-->
<div class="sidetitle2" id="plugin1name">
<%plugin_first_title>
</div>

<div class="side" id="plugin1list">
<%plugin_first_content>
</div>

<script type="text/javascript">
<!--
FoldNavigation('plugin1','on',false);
//-->
</script>
<!--/plugin_first-->
<!--/plugin-->

この場合、プラグインカテゴリー１に一つだけプラグインを入れている場合は問題になりませんが、２つ以上のプラグインを入れてしまうと折りたたみスクリプトがうまく動作してくれません。これは、２つのプラグインに同じid (plugin1)を割り当てられてしまうためです。idは必ずユニークにしないといけません。

一つのプラグインカテゴリーに一つのプラグインだけにすれば３つまではプラグインを導入できる事になります。
しかし、これだと折角たくさんの有用なプラグインがあるのに使えなくて不便ですね。

こういうときのためにFC2ブログではプラグイン毎にユニークなタグを出力するテンプレートが存在します。
（実は今日わかったことなんですけどね。）
下記のように書けばidの名称がプラグイン毎に異なるため、スクリプトが正常に動作するようになります。

<!--plugin-->
<!--plugin_first-->
<div class="sidetitle2" id="<%plugin_first_tag>name">
<%plugin_first_title>
</div>

<div class="side" id="<%plugin_first_tag>list">
<%plugin_first_content>
</div>

<script type="text/javascript">
<!--
FoldNavigation('<%plugin_first_tag>','on',false);
//-->
</script>
<!--/plugin_first-->
<!--/plugin-->

カテゴリー２と３も "first" をそれぞれ "second" , "third" に置き換えればよいです。
ただし、ユニークなタグ名を出力するといっても名称の重複はチェックしないので自分自身でつけたidと重複しないようにご注意下さい。

１．menufolder.js ダウンロード
下記のリンクをクリックすると小粋空間様のスクリプトのページにジャンプします。そこで menufolder.js をクリックして、同じファイル名で自身のPCに保存してください。現在(2006.6.13時点)では Ver.5.00 が最新版のようです。

小粋空間様のスクリプトページ

'menufolder.js'は文字コードでUTF-8を使用しています。FC2ブログの文字コードは EUC なのですが、スクリプトファイルをインクルードする時に文字コードを指定すればよいので問題ありません。うまく行かない場合は、'menufolder.js（全角文字を含みません）'の方をダウンロードして使ってみてください。

２．menufolder.js の設定内容を修正
設定内容を編集すれば「折りたたみマーク」や「内部のリスト数」を表示する事ができますが、とりあえずダウンロードしたままで導入します。導入が済んだ後でマニュアルを読んで変更してみてください。以下がダウンロード直後の設定データ(2006.6.13現在)です。

//--------------------------------------------------------
// メニュータイトル用設定データ
//--------------------------------------------------------

// リンク方式
// 折りたたみマークにリンク付与：'unblock'
// メニュータイトル枠全体にリンク付与 'block'
var linkType = 'block';

//-----------------------
// 折りたたみスピード
//-----------------------

// 全てのメニューのスピード
// 通常：'normal'
// 遅い：'slow'
var speed = 'normal';

// サブカテゴリーのスピード(speed が slow の場合のみ有効)
// 通常：'normal'
// 遅い：'slow'
var subcategorySpeed = 'normal';

//-----------------------
// 折りたたみマーク関連
//-----------------------

// 折りたたみマーク表示(メニュータイトル枠全体をリンクにする場合のみ有効)
// 表示する：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 modificationFlag = true;

// タイトル表示位置補正方向(折りたたみマークを左端または右端に配置する場合)
// ・タイトルを右方向に補正：true
// ・タイトルを左方向に補正：false
var centeringPosition = false;

// タイトル表示位置補正オフセット(折りたたみマークを左端または右端に配置した場合)
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;

//--------------------------------------------------------

３．menufolder.js 配置
FC2ブログの管理画面の「ツール」－「ファイルアップロード」を使って、 menufolder.js をFC2ブログにアップロードします。

４．テンプレートの設定１（menufolder.js のインクルード文追加）
FC2ブログの管理画面の「テンプレートの設定」で使用しているテンプレートの「修正」をクリックしてテンプレートの画面を表示します。
「HTMLの編集」で<head>～</head>の間、<title> のすぐ下の位置に下記のタグを追加します。charset 属性は menufolder.js の文字コードを指定してください。

<script type="text/javascript" src="<%url>file/menufolder.js" charset="utf-8"></script>

５．テンプレートの設定２（各メニューに id属性を追加）
小粋空間様テンプレートを使用している場合、サイドメニューの構成は <div class="sidetitle"> と <<div class="side"> がペアで存在すると思います。折りたたみを行いたいサイドメニューのこの部分に idを付与します。付与の仕方は、サイドメニューのタイトルに「id="xxname"」、リストの方に「id="xxlist"」を付与します。"name"と"list"は固定名称です。"xx"の部分にはメニュー毎に異なる名称を付与します（例えばエントリーは"entry"等）。同じ名称が存在すると正常に動作しなくなります。
さらに既存の <div class="sidetitle"> を <div class="sidetitle2"> と変更してください。
下記にエントリーリストに設定した例を示します。この例と同じように各メニューに青色部分の id 属性を追加してください。

<!-- エントリーリスト開始 -->
<div class="sidetitle2" id="entryname">
Recent Entries
</div>

<div class="side" id="entrylist">
<ul>
<!--recent-->
<li><a href="<%recent_link>" title="<%recent_title>"><%recent_title></a></li>
<!--/recent-->
</ul>
</div> <!-- エントリーリスト終了 -->

６．テンプレートの設定３（menufolder.js 実行スクリプトを追加）
折りたたみたい各メニューの下（サンプルは５項のエントリーリスト）に青色部分のスクリプトを追加します。

<!-- エントリーリスト開始 -->
<div class="sidetitle2" id="entryname">
Recent Entries
</div>

<div class="side" id="entrylist">
<ul>
<!--recent-->
<li><a href="<%recent_link>" title="<%recent_title>"><%recent_title></a></li>
<!--/recent-->
</ul>
</div>

<script type="text/javascript">
<!--
FoldNavigation('entry','on',false);
//-->
</script>
<!-- エントリーリスト終了 -->

FoldNavigation() の関数へ渡す値の赤文字で示した entry は、５項で示した"xx"の部分を指定します。その他の値（'on'とfalse）はとりあえずこのままでもOKです。それぞれの意味は、menufolder.js の元記事をご参照下さい。

７．スタイルシート設定
FC2ブログの管理画面の「テンプレートの設定」で今度は「スタイルシートの編集」で下記のスタイルシートを現状のスタイルシートの最後尾に追加します。

.sidetitle2 {
    width: auto;
    margin:3px 0px 0px 0px;
    padding: 0px;
    text-align: center; /* テキスト配置 */
}

.sidetitle2 a {
    width: auto;
}

/* 通常 */
.sidetitle2 a:link,
.sidetitle2 a:visited {
    display: block;
    padding: 2px;
    border: 1px solid #999999; /* 枠線 */
    color:#666666; /* 文字色 */
    background-color:#f6f6f6; /* 背景色 */
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    text-decoration: none;
}

/* マウスポイント時 */
.sidetitle2 a:hover {
    padding: 2px;
    border: 1px solid #999999; /* 枠線 */
    color:#ffffff; /* 文字色 */
    background-color: #999999; /* 背景色 */
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    text-decoration: none;
}

以上を設定後、「保存」をクリックして保存します。
これでうまく導入できていれば、サイドバーのメニューをクリックする事で折りたたみが動作するはずです。