小粋空間: サイドメニューアーカイブ

Top ＞ Movable Type ＞カスタマイズ＞折りたたみ＞サイドメニュー [全て開く]

2007年10月12日

サイドメニューの折りたたみ（定義リスト編）

October 12,2007 1:55 AM
Tag：[Folding, JavaScript, SideMenu]
Permalink

当サイトで公開している「サイドメニューの折りたたみ」について、配布テンプレート（XHTML 1.0 Strict 版）のサイドバーに定義リスト（dl/dt/dd）を使用している場合のカスタマイズについてご質問を頂きましたので、本エントリーにて説明致します。

div 要素の場合の設定例

これまでの、div を使用した場合の設定（青色部分を追加）は下記の通りです。

<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('category','on',true);
//-->
</script>

MT4(またはMT3.x XHTML1.0 Strict 版)の設定例

カテゴリーリスト

ここではカテゴリーリストを例に挙げてますが、どのリストについても、script 要素を dd 要素で括ってください。これを行わないと valid な XHTML になりません。

また、script 要素はリストに示す通り、MTIfArchiveTypeEnabled の内側に設定してください。外側でも問題ありませんが、内側の方がより妥当です。

<MTIf name="module_category_archives">
<MTIfArchiveTypeEnabled archive_type="Category">
<dt class="sidetitle" id="categoryname">
Categories
</dt>
 
<dd class="side" id="categorylist">
<div id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</dd>
<dd>
<script type="text/javascript">
<!--
FoldNavigation('category','on',true);
//-->
</script>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>

アーカイブリスト

デフォルトテンプレートのサイドバーにあるアーカイブリストの構造（+定義リスト）を適用している場合、script 要素を dd 要素で括ることに加え、各アーカイブリスト（月別アーカイブリスト・月別カテゴリアーカイブリスト・ユーザーアーカイブリスト・月別ユーザーアーカイブリスト）の id 属性はすべて同じものを使用して構いません。これは各アーカイブ（またはメインページ）で表示されるリストがいずれかひとつであるためです。

<MTIf name="module_monthly_archives">
<MTIfArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle" id="archivename">
Monthly Archives
</dt>
 
<dd class="side" id="archivelist">
<ul>
<MTArchiveList archive_type="Monthly">
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>
</dd>
<dd>
<script type="text/javascript">
<!--
FoldNavigation('archive','on',true);
//-->
</script>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>
 
<MTIf name="module_category-monthly_archives">
   <MTIfArchiveTypeEnabled archive_type="Category-Monthly">
   <dt class="sidetitle" id="archivename"><$MTArchiveTitle$>: Monthly Archives</dt>
   <dd class="side" id="archivelist">
   <MTArchiveList archive_type="Category-Monthly">
      <MTArchiveListHeader>
      <ul>
      </MTArchiveListHeader>
         <li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$> (<$MTArchiveCount$>)</a></li>
      <MTArchiveListFooter>
      </ul>
      </MTArchiveListFooter>
   </MTArchiveList>
   </dd>
<dd>
<script type="text/javascript">
<!--
FoldNavigation('archive','on',true);
//-->
</script>
</dd>
   </MTIfArchiveTypeEnabled>
</MTIf>
 
<MTIf name="module_author-monthly_archives">
<MTIfArchiveTypeEnabled archive_type="Author-Monthly">
   <dt class="sidetitle" id="archivename"><$MTAuthorDisplayName$>: Monthly Archives</dt>
   <dd class="side" id="archivelist">
   <MTArchiveList archive_type="Author-Monthly">
      <MTArchiveListHeader>
      <ul>
      </MTArchiveListHeader>
         <li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$> (<$MTArchiveCount$>)</a></li>
      <MTArchiveListFooter>
      </ul>
      </MTArchiveListFooter>
   </MTArchiveList>
   </dd>
<dd>
<script type="text/javascript">
<!--
FoldNavigation('archive','on',true);
//-->
</script>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>
 
<MTIf name="module_author_archives">
<MTIfArchiveTypeEnabled archive_type="Author">
   <dt class="sidetitle" id="archivename">Author Archives</dt>
   <dd class="side" id="archivelist">
   <MTArchiveList archive_type="Author">
      <MTArchiveListHeader>
      <ul>
      </MTArchiveListHeader>
         <li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$> (<$MTArchiveCount$>)</a></li>
      <MTArchiveListFooter>
      </ul>
      </MTArchiveListFooter>
   </MTArchiveList>
   </dd>
<dd>
<script type="text/javascript">
<!--
FoldNavigation('archive','on',true);
//-->
</script>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>

