小粋空間: 折りたたみアーカイブ

Top ＞ JavaScript ＞折りたたみ [全て開く]

2008年7月22日

Accordion によるサイドメニューの折りたたみ

July 22,2008 2:22 AM
Tag：[Accordion, Customize, Folding, MovableType]
Permalink

JavaScript ライブラリ Accordion によるサイドメニューの折りたたみです。

Accordion は、いくつかのメニューをグループ化し、あるメニュータイトルをクリックすることで、グループ内の特定のメニューリストだけを表示し、他のメニューリストを閉じるライブラリです。下のサンプルへのリンクをクリックして、表示されたサンプルのサイドメニューをクリックしてみてください。

サンプル

ここでは配布テンプレートのサイドバーを例にカスタマイズ方法を紹介します。Movable Type を例にしていますが、JavaScript 外部ファイルのアップロードが可能なブログサービスやブログツールであれば他のテンプレートでも適用可能です。

なお、Accordion は縦方向の折りたたみ以外に、横方向の折りたたみや入れ子にした折りたたみも可能です。

１．ライブラリのダウンロード

Accrodion のサイトにアクセスして、「Download the code!」をクリック。

「Download the code!」をクリック

「Get it here Accordion v2.0」の部分のリンクをクリックすればダウンロードが開始します。必要に応じてドネーションをしてください。

「Get it here Accordion v2.0」のリンクをクリック

２．ライブラリのアップロード

ダウンロードしたアーカイブを展開し、accordion\javascript 配下にある、次の3つのファイルをブログディレクトリにアップロードします。ここでは javascript フォルダごとアップロードします。

javascript/prototype.js
javascript/effects.js
javascript/accordion.js

３．テンプレートの設定（ヘッダー）

ブログ管理画面より、「デザイン」-「テンプレート」-「テンプレートモジュール」-「ヘッダー」を選択し、head の終了タグ直前に下記の script 要素を追加します。prototype.js をすでに使用している場合は、一番上の1行は不要です。

<script type="text/javascript" src="<mt:BlogURL />javascript/prototype.js"></script>
<script type="text/javascript" src="<mt:BlogURL />javascript/effects.js"></script>
<script type="text/javascript" src="<mt:BlogURL />/javascript/accordion.js"></script>
<script type="text/javascript">
Event.observe(window, 'load', loadAccordions, false);
function loadAccordions() {
    var leftAccordion = new accordion('links-left');
    var rightAccordion = new accordion('links-right');
}
</script>
</head>

関数 loadAccordions の中に記述している 2 行のパラメータ（赤色）は、折りたたみのメニュー全体を括っている id 属性を指定します。サンプルテンプレートでは、左サイドバー全体を括っている dl 要素の id 属性 links-left と、右サイドバー全体を括っている dl 要素の id 属性 links-right を、それぞれ指定しています（青色部分）。

<div id="links-left-box">
<dl id="links-left">
...中略...
</dl>
</div>
 
<div id="links-right-box">
<dl id="links-right">
...中略...
</dl>
</div>

４．テンプレートの設定（サイドバー）

ブログ管理画面より、「デザイン」-「テンプレート」-「テンプレートモジュール」-「サイドバー（またはサイドバー2）」を選択し、折りたたみを行いたいサイドバーの class 属性値に accordion_toggle と accordion_content を追加します。
下は「最近のエントリー」に設定した例です。

変更前

<MTIf name="module_recent_entries">
<dt class="sidetitle">
Recent Entries
</dt>
 
<dd class="side">
<ul>
<MTEntries lastn="10">
<li><a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</dd>
</MTIf>

変更後

<MTIf name="module_recent_entries">
<dt class="sidetitle accordion_toggle">
Recent Entries
</dt>
 
<dd class="side accordion_content">
<ul>
<MTEntries lastn="10">
<li><a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</dd>
</MTIf>

５．スタイルシートの変更

ブログ管理画面より、「デザイン」-「テンプレート」-「スタイルシート」を選択し、次の内容を追加します。

.accordion_toggle {
    display: block;
    margin-bottom: 5px;
}
.accordion_toggle_active {}
.accordion_content {
    overflow: hidden;
    padding-bottom: 10px;
}

なお、サンプルでは、次の既存のセレクタから赤色部分を削除して、上記セレクタの設定値の競合を回避しています。

.sidetitle {
    margin-top: 3px;
    border: 1px solid  #666666;
    color: #333;
    background: #f6f6f6;
    text-align: center;
    font-size: 75%;
    line-height: 2.0;
}
 
/* サイドメニュー */
.side {
    margin: 3px 0 20px;
    background: none;
    color: #333;
    font-size: 75%;
    line-height: 1.5;
}

これでブログ全体を再構築して、Accordion による折りたたみが動作すれば完成です。

６．特定のメニューをデフォルトで表示する

特定のメニューをデフォルトで表示する方法は、下記の記事を参照してください。

Accordion で特定のメニューをデフォルト表示する

2008.08.03
loadAccordions の設定を一部見直しました。

2008.09.02
６項を追加しました。

Comments [39] | Trackbacks [0]

2007年12月10日

tabAccordion によるサイドメニューの折りたたみ for WordPress

December 10,2007 12:25 AM
Tag：[Customize, TabAccordion, WordPress]
Permalink

WordPress で tabAccordion によるサイドメニューの折りたたみについて質問を頂きましたので、本エントリーにてカスタマイズを紹介します。

このカスタマイズを行うことで、サイドメニューをサンプルの「最近のエントリー」「カテゴリーリスト」「月別アーカイブリスト」のように、アコーディオン風に折りたたむことができます。

サンプル

設定は当ブログでの配布テンプレート「WordPress テーマ（テンプレート）・3カラム版」用に最適化していますが、CSSを変更すれば他のテンプレートでも応用可能です。

~~注：IE6で正常に動作していないため、別途確認して修正します。~~修正致しました。対処方法は５項へ。

１．3カラムレイアウトの修正

tabAccordion の表示幅が広いため、左サイドバーを右サイドバーの左側に移動し、サンプルと同じカラムレイアウトに変更します。

まず「アーカイブ」・「インデックス」・「シングルポスト」・「ページ」の各テンプレート編集画面を開き、左サイドバーを中央カラムの右側になる位置に移動（赤色を削除して青色を追加）します。

変更前

<?php get_header(); ?>
<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>
 
<!-- center -->
<div id="content">
<div class="blog">
　　　：

変更後

　　　：
<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>
<?php get_sidebar(); ?>
 
<?php get_footer(); ?>

次に「スタイルシート」編集画面を開き、中央カラムの左罫線（赤色部分）を削除します。

/* for 3 columns fixed layout */
.layout-three-column #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #669;
    border-left: 1px solid #669;
    border-right: 1px solid #669;
}

また、フッタに clear プロパティ（青色部分）を追加します。
これはフッタの内容が短い場合、フッタがサイドバーの真下に表示される不具合を回避するためです。

#footer {
    margin: 10px 0;
    padding: 1px 0;
    clear: both;
}

この段階でブログを表示し、カラムレイアウトが正常に変更されたことを確認してください。

２．スクリプトのダウンロード・アップロード

