TopMovable Type > バージョン別 > 3.11-ja > 2004年12月
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]
2004年12月 1日

カテゴリーアーカイブで全カテゴリーリスト表示の記事修正

December 1,2004 1:20 PM
Tag:[]
Permalink

お詫びです。先日エントリーしたカテゴリーアーカイブで全カテゴリーリストを表示で正規な表示方法があることが判明致しました。

<MTSubCategories>~</MTSubCategories>

<MTTopLevelCategories>~</MTTopLevelCategories>

に置き換えるだけでできました。
この方法はNotebook :: Hibi no Noteさんから頂いたコメントより判明致しました。

ということで該当のエントリーの内容を修正するとともに、誤解を招くカスタマイズ方法を公開したことをこの場をお借りしてお詫び申し上げます。
なおモジュール化によるカスタマイズをされたものにつきましては変更の必要はございません(上記タグを使用する方が本来的ですが変更されても動作は変わりません)。またモジュール化自体につきましてもメリットが多いので、そのままご利用頂ければ幸いです。

Comments [0] | 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
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