上記の例では script 要素がやや冗長なので、リストの一番最後（MTIf の外側）にひとつだけ設置しても良いでしょう。
その場合、何らかのページでアーカイブリストがひとつも表示されなくても、JavaScript エラーは出ないはずです。

Comments [3] | Trackbacks [0]

2007年2月18日

サブカテゴリーリストの折りたたみ（デフォルトテンプレート版）

February 18,2007 1:03 AM
Tag：[Category, MovableType, Tree]
Permalink

サブカテゴリーリストの折りたたみ（デフォルトテンプレート版） Movable Type デフォルトテンプレートにサブカテゴリーリストの折りたたみを適用する場合のカスタマイズを紹介します。
このエントリーではツリー化する場合としない場合の2通りを説明します。スクリーンショットはツリー化した場合の完成例です。

１．スクリプトのダウンロード

下記のリンクをクリックし、リンク先のページにある menufolder.js のリンクをクリックしてダウンロードしてください。

download

２．`menufolder.js` の設定変更

ダウンロードした menufolder.js を任意のエディタで開き、下記の該当部分を青色の内容であることを確認（または修正）してください。

// カテゴリーリスト数計算方法
// サブカテゴリーのカテゴリー数を適正に計数する
// サブカテゴリーに対応：true
// 従来のカテゴリーに対応：false
var subCategoryCount = true;
 
　　　　　　　：
 
// サブカテゴリーフラグ
// サブカテゴリーの折りたたみを有効にする(テンプレート要設定)
// 有効にする：true
// 無効にする：false
var subCategory = true;
  
// サブカテゴリー用折りたたみマーク
var openMarkForSubCategories  = '▼';
var closeMarkForSubCategories = '▲';
 
// サブカテゴリーのタイトルとマークのスペース
var offsetForTitleAndMarkOfSubcategory = 1;

設定内容の詳細は下記の通りです。

subCategoryCount

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

subCategory

名称：サブカテゴリーの折りたたみ有効フラグ
用途：サブカテゴリーの折りたたみの有効／無効を設定します。ここでは有効にします。
設定値： true：有効／false：無効

openMarkForSubCategories/closeMarkForSubCategories

名称：サブカテゴリーの折りたたみマーク
用途：サブカテゴリー名横に表示する折りたたみ用リンクのマーク
設定値：任意の文字（設定したマークを''で括るように）

offsetForTitleAndMarkOfSubcategory

サブカテゴリーのタイトルとマークのスペース
用途：サブカテゴリーのタイトルとマークの間に挿入する半角空白文字数を指定
設定値：0以上

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

menufolder.js の修正が終わったら保存し、メインページと同じディレクトリにアップロードしてください。

４．テンプレートに script 要素追加

サブカテゴリーリストの折りたたみを利用する各テンプレートの </head> の直前に下記のタグを追加してください。charset 属性は menufolder.js の文字コードを指定してください（分からなければとりあえずサンプルのまま貼り付けてください）。

<script type="text/javascript" src="<$MTBlogURL$>menufolder.js" charset="utf-8"></script>

５．テンプレートにサブカテゴリーリスト表示用タグを追加

ツリー化しない場合は１．１項、ツリー化する場合は１．２項のサブカテゴリーリスト表示用タグを、表示したいテンプレートの任意の位置に追加します。

５．１ツリー化しない場合

<div class="module-categories module">
<h2 class="module-header">カテゴリー</h2>
<div class="module-content" id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul class="module-list"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="module-list-item"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li class="module-list-item"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
 
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','initState',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>

５．２ツリー化する場合

<div class="module-categories module">
<h2 class="module-header">カテゴリー</h2>
<div class="module-content" id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul class="tree"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
 
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','initState',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>

赤色部分は下記を参照して適宜変更してください。

initState

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

またカテゴリーアーカイブページで、どのページでも同じカテゴリーリストを表示したい場合は、上記サブカテゴリーリストの先頭および末尾にある MTSubCategories タグを MTTopLevelCategories タグに変更してください。

６．スタイルシート変更

ツリー化しない場合は２．１項、ツリー化する場合は２．２項の CSS をスタイルシートに追加してください。

６．１ツリー化しない場合

.subcategories a.foldmark {
    font-size:7px; /* マークのフォントサイズ */
    text-decoration: none; /* マーク装飾 */
}

６．２ツリー化する場合

