showry's Blog: FC2ブログでサイドメニュー折りたたみスクリプト導入

MovableType用に小粋空間様で公開している「サイドメニュー折りたたみスクリプト」というものがあります。
これはブログサイドにブログパーツなどをたくさん設置していくとサイドメニューだけが間延びした状態になってしまいます。これを各メニュー単位で折りたたんで表示してくれるものです。
本サイトもサイドバーに色々と設置しているので便利に利用させて頂いております。
この素晴らしいスクリプトを公開してくださった小粋空間様には感謝しております。ありがとうございます。

このスクリプトを FC2ブログに導入してみました。
FC2ブログでも小粋空間様テンプレートを使用しているのが前提ですが、同様にテンプレートがあるSeesaaブログでも導入可能です。
（小粋空間様テンプレートを使っていなくてもできるようですが…。）

この記事ではFC2ブログへの導入を例に書いてみます。

１．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>

<li><a href="<%recent_link>" title="<%recent_title>"><%recent_title></a></li>

</ul>
</div> ６．テンプレートの設定３（menufolder.js 実行スクリプトを追加）
折りたたみたい各メニューの下（サンプルは５項のエントリーリスト）に青色部分のスクリプトを追加します。
<div class="sidetitle2" id="entryname">
Recent Entries
</div>

<div class="side" id="entrylist">
<ul>

<li><a href="<%recent_link>" title="<%recent_title>"><%recent_title></a></li>

</ul>
</div>

<script type="text/javascript">

</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;
}以上を設定後、「保存」をクリックして保存します。
これでうまく導入できていれば、サイドバーのメニューをクリックする事で折りたたみが動作するはずです。
※下記の「続きを読む」のリンクは JavaScript が有効な場合に機能します。

続きを読む » "FC2ブログでサイドメニュー折りたたみスクリプト導入"

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

２．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>

<li><a href="<%recent_link>" title="<%recent_title>"><%recent_title></a></li>

</ul>
</div>

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

<div class="sidetitle2" id="entryname">
Recent Entries
</div>

<div class="side" id="entrylist">
<ul>

<li><a href="<%recent_link>" title="<%recent_title>"><%recent_title></a></li>

</ul>
</div>

<script type="text/javascript">

</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;
}

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

« 続きを隠す "FC2ブログでサイドメニュー折りたたみスクリプト導入"

先に（その2）にコメントしちゃった！だって、だって・・・
今回は本当にお世話になりました。まだまだ途中段階ですが、なんとかおかげさまで折りたたみが出来ました。
先生と呼ばせていただきます。ご迷惑でしょうがこれからもきっと頼りにさせていただきますので、こんな劣等生ですが見捨てないでねっ
（その2）は是非とも挑戦したいです。やたらと長いhtmlが辛いです(笑)

Posted by: ととろ | 2006年06月15日 21:28

>> ととろさん
お役に立てて何よりです。
先生ってなんか照れるな。でも実際は小粋空間さまのスクリプトをそのまま導入しているだけなのでホントにすごいのはyujiroさんなんですけどね。
私に出来る事なら微力ですが、ご協力させて頂きます。
それでは、また。

Posted by: showry | 2006年06月17日 01:22

showryさん、こんばんはー♪
yujiroさん、showryさんの記事を参考にさせていただき、やっとyozoんちも、サイドメニューの折りたたみが設定できました。ありがとーございまっす♪m(_ _)m
それにしても、showryさんやととろさんのやり取り以来の念願だったのですが、06年6月のことだったのですね。随分と先延ばしにしちゃいましたよ。┐(￣ヘ￣）┌ ﾔﾚﾔﾚ･･･
勝手ながら、トラバ入れさせていただきました。入るには入ったようなのですが、なぜか、おもいっきり文字化けしています。ご迷惑かけて申し訳ありませんが、よろしく善処くださいませ。m(_ _)m

Posted by: yozo | 2007年01月19日 18:15

>> yozo さん
レスが遅くなってスミマセン。
トラバとコメントありがとうございます。無事サイドバー折りたたみが導入できてよかったですね。

トラバの文字化けの件は、うちの設定がおかしいのか？
とりあえず編集してしまいましたのでご承知おき下さい。それでは今後ともどうぞよろしくお願いします。

Posted by: showry | 2007年01月27日 14:09

showryさん、こんばんはー♪
トラバの件お手数かけました。ありがとーございまっす♪m(_ _)m

追伸：どうして文字化けしちゃったのか、yozoには皆目見当もつかない始末でっす。申し訳ありません　(^｡^;)

Posted by: yozo | 2007年01月29日 18:51

はじめまして、tsudukuと申します。
夜分遅くに失礼します。
小粋空間様経由でこちらのサイトの記事を知りました。始めはテキスト関係の折りたたみをやっていたのですが、画像関係のプラグインになったらタイトルメニューが表示されず、諦めてテキストと同じ方法で作業をしていたのですが、そうすると一つを折りたたむとその下のタイトルメニューまで消えてしまいます。プラグインを諦めたのは、BlogPet俳句とBlogMascotの順序を変えたくなかったからなのでが・・・。何が原因なのかさっぱり解りませんココだよー！って処がありましたら教えて戴きたいと思い、コメントさせて戴きました。よろしくお願いいたします。