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 ManualMovable 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にサブカテゴリー折りたたみ機能を盛り込み済ですので、サイドメニューの折りたたみを既にご利用くださっている方につきましては下記の1項および6項をスキップしてください。

1.menufolder.js ダウンロード

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

download

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

2.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

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

3.menufolder.js 配置

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

4.カテゴリーリスト表示用タグ修正

折りたたみを利用する各テンプレートの、カテゴリーリストを表示するタグを変更します。上は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 属性を設定されている場合は、現在の設定を反映させてください。

5.JavaScript起動用スクリプト設定

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

5.1 自動生成の場合

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

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

赤色部分は5.2(2)項の initState を参照して適宜変更してください。

5.2 手動設定の場合

(1)MTCategoryID取得

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

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

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

(2)JavaScript起動用スクリプト設定

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

<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は閉じた状態で表示されます。
折りたたむカテゴリー数は各サイトで異なりますので折りたたみが必要なカテゴリー数分を上記の例にならって記述し、5.2(1)で記録したMTCategoryIDは赤色部分に

subcategories + MTCategoryID

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

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

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

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

7.スタイルシート設定

スタイルシート(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; /* マークの文字装飾(何も表示しない) */
}

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

8.注意事項

・本カスタマイズを行う場合、他の折りたたみメニューで "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');
}

9.FAQ

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

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

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

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

2004.12.13 追記
カテゴリーリスト数表示の注意事項がもれてましたので、記事引用くださっている方は8項の記述も追加してやってください。また5.2(2)のリストに冗長な部分がありましたので削除致しました。

2005.03.31 追記
サイドメニューツリー化スクリプトへのリンクを文中に追加しました。

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

Comments [120] | Trackbacks [40]
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 への差し替えと2項の設定です。ただし文字コードや id 属性名によっては他の項目についても変更が必要になります。また念のためこれまでの js ファイルもバックアップとして保存しておいてください。

1.menufolder.js ダウンロード

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

download

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

2.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:無効

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

3.menufolder.js 配置

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

4.テンプレートの設定1(menufolder.js のインクルード文追加)

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

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

5.テンプレートの設定2(各メニューに 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"」という具合になります(複数存在する場合は数字の部分が増えていきます)。

6.テンプレートの設定3(menufolder.js 実行スクリプトを追加)

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

<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>
という内容で配置します。

7.スタイルシート設定

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

右端にマークを表示
.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 追記
6項の記述を修正しました。

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

Comments [92] | Trackbacks [69]
2004年12月 5日

サイドメニューの折りたたみスクリプト改修中

December 5,2004 3:25 AM
Tag:[]
Permalink

公開中のサイドバー折りたたみスクリプトですが、cookie保持の改善版をただいま鋭意作成中です。本当は土曜日中にエントリーを公開したかったのですが、他の改善も含めて色々と修正していたら間に合わなくなってしまいました。カスタマイズ手順もこれまでのものをまとめて、新たに作り直す予定です。

ということで、かなりゴージャスなスクリプトに生まれ変わって登場する予定です(設定がかえってややこしくなるという噂も…)。乞うご期待ください!

Comments [2] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3