.subcategories a.foldmark {
    font-size:7px; /* マークのフォントサイズ */
    text-decoration: none; /* マーク装飾 */
}
ul.tree {
    margin: 0 0 10px 0; /* 全体マージン */
    padding: 0;
    list-style: none;
}
ul.tree ul {
    margin: 0px 0; /* 間隔を空ける時はここを変更 */
    padding-top: 2px; /* インデント部分のパディング */
}
ul.tree li {
    margin: 0; /* 0 以上にすると画像が切れる */
    padding: 4px 0 1px 13px; /* top を大きくすると画像とずれる */
    background-image: url(tree_lst.gif);
    background-position: 2px 0; /* 垂直方向を0以上にすると画像が切れる */
    background-repeat: no-repeat;
    list-style: none;
    line-height: 100%;
}
ul.tree li.tree_end {
    background-image: url(tree_end.gif);
    background-position: 2px 0;
    list-style: none;
}

７．ツリー画像のダウンロード

ツリー化する場合は、７項・８項を実施してください。

下記のファイルをダウンロードしてください。これはツリーを表示するための画像で、実線・点線の2種類を用意しています。それぞれ2つの画像がありますのでご注意ください。

実線：tree_lst_solid.gif / tree_end_solid.gif

点線：tree_lst_dotted.gif / tree_end_dotted.gif

保存方法は、（IEの場合）リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。

ツリー画像のファイルは６項の CSS（青色部分）で読み込まれますので、ファイル名は一致させてください。つまり、tree_lst_solid.gifをダウンロードする時（またはダウンロード後）、ファイル名は tree_lst.gif に変更してください。

８．画像のアップロード

ダウンロードした画像をメインページと同じディレクトリにアップロードしてください。

以上です。

Comments [8] | Trackbacks [2]

2006年11月28日

サイドメニューの一部を折りたたむ

November 28,2006 2:36 AM
Tag：[Customize, MovableType]
Permalink

ブログのオーソドックスなカスタマイズのひとつに「サイドメニューの折りたたみ」があります。これはサイドバーに表示させている「最新のエントリー」や「カテゴリーリスト」等のメニューリストが縦に長くなった場合、リストを折りたたむ（非表示にする）ことでスクロール量を少なくしたり、サイドバーをスッキリさせる効果があります。

本エントリーではメニューリスト全体を折りたたむのではなく、リストの一部を表示させておき、残りの部分を折りたたむという、いわゆる「サイドメニューの続きを読む」のカスタマイズをご紹介します。このカスタマイズに対応するブログは Movable Type です。

下のスクリーンショットは「最近のエントリー」を折りたたんでみた完成イメージです。

折りたたみ用のリンクについては、リストのタイトル部分をリンクにする代わりに、リストの一番下に「続きを読む」のリンクを表示する方式にしています。この方がユーザビリティ上好ましいと思われるためです。

このカスタマイズは以前頂いたご質問のひとつで、実現困難ということでうやむやにしてしまってましたが、先日公開された Counter プラグインを用いることで可能になりました。

１．Counter プラグインの設定

Counter プラグインを Movable Type にインストールしてください。プラグインの詳細は配布サイトまたは Counter プラグインの記事をご覧ください。

２．スクリプトの追加

「追記文章の折りたたみ」で利用しているリスト2.1 のスクリプトを <head> ? </head> の間（できれば </head> の直前）に設定します。または前後の script 要素を削除して、外部ファイル（showhide.js とか）にしても構いません。

お詫び：リスト 2.1 が正常に表示されておりませんでしたので、修正致しました。

すでに「追記文章の折りたたみ」のカスタマイズを行っている場合は本項をスキップしてください。

<script type="text/javascript">
function showHide(entryID, entryLink, htmlObj) {
  extTextDivID = ('Text' + (entryID));
  extLinkDivID = ('Link' + (entryID));
    if( document.getElementById ) {
    if( document.getElementById(extTextDivID).style.display ) {
      if( entryLink != 0 ) {
        document.getElementById(extTextDivID).style.display = "block";
        document.getElementById(extLinkDivID).style.display = "none";
        htmlObj.blur();
      } else { 
        document.getElementById(extTextDivID).style.display = "none";
        document.getElementById(extLinkDivID).style.display = "block";
      }
    } else {
      location.href = entryLink;
      return true;
    }
  } else {
    location.href = entryLink;
    return true;
  }
}
</script>

リスト 2.1　追記文章の折りたたみ用スクリプト

３．部分折りたたみ用メニューを設定する

部分折りたたみ用メニューを表示したいテンプレートに、リスト 3.1 ?リスト 3.4 のお好きなリストを追加してください。表示するリスト数を変更する方法については５項をご覧ください。

３．１最近のエントリー

<div class="sidetitle">
Recent Entries
</div>
 
