カテゴリーのプルダウン化プラグインを blog*citron さんのテンプレートで使う方法
ちなみに本家さまでもカテゴリーのプルダウン化が公開されたようです。 |
昨日公開した Serene Bach 用以下、カスタマイズ方法です。
まず、カテゴリーのプルダウン化プラグイン for Serene Bach の１?３項までの作業を行ってください。そして４項の作業について、下記の内容に変更して実施してください。
４．独自タグの設定２
blog*citron さんのベースHTMLテンプレートのサイドバーに設定されているカテゴリー表示用のブロック名および独自タグを、「変更前」のリストから「変更後」のリストに変更してください。
変更前
<!-- BEGIN category -->
<dl class="category">
<dt id="categoryname">CATEGORIES</dt>
<dd id="categorylist">{category_list}
{subcategory_list}</dd>
</dl>
<!-- END category -->変更後
<!-- BEGIN fold_category -->
<dl class="category">
<dt id="categoryname">CATEGORIES</dt>
<dd id="categorylist">
<div id="categories">{fold_category_list}</div>
</dd>
</dl>
<!-- END fold_category -->元のタグは全て残していますのでスタイルへの影響はないと思いますが、CSS の設定を変更されている場合は #categorylist 配下に #categories の追加が必要になるかもしれません。もし現在のスタイルが適用されなくなってしまった場合は、お手数ですがご連絡ください。
またスクリーンショットは、エントリー件数と折りたたみマークの間にスペースを設けて表示していますが、これは元記事の５項の作業を行ってください。
カテゴリーのプルダウン化プラグイン for Serene Bach
|
Serene Bach 用のカテゴリーをプルダウン化するプラグインです。スクリーンショットのようにカテゴリー名の横に折りたたみマーク（▲または▼）のリンクを表示し、リンクをクリックすることでカテゴリーの折りたたみができます。当サイトのカテゴリーリストで同じものを使っておりますので、そちらで実際の動作を確認頂ければ幸いです。本プラグインはバージョンアップしています。
詳細は「カテゴリーのプルダウン化プラグイン・バージョンアップ」をご覧ください。
プルダウンの仕様は下記の通りです。
- 親カテゴリーに折りたたみマークを表示します。
- cookie を利用して折りたたみ状態を保持しますので、リロードやブラウザを新しく開いても以前の折りたたみ状態を表示することができます。
- 設定を変更することで折りたたみマークをカテゴリーの左側に表示させることもできます。
- ツリー化スクリプトとの併用が可能です。
プルダウン動作は Windows2000/XP の IE/Firefox/Opera で確認しております。他の環境はもっておりませんので予めご了承ください。
前置きが長くなりましたが、以下カスタマイズ方法です。
１．プラグインのダウンロード・アップロード
下記の FoldCategory.zip または FoldCategory.lzh をクリックして、プラグインのアーカイブをダウンロードしてください。
ダウンロードしたアーカイブを解凍し、中にある FoldCategory.pm を plugins ディレクトリ直下に、resource/ja/foldcategory.txt を、同じディレクトリの構成があると思いますので、foldcategory.txt のみを ja 配下にアップロードしてください。
アップロードの後、Serene Bach の管理画面を起動し、「環境設定」→「プラグイン」をクリックし、プラグイン一覧に FoldCategory.pm が表示されていることを確認し、一番右のチェックボックスをチェックして右下の「利用する」をクリックしてください。
２．スクリプトのダウンロード・アップロード
このプラグインを動作させるためには menufolder.js というスクリプトが別途必要になります。サイドメニューの折りたたみで menufolder.js をすでにお使いの場合は、本項目および３項の作業をスキップしてください。下記のリンク先より menufolder.js をダウンロードしてください。ダウンロードした menufolder.js を index.html のあるディレクトリにアップロードしてください。
３．独自タグの設定１
２項でダウンロードした menufolder.js を使うための宣言を、ベースHTMLテンプレートに設定します。個別エントリー用HTMLテンプレートを設定している場合はそちらも同じ設定を行ってください。
下記のように </head> の前辺りに青色のブロックおよび独自タグを設定します。
：
<!-- BEGIN fold_category -->
{fold_category_script}
<!-- END fold_category -->
</head>
：４．独自タグの設定２
ベースHTMLテンプレのサイドバーに設定しているカテゴリー表示用のブロック名および、独自タグを下記のように変更してください。
：
<!-- BEGIN fold_category -->
<div class="sidetitle">Categories</div>
<div class="side" id="categories">{fold_category_list}</div>
<!-- END fold_category -->
：ブロック名は fold_category 、独自タグ名は fold_category_list となります。リストは公開テンプレートを例に記していますが、div タグの有無や class 属性の名称は現在お使いのままで結構です。ただし赤色で示している、
id="categories"は必須となりますのでご注意ください。
注意：blog*citron さん、ボムガールさん、宵闇書房さん、Millibar さんのテンプレートのように、カテゴリーリストが dl/dt/dd で括られていている場合、元の id 属性を変更せずに、下記のようにブロック名の変更と、独自タグを div 要素で括る形で設定してください。
：
<!-- BEGIN fold_category -->
<dl class="category">
<dt id="categoryname">CATEGORIES</dt>
<dd id="categorylist">
<div id="categories">{fold_category_list}</div>
</dd>
</dl>
<!-- END fold_category -->
：５．折りたたみマークに関するカスタマイズ
基本的な設定は以上ですが、折りたたみマーク
なおデフォルトではスペースがないため、menufolder.js を任意のエディタで開き、下記の青色部分のように「1」に変更すれば、スクリーンショットのように件数とマークの間にスペースが挿入されます。
：
// サブカテゴリーのタイトルとマークのスペース
var offsetForTitleAndMarkOfSubcategory = 1;
：また、カテゴリー名の左側に折りたたみマークを表示する場合は、同じファイルの下記の青色部分のように「true」を設定します。
：
// サブカテゴリー用折りたたみマーク挿入位置
// カテゴリー前に折りたたみマークを配置：true
// カテゴリー後に折りたたみマークを配置：false
var preMarkForSubCategory = true;
：６．その他
なお本プラグインは sb パッケージに含まれる
- sb/Content.pm::_category_tree
- sb/Content.pm::_list_category
を利用したものです（sb研究所様へは連絡済）ので、プラグイン改造等による再配布はご遠慮ください。
2005.12.10 追記
ブログの文字コードがEUCの場合の考慮がもれていましたので、プラグインを修正しました。
2005.12.12 追記
他サイトの公開テンプレートへの適用例を追加しました。