tabAccordion のサイトより、tabAccordion.zip のリンクをクリックしてダウンロード。

解凍した中にある、

scripts/moo.fx.js
scripts/moo.fx.pack.js
scripts/prototype.lite.js

を scripts フォルダごと、WordPress のインストールディレクトリにアップロードしてください。

３．tabAccordion の設定

「スタイルシート」に tabAccordion のスタイル（下記）を追加します。各設定がどの部分に反映されるかは、コメント（/* ～ */）を参考にしてください。

/* タブ全体 */
#wrapper {
    float: left;
    width: 338px;
    margin: 0 auto;
    padding: 20px 0 0 18px;
}
/* リスト表示部分 */
.boxholder{
    clear: both;
}
/* タブ */
.tab{
    float: left;
    width: 110px;
    _width: 106px;
}
/* タブに表示するタイトル */
.tabtxt{
    margin: 0 1px 0 0;
    padding-bottom: 2px;
    border: 1px solid  #666;
    color: #444;
    background: #f6f6f6;
    text-align: center;
    font-size: 75%;
    line-height: 2.0;
}
/* リストのタイトル */
#wrapper .box h2 {
    margin: 3px 0;
    font-size: 83.3%;
    font-weight: bold;
}
/* リストの内容 */
#wrapper .box ul {
    font-size: 83.3%;
}
/* タブのリンク */
.tab a,
.tab a:link,
.tab a:visited {
    color: #444;
    text-decoration: none;
}
.tab a:hover {
    color: #069;
    text-decoration: underline;
}
/* リストの内容（p要素を用いた場合） */
#wrapper p {
    margin: 0;
    padding: 5px 0;
    font-size: 75%;
    line-height: 1.5;
    /*text-align: justify;*/
}
/* リストマーク表示 */
.box ul {
    padding-left: 16px;
}
html > body .box ul {
    padding-left: 14px;
}
.box ul li {
    magin-left: 6px;
}

「ヘッダー」テンプレートの head 終了タグの前に下記を追加します。これは tabAccordion スクリプトを起動するための設定です。