<div class="side">
<MTCounter>
<ul>
<MTEntries lastn="10">
<$MTCounterPlus$>
 
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkEntry">
<a href="javascript:void(0)" name="<$MTEntryID pad="1"$>" onclick="showHide('Entry','<$MTBlogURL$>',this);return false;">続きを読む &#8811;</a>
</div>
<div id="TextEntry" style="display: none">
<div class="list_more"><a href="javascript:void(0)" name="" onclick="showHide('Entry',0,this);return false;">&#8810; 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
 
<li><a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>
</div>

リスト 3.1　「最近のエントリー」用MTタグ

３．２最近のコメント

<div class="sidetitle">
Recent Comments
</div>
 
<div class="side">
<MTCounter>
<ul>
<MTEntries lastn="30" recently_commented_on="10">
<$MTCounterPlus$>
 
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkComment">
<a href="javascript:void(0)" name="<$MTEntryID pad="1"$>" onclick="showHide('Comment','<$MTBlogURL$>',this);return false;">続きを読む &#8811;</a>
</div>
<div id="TextComment" style="display: none">
<div class="list_more"><a href="javascript:void(0)" name="" onclick="showHide('Comment',0,this);return false;">&#8810; 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
 
<li><a href="<$MTEntryLink$>"><MTEntryTitle></a><ul>
<MTComments lastn="5">
<li><a href="<$MTEntryLink$>#c<$MTCommentID$>" title="c<$MTCommentID$>"><MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$></li>
</MTComments></ul></li>
</MTEntries>
</ul>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>
</div>

リスト 3.2　「最近のコメント」用MTタグ

３．３最近のトラックバック

<div class="sidetitle">
Recent Trackbacks
</div>
 
<div class="side">
<MTCounter>
<ul>
<MTPings lastn="10">
<$MTCounterPlus$>
 
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkTrackback">
<a href="javascript:void(0)" name="<$MTPingID pad="1"$>" onclick="showHide('Trackback','<$MTBlogURL$>',this);return false;">続きを読む &#8811;</a>
</div>
<div id="TextTrackback" style="display: none">
<div class="list_more"><a href="javascript:void(0)" name="" onclick="showHide('Trackback',0,this);return false;">&#8810; 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
 
<li><a href="<$MTPingURL$>" target="_blank" title="t<$MTPingID$>"><$MTPingTitle$></a><br />
from <$MTPingBlogName$> <$MTPingDate format="%m/%d %X"$></li>
</MTPings>
</ul>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>
</div>

リスト 3.3　「最近のトラックバック」用MTタグ

３．４月別アーカイブリスト

月別アーカイブリストは表示月数を制御することができないため、サイト運営が長くなるにしたがってリストが長大になります。そのためリスト全体の折りたたみや、年毎の折りたたみ等を行う訳ですが、この技を使えば「最新×ヶ月分だけを表示」というコンパクトな表示が可能になります。
月が替わり、新しい月でエントリー投稿があった場合、表示月が更新されます。

<div class="sidetitle">
Monthly Archives
</div>
 
<div class="side">
<MTCounter>
<ul>
<MTArchiveList archive_type="Monthly">
<$MTCounterPlus$>
 
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkMonthly">
<a href="javascript:void(0)" onclick="showHide('Monthly','<$MTBlogURL$>',this);return false;">続きを読む &#8811;</a>
</div>
<div id="TextMonthly" style="display: none">
<div class="list_more"><a href="javascript:void(0)" onclick="showHide('Monthly',0,this);return false;">&#8810; 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
 
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>

リスト 3.4　「月別アーカイブリスト」用MTタグ

４．CSS設定

「続きを読む ≫」および「≪ 続きを隠す」のリンクに class 属性 "list_more" を設定してますので、適宜お好みのプロパティを追加してください。ここではリスト 4.1 のように margin プロパティで上下のマージンのみを設定しています。

.list_more {
   margin:5px 0;
}

リスト 4.1　CSS

５．表示数を変更する

リスト 5.1 の下記の赤色部分を変更してください。

　　　　　　：
<MTCounterIfEqual value="6">
　　　　　　：
　　　　　（略）
　　　　　　：
<MTCounterIfMore value="5"></div></MTCounterIfMore>
　　　　　　：

リスト 5.1　表示数を変更する場合の変更箇所

「上方に表示されている数字 - 1」がデフォルトで表示される数になります。下方の数字は上の数字から -1 した値を設定してください。またリスト数が折りたたみに満たない場合でも正常にマークアップするようになっています。

Comments [4] | Trackbacks [1]

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]

2006年6月16日

サイドメニューの折りたたみ（Movable Type デフォルトテンプレート用）

June 16,2006 2:16 AM
Tag：[Customize, MovableType]
Permalink

当サイトで公開しているサイドメニューの折りたたみを、Movable Type のデフォルトテンプレートで利用する場合、テンプレートおよびスタイルシートはこれまでのエントリーやマニュアルとは異なった修正が必要になります。
ということで、以下に修正方法を記します。menufolder.js 自体の設定は同じですが、ここではブロック指定による折りたたみのみの方法をご紹介します。

Windows + IE6.0/Firefox1.5/Opera8 で動作を確認しています。サンプルも用意しましたのでお試しください（最近のエントリー／カテゴリー／アーカイブが折りたためます）。

デフォルトテンプレートの折りたたみサンプル

１．各テンプレート

「最近のエントリー」を例に修正前と修正後のタグを示します。修正対象を赤色、修正後または追加部分を青色で示しています。

修正前

<div class="module-archives module">
   <h2 class="module-header">最近のエントリー</h2>
   <div class="module-content">
　　　　　　　　　　：
　　　　　　　　　（中略）
　　　　　　　　　　：
   </div>
</div>

修正後

<div class="module-archives module2">
   <h2 class="module-header2" id="entryname">最近のエントリー</h2>
   <div class="module-content" id="entrylist">
　　　　　　　　　　：
　　　　　　　　　（中略）
　　　　　　　　　　：
   </div>
</div>

アーカイブ（月別アーカイブ）に適用する場合は、タイトルのリンク

<h2 class="module-header"><a href="<$MTBlogURL$>archives.html">アーカイブ</a></h2>

を削除してください。

２．スタイルシート

下記を styles-site.css の最後に追加してください。

.module2 {
    margin: 0 0 10px 0;
    border-bottom: 1px solid #f3f6f9;
    background: #dae0e6;
    overflow: hidden;
    width: 100%;
}
 
.module-header2 {
    width: auto;
    margin: 0;
    padding: 0;
    border-left: 5px solid #36414d;
    font-weight: bold;
    background: #a3b8cc;
}
 
.module-header2 a {
    width: auto;
}
 
.module-header2 a:link,
.module-header2 a:visited {
    display: block;
    padding: 5px;
    _padding: 3px 0 3px 5px;
    color:#ffffff;
    font-size:11px;
}
 
.module-header2 a:hover {
    padding: 5px;
    _padding: 3px 0 3px 5px;
    color:#ffffff;
    background: #999999;
    font-size:11px;
}

配色は適宜修正してください。

Comments [8] | Trackbacks [0]

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 [24]

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 [228] | Trackbacks [79]

2004年12月24日

menufolder.js 3.01 リリース

December 24,2004 12:00 PM
Tag：[]
Permalink

折りたたみスクリプトの menufolder.js をマイナーバージョンアップしました。
今回の修正は MacIE 用の対処です。3.00での MacIE で折りたたみが正常に動作しない問題について修正致しました。MacIE をご使用の方は多くないかも知れませんが、折りたたみ可能なブラウザが拡大されますのでアップグレードされることをお勧めします。
なお今回の修正は TOY COZY MUSEUM：toycozy さんおよび、Mellout,inc.：mellout さんのご助言およびご協力によりリリースすることができました。この場をお借りしてお礼申し上げます。

アップグレードされる場合は下記のリンクでスクリプトのページ（あちこちにリンクを貼るとメンテナンスが大変なので新しく作りました）へジャンプし、そこからダウンロードしてください。

download

なお 3.00 のスクリプトから修正される場合は下記の変更を行ってください。
まず95行目あたりにある赤色部分の行を青色のものに入れ替えます。

for(var x = 0; x < list.length; x++) {
    if (list[x] != name) {
        newData.push(list[x]);
    }
}

for(var x = 0; x < list.length; x++) {
    if (list[x] != name) {
        newData[newData.length] = list[x];
    }
}

次にスクリプト冒頭に配している各設定データ（赤色部分）

//--------------------------------------------------------
// Configuration
//--------------------------------------------------------
 
// サイドメニュー用折りたたみマーク
var openMarkForSideBarMenu  = '▽';
var closeMarkForSideBarMenu = '△';
　　　　　　　　：
　　　　　　（中略）
　　　　　　　　：
// サブカテゴリー用折りたたみマーク
var openMarkForSubCategories  = '▽';
var closeMarkForSubCategories = '△';
 
//--------------------------------------------------------

をごっそり切り取り、下記の位置（切り取り前の行数で言うと172行と173行の間）に移動します。