<script type="text/javascript" src="<?php bloginfo('wpurl'); ?>/scripts/prototype.lite.js"></script>
<script type="text/javascript" src="<?php bloginfo('wpurl'); ?>/scripts/moo.fx.js"></script>
<script type="text/javascript" src="<?php bloginfo('wpurl'); ?>/scripts/moo.fx.pack.js"></script>
<script type="text/javascript">
function init(){
  var stretchers = document.getElementsByClassName('box');
  var toggles = document.getElementsByClassName('tab');
  var myAccordion = new fx.Accordion(
  toggles, stretchers, {opacity: false, height: true, duration: 600}
  );
  //hash functions
  var found = false;
  toggles.each(function(h2, i){
    var div = Element.find(h2, 'nextSibling');
    if (window.location.href.indexOf(h2.title) > 0) {
      myAccordion.showThisHideOpen(div);
      found = true;
    }
  });
  if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>

赤色で示した部分は、次に設定する tabAccordion 本体の中にある (X)HTML 要素あるいは class 属性名と対応しています。(X)HTML マークアップを変更する場合は、上記の赤色部分も併せて変更してください。

最後に tabAccordion で表示される本体（下記）を、「サイドバー2」の先頭に追加します。カラムレイアウトの構造上、先頭に追加しないとレイアウトが崩れますのでご注意ください。

<div id="wrapper">
  <div id="tabcontent">
  <div class="tab"><h2 class="tabtxt" title="first"><a href="javascript:;">Entries</a></h2></div>
  <div class="tab"><h2 class="tabtxt" title="second"><a href="javascript:;">Categories</a></h2></div>
  <div class="tab"><h2 class="tabtxt" title="third"><a href="javascript:;">Archives</a></h2></div>
  <div class="boxholder">
    <div class="box">
      <h2>Recent Entries</h2><ul><?php get_archives('postbypost', '10','custom' ,'<li>' ,'</li>'); ?></ul>
    </div>
    <div class="box">
      <h2>Categories</h2><ul><?php wp_list_cats('sort_column=name&optioncount=1&hide_empty=1'); ?> </ul>
    </div>
    <div class="box">
      <h2>Archives</h2><ul><?php wp_get_archives('show_post_count=true'); ?></ul>
    </div>
  </div>
</div>
</div>
<script type="text/javascript">
Element.cleanWhitespace('tabcontent');
init();
</script>

赤色で示した部分は必ず同じ名称にしてください。

なお、表示内容はお好みにカスタマイズしたいと思いますので、タグの構造を簡単に説明しておきます。

<div id="wrapper"> ← tabAccordion 全体
  <div id="tabcontent">
 
　　↓ タブ表示部分
  <div class="tab"><h2 class="tabtxt" title="first"><a href="javascript:;">[1番目のタブタイトル]</a></h2></div> 
  <div class="tab"><h2 class="tabtxt" title="second"><a href="javascript:;">[2番目のタブタイトル]</a></h2></div>
  <div class="tab"><h2 class="tabtxt" title="third"><a href="javascript:;">[3番目のタブタイトル]</a></h2></div>
 
　　↓ タブをクリックした時に表示される部分
  <div class="boxholder">
    <div class="box">
        [1番目に表示するリストの内容]
    <div class="box">
        [2番目に表示するリストの内容]
    </div>
    <div class="box">
        [3番目に表示するリストの内容]
    </div>
  </div>
 
</div>
</div>
 
↓ tabAccordion スクリプトを起動
<script type="text/javascript">
Element.cleanWhitespace('tabcontent');
init();
</script>

青色のカッコ書きで示した部分は適宜変更可能ですので、お好みのリストを表示させてください。

また、各 ID 属性、class 属性名は変更可能ですが、ひとつ前のリストにある名称および、スタイルシートと名称が一致するようにしてください。

４．折りたたみ速度を変更する

速度を変更する場合は、「ヘッダー」テンプレート直前に設定した、

toggles, stretchers, {opacity: false, height: true, duration: 600}

の赤色部分を変更してください。

５．IE6 で正常に動作しない場合の対処

ページの先頭に XML 宣言が記述されている場合、IE6 では正常に動作しないようです。IE6 で動作させたい場合は XML 宣言を削除してください。

2007.12.12
script 要素の内容を修正しました。

Comments [18] | Trackbacks [1]

2007年4月27日

「サイドメニューの折りたたみ」でメニューリスト別に状態保持を設定する

April 27,2007 1:17 AM
Tag：[Customize, JavaScript]
Permalink

「メニューリスト別に折りたたみ状態の保持を設定できないでしょうか」というご要望を頂きましたので、折りたたみスクリプトを修正し、メニューリスト別に状態保持を設定できる（厳密には無効化する）ようにしました。

１．概要

改めて説明致しますと、当サイトで配布しているメニューリストの折りたたみスクリプト menufolder.js には、リストの開閉状態をクッキーを利用して保持し、ブラウザ再起動・ページリロードや他のページにジャンプした際に同じメニューリストがある場合等、前回と同じ状態で表示するという機能があります。

これまでも menufolder.js の設定をカスタマイズすることで状態保持を無効にすることができましたが、スクリプト単位でしか有効・無効を設定できなかったため、今回の改修によりメニューリスト単位で設定できるようにしました。

新しいスクリプトをご利用になる場合、下記の download のリンクよりスクリプトのページにジャンプし、最新版の menufolder.js をダウンロードしてください。

download

２．メニューリストの状態保持を無効にする

ここではエントリーリストを例にします。下のリストはこれまでの設定内容です。

<div class="sidetitle" id="entryname">
Recent Entries
</div>
<div class="side" id="entrylist">
<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div>
 
<script type="text/javascript">
FoldNavigation('entry','on',false);
</script>

このリストの折りたたみ状態を保持したくない場合は、起動部分のスクリプト（赤色）の FoldNavigation の部分を FoldNavigationStateless（青色部分）に書き換えてください。

<div class="sidetitle" id="entryname">
Recent Entries
</div>
<div class="side" id="entrylist">
<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div>
 
<script type="text/javascript">
FoldNavigationStateless('entry','on',false);
</script>

状態を保持する場合はこれまでの設定と変わりません。

３．全てのメニューリストの状態保持をまとめて無効にする

既存機能ですが、全てのメニューリストの状態保持を無効にしたい場合は menufolder.js の中ほどにある

//--------------------------------------------------------
// 状態保持用設定データ
//--------------------------------------------------------
 
// 状態保持フラグ
// 有効にする：true
// 無効にする：false
var holdState = true;

の赤色部分を

var holdState = false;

に変更してください。
起動関数は FoldNavigation で構いません。

Comments [9] | Trackbacks [3]

2007年4月19日

「追記文章の折りたたみ 2.0」でIE7の不具合を解消する

April 19,2007 1:33 AM
Tag：[CSS, JavaScript, scriptaculous]
Permalink

「追記文章の折りたたみ 2.0」というカスタマイズで scriptaculous の Effect.BlindDown および Effect.BlindUp を利用していますが、「IE7.0では追記部分がずれて表示される」という情報を頂きました。また、折りたたみリンクにある実体参照していない文字「«」「»」の文字化けも同時に確認されていますので、このエントリーで解消方法を示します。

とりあえず IE7 をお持ちの方はサンプルの修正前後の折りたたみ動作をご確認ください。

追記文章の折りたたみ 2.0 サンプル（修正前）

追記文章の折りたたみ 2.0 サンプル（修正後）

ここでは Movable Type をサンプルにしていますが、FC2 ブログ版の「追記文章の折りたたみ 2.0 for FC2 ブログ」も同様の対処が必要と思われます。

１．表示がずれる不具合の解消

確認したところ、Effect する対象のオブジェクト（この場合は追記部分全体）を括る要素や親要素に margin が指定されている場合、IE7では margin 指定が無効になるケースがあるようです。

Movable Type のデフォルトテンプレートではこの事象が発生しなかったので、CSS の差分を確認したところ、公開テンプレートについては下記のように青色の width プロパティを設定することで回避できました（WindowsXP + IE7/Firefox2/Opera9 で確認しています）。XML宣言の有無は関係ありません。

/* エントリー */
.entry {
    width: auto;
    margin: 0 5px 15px;
    color: #36414d;
    background: #ffffff;
    font-size: 12px;
    line-height:150%;
    word-break: break-all;
}
.entry-content {
    width: 100%;
}

注：.entry の width プロパティに 100% を与えると他の不具合が生じます。

２．文字化けの解消

折りたたみリンクにある「«」や「»」は実体参照しないと IE7 では文字化けが発生します。それぞれ「«」および「»」に修正してください。

以上です。
なおすべてのケースを調査している訳ではないので、適用しているテンプレートの CSS によって事象や対処が異なるかもしれません。

Comments [2] | Trackbacks [0]

2007年3月 8日

追記文章の折りたたみ Web2.0

March 8,2007 12:30 AM
Tag：[Customize, MovableType]
Permalink

Movable Type のオーソドックスなカスタマイズのひとつ、「追記文章の折りたたみ」の Web2.0 版カスタマイズをご紹介します。

１．特徴

JavaScript エフェクトライブラリ script.aculo.us（スクリプタキュラス）を利用し、「続きを読む」リンクをクリックすると追記文章をスライドダウンで表示します。
JavaScript が無効の場合はエントリー・アーカイブにジャンプします。
「続きを隠す」リンクは追記文章の前後に表示されますので、長い追記文章でも折りたたみやすくなっています。
ライブラリファイルを編集せずに折りたたみ速度の変更が可能です。

２．サンプル

追記文章の折りたたみ 2.0 サンプル

３．script.aculo.us のインストール

script.aculo.us のページの「get it already!」の下にある「Downloads page」のリンクをクリック。

script.aculo.us のページ

次のページで「current version」の下にある「scriptaculous-js-1.7.0.zip（または拡張子が tar.gz / tar.bz2）」のリンクをクリック。バージョン 1.7.0 は2007年3月現在です。

script.aculo.us のページ

ダウンロードアーカイブを解凍して内容をサーバのメインページと同じディレクトリにアップロード。ここでは下記のような配置になっていることを前提に話を進めます。

/scriptaculous
　　　/lib
　　　　 　prototype.js
　　　/src
　　　　　 controls.js
　　　　 　effects.js
　　　　 　scriptaculous.js

scriptaculous というディレクトリは解凍後のディレクトリ名を変更しています。lib と src はアーカイブのままの構成です。src 配下にはここで利用しないファイルも含まれていますので、まとめてアップロードしておくといいでしょう。

４．テンプレートの修正1（HTMLヘッダ修正）

折りたたみをしたいテンプレートの編集画面を開き、</head> の直前に下記を追加します。

<script type="text/javascript" src="<$MTBlogURL$>scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>scriptaculous/src/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<$MTBlogURL$>scriptaculous/src/effects.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>scriptaculous/src/controls.js"></script>
 
<script type="text/javascript">
Effect.DefaultOptions = {
  transition: Effect.Transitions.sinoidal,
  duration:   0.5,   // seconds
  fps:        60.0,  // max. 60fps due to Effect.Queue implementation
  sync:       false, // true for combining
  from:       0.0,
  to:         1.0,
  delay:      0.0,
  queue:      'parallel'
}
function ajaxShowHide(entryID) {
  element = $('Text' + entryID);
  if(element.style.display == 'none') {
    options = {
        afterFinish: function(effect) {
            $('Link' + entryID).firstChild.innerHTML = '≪ 続きを隠す';
            Element.show(effect.element);
        }
    };
    Effect.BlindDown(element, options);
  } else {
    options = {
        afterFinish: function(effect) {
            $('Link' + entryID).firstChild.innerHTML = '続きを読む ≫';
            Element.hide(effect.element);
        }
    };
    Effect.BlindUp(element, options);
  }
}
</script>

6行目以降は script 開始・終了タグを外して外部ファイルにしても構いません（その場合インクルードするための script タグは effct.js をインクルードしている script 要素の下に記述してください）。

折りたたみ速度を変更する場合は、

duration:   0.5,   // seconds

の数値を変更します。0.5 はスライドアップ・スライドダウンに 0.5 秒かかることを意味します。
この Effect.DefaultOptions = { … } の部分は scriptaculous ライブラリの設定の上書きですので、速度を変更しない場合はここから削除しても構いません。ちなみにデフォルトは1秒に設定されています。

５．テンプレートの修正2（追記文章表示用 MT タグ修正）

追記部分を修正します。デフォルトテンプレートと公開テンプレートの変更例を示します。

変更前（デフォルトテンプレート）

<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
<p class="entry-more-link">
   <a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>" &raquo;</a>
</p>
</MTIfNonEmpty>

変更前（公開テンプレート）

<MTEntryIfExtended>
<div class="entry-more">
   <a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>"</a>
</div>
</MTEntryIfExtended>

変更後（デフォルトテンプレート／公開テンプレート共通）

<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
<div id="Link<$MTEntryID$>" class="ajax-entry-more-link"><a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="ajaxShowHide('<$MTEntryID$>');return false;">続きを読む ≫</a></div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
<div class="ajax-entry-more-link"><a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="ajaxShowHide('<$MTEntryID$>');return false;">≪ 続きを隠す</a></div>
</div>
</MTIfNonEmpty>

エントリー・アーカイブは下記の内容を利用してください。JavaScript が OFF でも追記部分が読めるよう、noscript タグで追記を表示するようにしています。

変更後・エントリーアーカイブ（デフォルトテンプレート／公開テンプレート共通）

<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
<div id="Link<$MTEntryID$>" class="ajax-entry-more-link"><a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="ajaxShowHide('<$MTEntryID$>');return false;">続きを読む ≫</a></div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
<div class="ajax-entry-more-link"><a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="ajaxShowHide('<$MTEntryID$>');return false;">≪ 続きを隠す</a></div>
</div>
<noscript>
<div id="more" class="entry-more"><$MTEntryMore$></div>
</noscript>
</MTIfNonEmpty>

上記のスクリプトは貼り付けた後、編集しても構いませんが、div 開始タグと a 開始タグの間に改行を含まないようにしてください（Firefox で正常に動作しなくなります）。

６．CSS

「続きを読む」「続きを隠す」のリンクに class 属性 ajax-entry-more-link を与えています。必要に応じて設定してください。

.ajax-entry-more-link {
    /* 任意のプロパティを設定 */
}

７．その他

HTML ページの1行目に XML 宣言がある場合、IE6 では動作がややスムーズではありません（開く瞬間と閉じた瞬間にビクッとなります）。サンプルの公開テンプレートは XML 宣言を外しています。

2007.03.08 追記
JavaScript ライブラリのインクルード順を変更しました（エラーになるため）

Comments [34] | Trackbacks [4]

2006年8月25日

サイドメニューの折りたたみマークに画像を使用する

August 25,2006 12:13 AM
Tag：[Customize, MovableType]
Permalink

サイドメニューの折りたたみマークに画像を使用するサイドメニューの折りたたみカスタマイズで、折りたたみマークに画像（img タグ）を使用できるよう、スクリプトを改変致しました。

とりあえずサンプルを作成しましたのでお試しください。表示されたページの左サイドバーにある「Recent Entries」が対象部分です。

改変したスクリプト menufolder.js は下記のリンクよりダウンロードできます。バージョン 6.01（または 6.01en）以降が対応版です。

download

以下、折りたたみマークに画像を用いる場合の設定方法です。スクリプトの基本的な設定内容につきましては、マニュアルまたはサイドメニュー折りたたみの各記事を参照願います。

なお、タイトル枠全体に画像を用いるカスタマイズは「サイドメニューの折りたたみに画像を使用する」を参照ください。

１．スクリプト menufolder.js の設定

menufolder.js の中間辺りにある設定項目で、下記の赤色部分

// 折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
// 画像を設定する場合は右辺を '<img src="[画像のURL]" />'; と書いてください
var openMarkForSideBarMenu  = '▽';
var closeMarkForSideBarMenu = '△';

を

// 折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
// 画像を設定する場合は右辺を '<img src="[画像のURL]" />'; と書いてください
var openMarkForSideBarMenu  = '<img src="images/open.gif" />';
var closeMarkForSideBarMenu = '<img src="images/close.gif" />';

という具合に書き換えてください。画像ファイルを menufolder.js と同じディレクトリに配置すれば、パスの記述は不要です。

２．CSSの追加

メニュータイトルや画像サイズにもよりますが、CSS に

.sidetitle img {
    vertical-align:middle;
}

という設定を追加すれば、折りたたみマーク画像の垂直位置が、テキストタイトルとある程度揃うようになります。

ちなみにサンプルの設定はもう少しアレンジして、

.sidetitle img {
    vertical-align:middle;
    _vertical-align:bottom;
    margin-bottom:0;
    _margin-bottom:1px;
}

としています。

Comments [16] | Trackbacks [1]

2005年8月24日

サイドメニューの折りたたみ（v5.0：ゆっくり折りたたむ）

August 24,2005 11:56 PM
Tag：[Ajax, Customize, Folding, JavaScript, MovableType, SideMenu]
Permalink

Google Mapsや Googleサジェストで一躍有名になった Ajax（Asynchronous JavaScript+XML：エイジャックス）ですが、Ajax用JavaScriptライブラリを利用してサイドメニューをゆっくり折りたためるようにしてみました。
公開テンプレートを用いたサンプルを作りましたので、実際の折りたたみ動作をご確認ください。固定3カラム・可変3カラムを右上のリンクで切り替えられるようにしています。

ゆっくり折りたたむサンプル

本カスタマイズで参考にさせていただいたのは下記のサイトです。ありがとうございました。

Ogawa::Memoranda："Subscribe with Feedbringer" Bookmarklet
（FEEDBRINGERを知るきっかけ）
FEEDBRINGER
nekobara カルゴルニア・ジョン：Ajaxサンプル with Google Maps

なお、本カスタマイズはサイドメニューの折りたたみ（v4.0）を前提にカスタマイズしていますので、新たにサイドメニューの折りたたみを導入される場合はサイドメニューの折りたたみ（v4.0）のカスタマイズを行ってください。
また折りたたみマークで折りたたむようにしている場合の動作は未確認ですので予めご容赦ください。

１．Ajax用JavaScriptライブラリのダウンロード

Scriptaculous のページへジャンプし（接続できない場合は２項へ進んでください）、上の方にある downloads というタブをクリックします。次ページの右側にある Archived Versions の1.1b1 の zip または tar.gz のリンクをクリックしてください。なお他のバージョンでは動作しませんのでご注意ください。
ダウンロードしたアーカイブを解凍し、src というディレクトリに

controls.js
effects.js
dragdrop.js

の3つのファイルがあることを確認してください。この中から controls.js と effects.js を使います。

次に、downloads タブをクリックした次のページの本文にある Prototype JavaScript library のリンクをクリックし、次のページの Just the .js, please というリンクをクリックして prototype-1.3.1.js をダウンロードします（バージョンは2005年8月24日現在）。保存する時、または保存後、ファイル名を

prototype.js

に修正してください。

２．Ajax用JavaScriptライブラリのダウンロード

（１項が×の場合）

１項で Scriptaculous に接続できない場合は、下記のページより取得してください。

Ruby on Rails：/spinoffs/scriptaculous/

取得するのは下記の3ファイルです。

prototype.js
controls.js
effects.js

prototype.js は lib/ のリンクをクリックして、次のページの prototype.js をクリックします。次ページでソースが表示されますのでマウスコピーし、任意のエディタで新規ファイルを作り、そこにペーストして prototype.js というファイル名で保存します（コピーする範囲に注意してください）。文字コードはブログと同じ文字コードが無難です。
他の3ファイルは、最初のページに戻って src/ のリンクをクリックします。後は prototype.js と同様の方法で保存してください。

３．menufolder.js のダウンロード（Ver4.00以下の方のみ）

下記の download をクリックして、次のページで menufolder.js をクリックして menufolder.js（Ver5.00）をダウンロードしてください。

download

４．スクリプトの修正

デフォルトの状態では正常に動作しない（折りたたみタイトルが変に表示される）ため、以下のいずれか片方のみを実施してください。修正方法は妥当でないかも知れませんので予めご容赦ください。

４．１ protptype.js を修正する

任意のエディタで prototype.js を開き、「show: function」で検索し、そのちょっと下の部分に青色の「block」を追加します。

show: function() {
  for (var i = 0; i < arguments.length; i++) {
    var element = $(arguments[i]);
    element.style.display = 'block';
  }
},

４．２ menufolder.js を修正する

任意のエディタで menufolder.js を開き、一番下から 50 行ほど戻ったところにある

        Element.show(effect.element); // prototype.js 修正要
//      element.style.display = 'block';

の赤色部分を削除して、その上の行の先頭に、青色のように

//        Element.show(effect.element); // prototype.js 修正要
      element.style.display = 'block';

とコメントマークを追加します。

５．スクリプトのアップロード

上記の4ファイルをローカル・サイト・パス（index.html が置かれているディレクトリ）にアップロードします。
なお、menufolder.js については６項の設定を行った後でアップロードしてください。

６．テンプレートの修正

折りたたみを行いたい各テンプレートの <head> ? </head> の部分に青色部分を追加します。

<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>effects.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>controls.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>menufolder.js"></script>

７．折りたたみ速度の設定

menufolder.js では全てのメニューに対して一括してゆっくりにする方法と個別に設定する2通りの方法を用意しています。

７．１全てのメニューに対して一括してゆっくりにする

menufolder.js の下記の赤色部分を slow に修正してください。デフォルトは normal になっています。テンプレートで FoldNavigation を起動している部分の変更は不要です。

//-----------------------
// 折りたたみスピード
//-----------------------
// 通常：'normal'
// 遅い：'slow'
var speed = 'slow';

７．２個別に設定する

ゆっくり折りたたみたいメニューリストの下に下記の記述を追加します。

<script type="text/javascript">
<!--
FoldNavigationSlowly('idName','initState',viewListNumber);
//-->
</script>

すでにご利用中の方は

FoldNavigation('idName','initState',viewListNumber);

の FoldNavigation を FoldNavigationSlowly に変更してください。
赤色部分については menufolder.js マニュアルの３項を参照してください。

設定が終わったらテンプレートを保存・再構築してください。設定が正常にできていれば折りたたみ動作が変わっているはずです。

８．折りたたみスピードを変更する

サンプルの折りたたみ速度はデフォルトよりやや速くしています。速度を変更する場合は、effect.js の下記の赤色部分を変更します。

Effect.Base.prototype = {
  setOptions: function(options) {
    this.options = Object.extend({
      transition: Effect.Transitions.sinoidal,
      duration:   1.0,   // seconds
      fps:        25.0,  // max. 100fps
      sync:       false, // true for combining
      from:       0.0,
      to:         1.0
    }, options || {});
  },

単位は「秒」で、デフォルトは「1.0」（つまり1秒）なので、これを「0.5」等に修正すれば動作が早くなります。

９．その他

公開テンプレートはサンプルでご覧の通り正常に動作します。BlogPeople 等のリンクリストを overflow 指定でスクロールさせている場合も問題ありません。
折りたたみ動作で開く瞬間と閉じる瞬間に点滅するような場合は1行目の

<?xml version="1.0" encoding="utf-8"?>

を削除してみてください（取り除くことで正常に動作することを確認しています）。

またサブカテゴリーリストの折りたたみは不具合があるようです（原因不明）。また他のCSSを用いられている場合、設定？によってスムーズに動作しない可能性があります（原因は究明できておりません）ので予めご容赦ください。
また折りたたむ動作はメニューリストの上下 margin が少ない方がスムーズに動くようです。

以上です。

2005.08.25
折りたたみ時に発生する不具合を解消するための４項を追加しました（既知の事象でしたが本文に盛り込むのを忘れておりました、すいません）。

2005.11.01
折りたたみ時にメニューリストが点滅する場合の対処を９項に追記しました。

2007.10.25
６項のソースコードについて、JavaScript エラー回避のため、controls.js と effects.js の順序を入れ替えました。

Comments [75] | Trackbacks [25]

2005年6月24日

サイドメニューの折りたたみに画像を使用する

June 24,2005 11:58 PM
Tag：[CSS, Customize, Folding, Image, JavaScript, MovableType, SideMenu]
Permalink

サイドメニューの折りたたみ（v4.0）でブロックレベル要素指定による折りたたみをご紹介しましたが、タイトル部分の背景やロールオーバーした時に任意の画像を配置するカスタマイズです。簡単です。

まず、タイトル部分に通常表示で使用する画像（hogehoge1.gif）とロールオーバー時に使用する画像（hogehoge2.gif）の2つを用意します。例えば下記のようなものです。

：通常表示用（hogehoge1.gif）

：ロールオーバー用（hogehoge2.gif）

これを任意のディレクトリ（images）にアップロードします。

次に、前述のエントリーにある、３項のスタイルシートの設定を下記のように変更します。

/* 通常 */
.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;
    background-image:url(images/hogehoge1.gif);
}
 
/* マウスポイント時 */
.sidetitle2 a:hover {
    padding: 2px;
    border: 1px solid #999999; /* 枠線 */
    color:#ffffff#666666; /* 文字色 */
    background-color: #999999; /* 背景色 */
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    text-decoration: none;
    background-image:url(images/hogehoge2.gif);
}

これで下記のような動作をするようになります（サンプル表示用に設定は若干変えています）。

サンプル

上記は配置する画像のサイズがタイトル部分と同じ大きさの場合です。次のように細い縦長の画像（hogehoge3.gif：みにくくてすいません）

を繰り返し表示する場合は、

background-image:url(images/hogehoge3.gif);
background-repeat:x;

とします。これで

という表示になります。ロールオーバー用の画像も同じ方法で作れます。この方法は横方向のサイズが可変になる場合に便利です。

Comments [2] | Trackbacks [0]

2005年4月 1日

サイドメニューの折りたたみ（v4.0）

April 1,2005 10:00 PM
Tag：[Customize, Folding, JavaScript, MovableType, SideMenu]
Permalink

お知らせ：現在 Ver5.0 をリリースしています。

これまでの折りたたみスクリプト menufolder.js を大幅に改造してバージョンアップしました。今回の大きな追加機能はブロックレベル要素指定によるリンクです。つまり画像のように、メニュータイトル枠全体をリンクとして設定することができます。これまでは折りたたみマークを狙ってクリックする必要がありましたが、この設定に変更することで操作性が向上すると思われます。ブロックレベル要素指定＋折りたたみマークの表示も可能ですし、これまでの折りたたみマークのみへのリンクも可能です。
またリスト数を計算するタグは a タグのみでしたが、ご近所のサイトでメニューリストをツリー化される方が増えてこられましたので、任意のタグ（li 等）を指定して計数することも可能にしました。その他設定データを追加して表示位置を微調整できるようにしています（役立つかどうかは分かりませんが）。

スクリプトの設定内容はバージョンアップ毎にエントリーに記すと大変なので、下記のページにまとめてみることにしました。

menufolder.js マニュアル

バージョンアップに伴って新たに追加となったデータは次の通りです。

linkType：リンク方式
displayMark：リンクマーク表示
modificationFlag：タイトル表示位置補正フラグ
offsetForTitleAndLinkNumber：タイトルとリスト数のスペース
preMarkForSubCategory：サブカテゴリー用折りたたみマーク挿入位置
offsetForTitleAndMark：サブカテゴリーのタイトルとマークのスペース

これまでのデータはそのまま残しています。既存の折りたたみマークのリンクでタイトル表示位置を補正している場合は、新たに追加した modificationFlag を ture に設定してください。
他の設定については先のマニュアルをご覧頂くとして、ここではブロックレベル要素指定によるリンクのカスタマイズについて記したいと思います。

１．menufolder.js ダウンロード

下記のリンクをクリックするとスクリプトのページへジャンプします。そこで menufolder.js をクリックし、同じファイル名でご自身のPCに保存してください。

download

本スクリプトはUTF-8で記述していますので、ブログで使用している文字コードがUTF-8以外の場合（Shift_JIS/EUC-JP等）は保存後、文字コードを適宜変更して再保存してください。この問題につきましては js ファイルのインクルード時、script タグにcharset 属性を指定することで文字コードを変更しなくても良いという記事を見つけましたが動作実績がありませんのでこのような記述にしています。scriptタグの設定については３項に記してますのでお試し頂ければ幸いです。

２．menufolder.js の設定

menufolder.js を更新される方は大変申し訳ありませんが現在設定されている内容を比較して再設定してください。なおこれまで用いたデータ名はそのまま使っておりますので、データ名で検索されると効率良く更新できると思います。
ブロックレベル要素指定によるリンクを有効にするには linkType を 'block' に設定してください。さらにその状態で折りたたみマークを表示させる場合は displayMark に true を設定します。なお本機能では折りたたみマークはタイトル横になります。つまり左右いずれかの端に設定することはできませんので予めご了承ください（スタイルシートを修正して左右いずれかに位置を揃えた表示にすると綺麗だと思います）。設定イメージを示しておきます。

折りたたみマークを表示しない場合

// リンク方式
// 折りたたみマークにリンク付与：'unblock'
// メニュータイトル枠全体にリンク付与 'block'
var linkType = 'block';
　　　　：
// 折りたたみマーク表示(メニュータイトル枠全体をリンクにする場合のみ有効)
// 表示する：true
// 表示しない：false
var displayMark = false;
 
// 折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
var openMarkForSideBarMenu = '';
var closeMarkForSideBarMenu = '';

折りたたみマークを表示する場合

// リンク方式
// 折りたたみマークにリンク付与：'unblock'
// メニュータイトル枠全体にリンク付与 'block'
var linkType = 'block';
　　　　：
// 折りたたみマーク表示(メニュータイトル枠全体をリンクにする場合のみ有効)
// 表示する：true
// 表示しない：false
var displayMark = true;
 
// 折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
var openMarkForSideBarMenu = '▽';
var closeMarkForSideBarMenu = '△';

なお折りたたみマークを表示しない場合は displayMark を false にすればその下のマークは無視されますが、SWEET WATER Web Server さんより頂いたコメントの通り Firefox では表示に不具合がある（スクリプトのバグ？）ようですので、その下の openMarkForSideBarMenu / closeMarkForSideBarMenu の設定もリストのように '' にしておいてください。

設定が終わったら保存してローカル・サイト・パス（index.htmlと同じ位置）にアップロードまたは配置してください。

３．スタイルシート追加

スタイルシート（styles-site.css）に下記を追加します。class 属性はとりあえず sidetitle2 としていますが、任意の名称で構いません。

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

設定が終わったら保存・再構築してください。うまくできればマウスポイント時に画像のような反転を行います。自分で言うのも何でですがポイント時は地味な配色なので、適宜お気に入りの色に修正ください（色変更に必要な箇所をコメントで示しています）。全体のスタイルもご自由に変更くださって結構です。

４．テンプレート修正

公開テンプレートの場合、折りたたみを行いたいテンプレートの各メニュータイトルの設定部分に青字の「2」を追加します（class 属性を sidetitle2 としたのはこのためです）。

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

設定が終わったら保存・再構築してください。
なお折りたたみが不要なメニューについてはこの設定を行わないでください。つまり折りたたまないメニューはこれまでのスタイルを用いる必要がありますので、既存の class 属性を流用するのはやめましょう。

５．動作の不具合について

原因は不明ですが、左サイドバー上部にカレンダーが表示されていない場合、左サイドバーのメニューについては文字の部分しかリンクが適用されません。確認したところ、table タグの caption が設定されていればそれ以降の設定についてブロック全体がリンクになるようです。

以上です。それぞれの設定に矛盾があるとタイトル部分の中央に折りたたみマークだけが表示されたり、タイトル自体の表示が崩れる場合があります。そのような場合、linkType と適用するスタイル、それから class 属性が適正であるかご確認ください。

本サイトでは2005/3/31よりこの設定に変更して運用中です。不具合等ございましたらご連絡頂けると幸いです（明快な回答はできないかもしれませんが）。

2005.04.02 追記
Firefox の場合の不具合および設定データのリストを追加しました。またスタイルシートについては色変更に必要な箇所をコメントで示しました。

Comments [231] | Trackbacks [80]

2004年12月 6日

サイドメニュー折りたたみスクリプト（cookie等改善版）

December 6,2004 2:00 AM
Tag：[]
Permalink

サイドメニュー折りたたみスクリプトを改版致しました。
現在公開中のサイドメニュー折りたたみスクリプト（menufolder.js）は、

cookie消費が大きい
カスタマイズ性がよくない

という問題がありました。cookieは「1つのコンピュータに対し最大20までしか保持できない」という仕様です。現状の折りたたみスクリプトでは1メニューに対して1cookieを利用しているため、20近いメニューに折りたたみを設定している場合、同一コンピュータで使用している他のcookieが無効になる可能性があります。
今回は cookie を最大2個しか使用しない方式に変更致しました。なお本方式は日頃お世話になっている facet-divers さんよりアドバイス頂きました。この場をお借りしてお礼申し上げます。ありがとうございました。

またカスタマイズ性については、例えばBlogPeople等のメニューでリンク数を表示する場合、aタグを数えてからバナー等の不要なリンク数分をスクリプト内で減算するようにしています（下リスト参照）。

if (idName == "link1") {
    counter = objItems.length - 3;
} else if (idName == "link2") {
　　　　　　　　　：

が、複数のリンクを追加する場合、ここに id 属性分のプログラムを新たに実装しなければならないため、この設定方法はJavaScriptを書けない方には障壁になります。またその他の設定についてもプログラムを変更しなければならない実装になっており、その部分のカスタマイズについては説明を省いていました。さらに途中で状態保持や動作遅延対処の機能追加を行った関係で、最初からエントリーを追ってカスタマイズを進めて頂くのも非効率的に感じておりました。今回の改版では他の設定も含めてプログラムの先頭で提供する機能のカスタマイズが可能な方式に改善しております。
そういう訳で手順を含めてこのエントリーにまとめました。はじめてご利用になる方もこちらを参照頂ければ幸いです。

折りたたみスクリプトの主な仕様は下記の通りです。

サイドバーのメニューを折りたたむことができます。
折りたたみマークをメニュータイトル部分に表示します。折りたたみマークはタイトルの左右または左端・右端のいずれかに表示します。表示位置は設定により切り替えられます。また折りたたみマークは任意の文字に変更できます。
メニュー内のリスト数をタイトル部分に表示することができます。リスト数表示・非表示は設定によりメニュー単位で切り替えられます。リスト数はタイトルの左右に表示します。表示位置は設定により切り替えられます。またリスト数を"（）"や"[]"等の任意の文字で括ることができます。
cookieを利用して折りたたみ状態を保持することができます。また状態保持の有効・無効を設定により切り替えられます。
サブカテゴリーのリスト数表示を li タグ数で収集します。また従来の一括表示での収集方法を設定により切り替えられます。

以下設定手順です。なおこれまでの menufolder.js をご利用下さっている方でご利用になる場合、基本的に必要な作業としては新しい menufolder.js への差し替えと２項の設定です。ただし文字コードや id 属性名によっては他の項目についても変更が必要になります。また念のためこれまでの js ファイルもバックアップとして保存しておいてください。

１．menufolder.js ダウンロード

download

２．menufolder.js の設定内容を修正

ブログの設定内容に合わせてファイルの先頭にある下記の赤字部分を修正します。

// サイドメニュー用折りたたみマーク
var openMarkForSideBarMenu  = '▽';
var closeMarkForSideBarMenu = '△';
 
// 折りたたみマーク挿入位置
// タイトル前に折りたたみマークを配置：true
// タイトル後に折りたたみマークを配置：false
// 左端または右端に折りたたみマークを配置(スタイルシートの設定が必要です)：true
var preMarkForSideBarMenu = true;
 
// リスト数表示位置
// タイトル前にリスト数を表示：true
// タイトル後にリスト数を表示：false
var listNumberPosition = true;
 
// リスト数表示を括るマーク
var leftMarkForListNumber = '';
var rightMarkForListNumber = '';
 
// タイトル表示位置補正方向（スタイルシートで左端または右端に配置した場合）
// タイトルを右方向に移動：true
// タイトルを左方向に移動：false
var centeringPosition = true;
 
// タイトル表示位置補正オフセット（スタイルシートで左端または右端に配置した場合）
var offsetForCentering = 2;
 
// リンクメニュー数
// 他にリンク数を減算する必要があるメニューもここに含めてください
var linkNumber = 2;
 
// 各リンクメニューのオフセット値
// 注：id属性名は「linkx(xは数字)」であること
var offsetValue = new Array(linkNumber);
offsetValue[0] = 3;
offsetValue[1] = 2;
 
// トラックバック数の除数
// 注：id属性名は「trackback」であること
var trackbackNumber = 2;
 
// カテゴリーリスト数計算方法
// サブカテゴリーのカテゴリー数を適正に計数する
// サブカテゴリーに対応：true
// 従来のカテゴリーに対応：false
var subCategoryCount = false;
 
// 状態保持フラグ
// 状態保持を有効にする：true
// 状態保持を無効にする：false
var holdState = true;

設定方法の詳細は下記の通りです。上記リストの青字部分が該当行、赤字が設定値を示しています。

openMarkForSideBarMenu/closeMarkForSideBarMenu

名称：サイドメニュー用折りたたみマーク
用途：サイドメニューのタイトル横に表示する折りたたみ用リンクのマーク
設定値：任意の文字（設定したマークを''で括るように）

preMarkForSideBarMenu

名称：マーク挿入位置
用途：折りたたみマークをタイトルの前後どちらに表示するかを設定します。
設定値： true：タイトルの前に表示／false：タイトルの後に表示。ただしメニューの左端または右端に表示する場合は true を設定（スタイルシートで位置を調整します）

listNumberPosition

名称：リスト数表示位置
用途：リスト数表示位置をタイトルの前後どちらに表示するかを設定します
設定値： true：タイトルの前に表示／false：タイトルの後に表示

leftMarkForListNumber/rightMarkForListNumber

名称：リスト数表示を括るマーク
用途：「left?」には左側の文字（'('、'['等）、「right?」には右側の文字（')'、']'等）を設定します。何も設定しない場合はいずれも '' という状態にしてください。また片方だけの設定も可能です。
設定値：任意の文字

centeringPosition

名称：タイトル表示位置補正方向
用途：スタイルシートで折りたたみマークを左端または右端に配置する場合、タイトルがメニュー中央から外れるので、タイトル位置を補正するための方向を設定します。補正する必要がない場合は本項目はそのままの状態にして、次の offsetForCentering の値に「0」を設定してください。
設定値： true：タイトルを左方向に移動／false：タイトルを右方向に移動

offsetForCentering

名称：タイトル表示位置補正オフセット
用途：上記の centeringPosition で補正する方向のオフセットを半角数字で指定します。なお「1」は半角1文字に相当します。
設定値：任意の値。不要な場合は「0」を設定。

linkNumber

名称：リンクメニュー数
用途：BlogPeople・MyBlogList等のリンクリストの数を半角数字で設定します。
設定値：任意の数字（1つであれば「1」）。リンクリストがない場合は「0」。

setValue[x]

名称：各リンクのオフセット数
用途：タイトル左にリスト数を表示する際、a タグの数の合計を表示するのですが、リンクリストの場合はバナー等の計数に不要な a タグが含まれている場合があります。この不要な a タグの数をメニュー毎に設定します。また [x] の部分にはそのメニューが（リンクの中で）何番目に表示されるかを指定します。 1番目に表示されるものはプログラムの都合上 [0] 、2番目に表示されるものは [1] …という具合に設定してください。メニューが表示される順番は画面の左上から右下です。エントリーやカテゴリー等の他のメニューは数に含みません。先に指定した linkNumber で何番目に表示されるかを計算します。linkNumber を「0」に設定した場合はこの設定を変更する必要はありませんので、そのままにしておいてください。
設定値：任意の数字（1つ減算する場合は「1」）

trackbackNumber

名称：トラックバック数の除数
用途：トラックバックのリスト数を表示する場合、aタグの数の合計を表示するのですが、トラックバック先のリンクとトラックバック元のリンクを同時に表示しているとリスト数が倍になってしまいます。この値はその除数を指定するものです。「2」となっている場合はリスト数の合計を2で割ります。
設定値：除数を半角数字で設定

subCategoryCount

名称：カテゴリーリスト数計算方法
用途：カテゴリーリスト数計算方法を li タグ（サブカテゴリー表示）で計数するか、a タグ（従来の一括表示）で計数するかを指定します。
設定値： true：li タグで計数／false：a タグで計数

holdState

名称：状態保持フラグ
用途：折りたたみ状態を cookie に保持する／しないを設定します。「保持」を設定した場合、最後に変更した折りたたみ状態が他のページへのジャンプ時やブラウザ起動時、および更新時に反映されます。
設定値： true：有効／false：無効

設定内容の変更に自信のない方はそのままお使いください（右端に折りたたみマークを設定・リスト数をタイトル前に表示する設定になっています）。その際、６項のスタイルシートは一番最初のものをお使いくださいますようお願い致します。
修正の際にはカスタマイズ箇所以外の部分に全角文字（全角空白）を含まないようお気をつけください。

３．menufolder.js 配置

menufolder.js の修正が終わったら保存し、ローカル・サイト・パスに配置してください。「配置」とはレンタルサーバの場合はFTPツール等によるアップロード、自宅サーバの場合は単なるコピーを示します。

４．テンプレートの設定１（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 実行スクリプトを追加）

折りたたみたい各メニューの下（サンプルは５項のカテゴリーリスト）に青色部分のスクリプトを追加します。

<div class="sidetitle" id="categoryname">
Categories
</div>
 
<div class="side" id="categorylist">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a>  [<$MTCategoryCount$>]<br />
</MTCategories>
</div>
 
<script type="text/javascript">
<!--
FoldNavigation('idName','initState',viewListNumber);
//-->
</script>

赤字部分は適宜変更します。それぞれの意味と設定値は下記の通りです。

idName

名称：id属性名
用途：折りたたむメニューのid属性を指定します。
設定値：このスクリプトの直前のメニューのid属性名（"name"または"list"を除去した形）

initState

名称：初期状態
用途：ページを最初に表示した時の折りたたみ状態を指定します
設定値： on：開いた状態／off：閉じた状態

viewListNumber

名称：リスト数表示
用途：メニュータイトル横にリスト数の表示・非表示を設定します
設定値： true：表示／false：非表示

例えば、カテゴリーリストメニュー用のid属性に"category"を指定、初期状態は「開く」、リスト数を表示する場合、カテゴリリストメニューの直下に、

<script type="text/javascript">
<!--
FoldNavigation('category','on',true);
//-->
</script>

という内容で配置します。

７．スタイルシート設定

スタイルシート（styles-site.css）の .sidetitle の下に下記（注：青色部分のみ）を内容を追加します。以前のものと異なりますが動作的には同じです（多分）。２項の設定パターンによってスタイルシートの設定内容が若干異なりますので該当するものをお選びください。

右端にマークを表示
.sidetitle a.foldmark {
    float: right; /* マークを右端に配置 */
    font-size:9px; /* マークのフォントサイズ */
    padding-right:3px; /* 右端からのパディング */
    text-decoration: none; /* マークの文字装飾（何も表示しない） */
}

左端にマークを表示
.sidetitle a.foldmark {
    float: left; /* マークを左端に配置 */
    font-size:9px; /* マークのフォントサイズ */
    padding-left:3px; /* 左端からのパディング */
    text-decoration: none; /* マークの文字装飾（何も表示しない） */
}

タイトル前にマークを表示
.sidetitle a.foldmark {
    font-size:9px; /* マークのフォントサイズ */
    padding-right:3px; /* タイトルとマーク間のパディング */
    text-decoration: none; /* マークの文字装飾（何も表示しない） */
}

タイトル後にマークを表示
.sidetitle a.foldmark {
    font-size:9px; /* マークのフォントサイズ */
    padding-left:3px; /* タイトルとマーク間のパディング */
    text-decoration: none; /* マークの文字装飾（何も表示しない） */
}

上記サンプルはそのままでも使える値に設定していますがデザインに応じて適宜変更ください。

2005.06.08 追記
６項の記述を修正しました。

2006.04.04 追記
リストから language 属性を削除しました（HTML4.01/XHTMLで非推奨あるいは廃止されているため）。

Comments [90] | Trackbacks [68]

小粋空間 - a cheap joke and a play on words site

Accordion によるサイドメニューの折りたたみ

１．ライブラリのダウンロード

２．ライブラリのアップロード

３．テンプレートの設定（ヘッダー）

４．テンプレートの設定（サイドバー）

５．スタイルシートの変更

６．特定のメニューをデフォルトで表示する

tabAccordion によるサイドメニューの折りたたみ for WordPress

１．3カラムレイアウトの修正

２．スクリプトのダウンロード・アップロード

３．tabAccordion の設定

４．折りたたみ速度を変更する

５．IE6 で正常に動作しない場合の対処

「サイドメニューの折りたたみ」でメニューリスト別に状態保持を設定する

１．概要

２．メニューリストの状態保持を無効にする

３．全てのメニューリストの状態保持をまとめて無効にする

「追記文章の折りたたみ 2.0」でIE7の不具合を解消する

１．表示がずれる不具合の解消

２．文字化けの解消

追記文章の折りたたみ Web2.0

１．特徴

２．サンプル

３．script.aculo.us のインストール

４．テンプレートの修正1（HTMLヘッダ修正）

５．テンプレートの修正2（追記文章表示用 MT タグ修正）

６．CSS

７．その他

サイドメニューの折りたたみマークに画像を使用する

１．スクリプト menufolder.js の設定

２．CSSの追加

サイドメニューの折りたたみ（v5.0：ゆっくり折りたたむ）

１．Ajax用JavaScriptライブラリのダウンロード

２．Ajax用JavaScriptライブラリのダウンロード

３．menufolder.js のダウンロード（Ver4.00以下の方のみ）

４．スクリプトの修正

４．１ protptype.js を修正する

４．２ menufolder.js を修正する

５．スクリプトのアップロード

６．テンプレートの修正

７．折りたたみ速度の設定

７．１ 全てのメニューに対して一括してゆっくりにする

７．２ 個別に設定する

８．折りたたみスピードを変更する

９．その他

サイドメニューの折りたたみに画像を使用する

サイドメニューの折りたたみ（v4.0）

１．menufolder.js ダウンロード

２．menufolder.js の設定

３．スタイルシート追加

４．テンプレート修正

５．動作の不具合について

サイドメニュー折りたたみスクリプト（cookie等改善版）

１．menufolder.js ダウンロード

２．menufolder.js の設定内容を修正

３．menufolder.js 配置

４．テンプレートの設定１（menufolder.js のインクルード文追加）

５．テンプレートの設定２（各メニューに id 属性追加）

６．テンプレートの設定３（menufolder.js 実行スクリプトを追加）

７．スタイルシート設定

７．１全てのメニューに対して一括してゆっくりにする

７．２個別に設定する