　　　　　　　　：
　　　　　　　　：
function FoldNavigation(idName,initMode,viewNum) {
 
//--------------------------------------------------------
// Configuration
//--------------------------------------------------------
 
// サイドメニュー用折りたたみマーク
var openMarkForSideBarMenu  = '▽';
var closeMarkForSideBarMenu = '△';
　　　　　　　　：
　　　　　　（中略）
　　　　　　　　：
// サブカテゴリー用折りたたみマーク
var openMarkForSubCategories  = '▽';
var closeMarkForSubCategories = '△';
 
//--------------------------------------------------------
 
    var openMark;  // The mark for opening, when having closed
    var closeMark; // The mark for closing, when open
    var preMark;   // The insertion position of a mark.
　　　　　　　　：
　　　　　　　　：

具体的な修正内容は下記の通りです。

現状のスクリプトで用いている push 関数が MacIE では期待する動作とならないため、push 関数による処理を配列の代入処理に変更。
グローバル変数として設定している各設定値用の変数のスコープが正常に認識できないため、ローカル変数として配置するように変更。

Comments [14] | Trackbacks [9]

2004年12月16日

Movable Type ユーザー・マニュアルをサイドメニューに追加

December 16,2004 12:40 PM
Tag：[]
Permalink

User's Manual Movable Type ユーザー・マニュアル、いつもトップページURLの後ろに "docs" と打ち込んでジャンプしていたのですが、だんだん面倒になってきたのでサイドバーのメニューとして追加してみました。今のところ~~「このサイトについて」の右下~~トップページ左下にひっそり置いてます。

メニューは、せっかくなのでトップページへのリンクだけでなく、サブメニューの中から頻度の高そうなものをピックアップして加えました。またテンプレート系のマニュアルは見る機会が多いので、さらにサブカテゴリー化（"▽"マークで折りたたみ）して直接参照したい項目にジャンプできるようにしています。サブメニュー全体はトップのサブカテゴリーにするのが本来ですが、テキストの折り返しが煩わしいのでトップと同じレベルに配しました。

リストはサブカテゴリー表示を流用しています。ただし「id 属性は文書内で一意でなければならない」という制約があるため、サブカテゴリーリストの

<div id="categories">

が使えません。したがってサブカテゴリー表示用のスタイルシート categories の内容に別名の id 属性を付与して使用しています。

Comments [0] | Trackbacks [0]

2004年12月13日

サブカテゴリーリストの折りたたみ

December 13,2004 1:00 AM
Tag：[]
Permalink

サイドメニューのサブカテゴリーリストの折りたたみカスタマイズをご紹介致します。

仕様

サブカテゴリーが存在する親カテゴリーの右側に折りたたみマークを表示します
折りたたみマークは任意の文字を指定できます
カテゴリーのエントリーの有無には依存しません
折りたたみ状態をcookieで保持します
カテゴリー名が折り返されても（多分）大丈夫です。

また、サイドメニューのツリー化スクリプトとの併用が可能です。以下設定方法です。
なおV3.0にサブカテゴリー折りたたみ機能を盛り込み済ですので、サイドメニューの折りたたみを既にご利用くださっている方につきましては下記の１項および６項をスキップしてください。

１．menufolder.js ダウンロード

download

ファイルは UTF-8 で作成していますのでブログと同じ文字コードに合わせてください（よく分からない方はそのままで結構です）。

２．menufolder.js 設定変更

menufolder.js をテキストエディタ等を用いて、下記の青色行の赤色部分を本リストの通り（折りたたみマークは任意）に変更してください。

// カテゴリーリスト数計算方法
// サブカテゴリーのカテゴリー数を適正に計数する
// サブカテゴリーに対応：true
// 従来のカテゴリーに対応：false
var subCategoryCount = true;
 
　　　　　　　：
 
// サブカテゴリーフラグ
// サブカテゴリーの折りたたみを有効にする(テンプレート要設定)
// 有効にする：true
// 無効にする：false
var subCategory = true;
 
// サブカテゴリー用折りたたみマーク
var openMarkForSubCategories  = '▽';
var closeMarkForSubCategories = '△';

設定内容の詳細は下記の通りです。

subCategoryCount

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

subCategory

名称：サブカテゴリーの折りたたみ有効フラグ
用途：サブカテゴリーの折りたたみの有効／無効を設定します。ここでは有効にします。
設定値： true：有効／false：無効

openMarkForSubCategories/closeMarkForSubCategories

名称：サブカテゴリーの折りたたみマーク
用途：サブカテゴリー名横に表示する折りたたみ用リンクのマーク
設定値：任意の文字（設定したマークを''で括るように）

３．menufolder.js 配置

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

４．カテゴリーリスト表示用タグ修正

折りたたみを利用する各テンプレートの、カテゴリーリストを表示するタグを変更します。上は3.1x用の公開テンプレートからの抜粋ですので、この赤色部分を下のリストの青色部分と入れ替えてください。

<div class="sidetitle">
Categories
</div>
 
<!-- 全カテゴリー用 -->
<div class="side">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a>  [<$MTCategoryCount$>]<br />
</MTCategories>
</div>
<!-- 全カテゴリー用 -->
 
<!-- サブカテゴリー用
<div class="side">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div>
     サブカテゴリー用 -->

<div class="sidetitle">
Categories
</div>
 
<!-- サブカテゴリー用 -->
<div class="side">
<div id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
<!-- サブカテゴリー用 -->

緑色は公開テンプレートからの変更または追加部分を示しています。また

<div class="side">

の部分に折りたたみ用の id 属性を設定されている場合は、現在の設定を反映させてください。

５．JavaScript起動用スクリプト設定

折りたたみを利用する各テンプレートに、menufoleder.js の FoldNavigation を起動するスクリプトを設定します。この設定方法には起動スクリプトの自動生成と手動設定の2通りがあります。
menufolder.js を起動する単位は親カテゴリーです。つまり、折りたたむ親カテゴリーの増減が発生するとこの起動部分も増減、つまり変更の必要が生じます。自動生成ではMTタグを用いており、折りたたみが必要な親カテゴリーの id 属性を取得し、起動スクリプトを再構築時に自動生成ます。手動設定の場合は親カテゴリー分の起動スクリプトを文字通り手動で挿入します。
普通に考えれば前者しかありえませんが、自動生成では折りたたみの初期状態を「全て開く」または「全て閉じる」のいずれかのみしか選択できない、また子カテゴリーを持つ全ての親カテゴリーに折りたたみマークが付与されるのがデメリットです。手動設定は面倒な反面、初期状態を親カテゴリー別にきめ細かく設定できます。また折りたたむ親カテゴリーを任意に選択することができます。
という訳で自動生成を行う場合は５．１を、手動設定の場合は５．２の作業を行ってください。

５．１自動生成の場合

折りたたみを利用する各テンプレートに下記のタグを、４項で設定したタグの直下に挿入します。

<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','off',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>

赤色部分は５．２（２）項の initState を参照して適宜変更してください。

５．２手動設定の場合

（１）MTCategoryID取得

まず折りたたみマークが付与される各親カテゴリーのMTCategoryIDを取得（単なるメモ）します。繰り返しになりますが５．２項を選択された場合は、サブカテゴリーをもつ親カテゴリーが増減する度に修正が必要になります。
管理メニューの「カテゴリー」をクリックしてカテゴリー名をマウスオン（またはクリック）するとステータスバー（あるいはアドレス）に

http://?/mt.cgi?__mode=view&_type=category&blog_id=1&id=n

が表示されます。このURLの最後の n がMTCategoryIDですので、カテゴリー名とMTCategoryIDの対応を（メモする等で）記録してください。
とりあえず５．１（１）をテンプレートに設定・再構築して、そのソースを取得して５．２（２）に反映させるという手もあります。

（２）JavaScript起動用スクリプト設定

折りたたみを利用する各テンプレートで、menufolder.js を起動するためのスクリプトを４項で設定したタグの直下に挿入します。まずはサンプルをご覧ください。

<script type="text/javascript">
<!--
FoldNavigation('subcategories18','on',false);
FoldNavigation('subcategories22','on',false);
FoldNavigation('subcategories24','on',false);
FoldNavigation('subcategories31','off',false);
//-->
</script>

青色は挿入部分、赤色は適宜修正します。それぞれのフォーマット、意味および設定値は下記の通りです。

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

idName

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

initState

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

viewListNumber

名称：リスト数表示
用途：メニュータイトル横にリスト数の表示・非表示を設定します
設定値： true：表示／false：非表示（本カスタマイズでは false 固定）

この例ではMTCategoryIDが18、22、24、31を折りたたむ親カテゴリーとして4行記述しています。18、22、24の3つは開いた状態、31は閉じた状態で表示されます。
折りたたむカテゴリー数は各サイトで異なりますので折りたたみが必要なカテゴリー数分を上記の例にならって記述し、５．２（１）で記録したMTCategoryIDは赤色部分に

subcategories + MTCategoryID

という文字列で設定してください（「複数形になっている」とかいうツッコミはなし）。スクリプトはこの文字列「subcategories」を判別してサブカテゴリーの折りたたみ処理を実行していますのでお間違えのないように気をつけてください。

６．menufolder.js インクルード文挿入

折りたたみを利用する各テンプレートの <head>～</head> の間に下記のタグを追加してください。charset 属性は menufolder.js の文字コードを指定してください。

<script type="text/javascript" src="<$MTBlogURL$>menufolder.js" charset="utf-8"></script>

７．スタイルシート設定

スタイルシート（styles-site.css）に下記の位置（.side #categories li の下）に、折りたたみマーク装飾用のスタイル（青色部分）を追加してください。

.side #categories li {
    margin-top: 0px;
    margin-bottom: 0px;
    list-style-type: circle;
 
.subcategories a.foldmark {
    font-size:9px; /* マークのフォントサイズ */
    text-decoration: none; /* マークの文字装飾（何も表示しない） */
}

設定はデザインに応じて適宜変更ください。

８．注意事項

・本カスタマイズを行う場合、他の折りたたみメニューで "subcategories" という id 属性は使用しないで下さい。
・カテゴリーリスト自体を折りたたむ場合、リスト数の計数を適正に行うためにカテゴリーリストの id 属性名を「category」にしてください。id 属性名を変更したい場合は、menufolder.js の下記の赤色部分を使用する id 属性名に修正してください。

if (subCategoryCount) {
    if (idName == 'category') {
        objItems = objLists.getElementsByTagName('li');
    } else {
        objItems = objLists.getElementsByTagName('a');
    }
} else {
    objItems = objLists.getElementsByTagName('a');
}

９．FAQ

Q：折りたたみマークが表示されません
A：menufolder.js 起動スクリプトの設定（５．２（２）項）が誤っている、６項が設定されていない、６項で設定したパスに menufolder.js がない、２項のサブカテゴリーフラグが true になっていない、ブログと menufolder.js の文字コードが一致していない等が考えられます。

Q：カテゴリーリストのリスト数が表示されているカテゴリー数と一致しません
A：２項の subCategoryCount および８項の２番目の内容を再度ご確認ください。

Q：折りたたみマークをクリックするとマークが変わってしまいます
A：テンプレート内のどこかで不要な menufolder.js をインクルードしています。私はこれで2日ほど悩みました（バカ）

Q：他のアーカイブページにジャンプすると折りたたみマークや表示位置が変わってしまいます
A：ジャンプしたアーカイブのテンプレートで誤った menufolder.js をインクルードしている可能性があります（これも私）。

2004.12.13 追記
カテゴ

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

サイドメニューの折りたたみ（定義リスト編）

div 要素の場合の設定例

MT4(またはMT3.x XHTML1.0 Strict 版)の設定例

カテゴリーリスト

アーカイブリスト

サブカテゴリーリストの折りたたみ（デフォルトテンプレート版）

１．スクリプトのダウンロード

２．menufolder.js の設定変更

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

４．テンプレートに script 要素追加

５．テンプレートにサブカテゴリーリスト表示用タグを追加

５．１ ツリー化しない場合

５．２ ツリー化する場合

６．スタイルシート変更

６．１ ツリー化しない場合

６．２ ツリー化する場合

７．ツリー画像のダウンロード

８．画像のアップロード

サイドメニューの一部を折りたたむ

１．Counter プラグインの設定

２．スクリプトの追加

３．部分折りたたみ用メニューを設定する

３．１ 最近のエントリー

３．２ 最近のコメント

３．３ 最近のトラックバック

３．４ 月別アーカイブリスト

４．CSS設定

５．表示数を変更する

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

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

２．CSSの追加

サイドメニューの折りたたみ（Movable Type デフォルトテンプレート用）

１．各テンプレート

２．スタイルシート

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

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

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

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

４．スクリプトの修正

４．１ protptype.js を修正する

４．２ menufolder.js を修正する

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

６．テンプレートの修正

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

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

７．２ 個別に設定する

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

９．その他

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

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

１．menufolder.js ダウンロード

２．menufolder.js の設定

３．スタイルシート追加

４．テンプレート修正

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

menufolder.js 3.01 リリース

Movable Type ユーザー・マニュアルをサイドメニューに追加

サブカテゴリーリストの折りたたみ

仕様

１．menufolder.js ダウンロード

２．menufolder.js 設定変更

３．menufolder.js 配置

４．カテゴリーリスト表示用タグ修正

５．JavaScript起動用スクリプト設定

５．１ 自動生成の場合

５．２ 手動設定の場合

（１）MTCategoryID取得

（２）JavaScript起動用スクリプト設定

６．menufolder.js インクルード文挿入

７．スタイルシート設定

８．注意事項

９．FAQ

２．`menufolder.js` の設定変更

５．１ツリー化しない場合

５．２ツリー化する場合

６．１ツリー化しない場合

６．２ツリー化する場合

３．１最近のエントリー

３．２最近のコメント

３．３最近のトラックバック

３．４月別アーカイブリスト

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

７．２個別に設定する

５．１自動生成の場合

５．２手動設定の場合