Top > CMS・ブログ > Serene Bach > カスタマイズ > プルダウン > 2005年12月
2005年12月10日

カテゴリーのプルダウン化プラグインを blog*citron さんのテンプレートで使う方法

December 10,2005 11:53 PM
Tag:[, , , ]
Permalink

針ねずみのノート#003 ver2.00昨日公開した Serene Bach 用カテゴリーのプルダウン化プラグインですが、sb および Serene Bach のテンプレートとしてデファクトスタンダードな blog*citron さんのテンプレートに適用する方法をご紹介しておきます。
左のスクリーンショットは「針ねずみのノート#003 ver2.00」にプラグインを適用した場合の完成例です。

ちなみに本家さまでもカテゴリーのプルダウン化が公開されたようです。

以下、カスタマイズ方法です。

まず、カテゴリーのプルダウン化プラグイン for Serene Bach の1?3項までの作業を行ってください。そして4項の作業について、下記の内容に変更して実施してください。

4.独自タグの設定2

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 の追加が必要になるかもしれません。もし現在のスタイルが適用されなくなってしまった場合は、お手数ですがご連絡ください。

またスクリーンショットは、エントリー件数と折りたたみマークの間にスペースを設けて表示していますが、これは元記事の5項の作業を行ってください。

Comments [16] | Trackbacks [0]
2005年12月 9日

カテゴリーのプルダウン化プラグイン for Serene Bach

カテゴリーのプルダウン化プラグインSerene Bach 用のカテゴリーをプルダウン化するプラグインです。スクリーンショットのようにカテゴリー名の横に折りたたみマーク(▲または▼)のリンクを表示し、リンクをクリックすることでカテゴリーの折りたたみができます。当サイトのカテゴリーリストで同じものを使っておりますので、そちらで実際の動作を確認頂ければ幸いです。
画像はツリー化の状態で表示しておりますが、本プラグインで提供するのはプルダウン部分のみです。

2008.09.22 本プラグインはバージョンアップしています。
詳細は「Serene Bach カテゴリーのプルダウン化プラグイン v3.00」をご覧ください。

2007.04.02 本プラグインはバージョンアップしています。
詳細は「カテゴリーのプルダウン化プラグイン・バージョンアップ」をご覧ください。

プルダウンの仕様は下記の通りです。

  • 親カテゴリーに折りたたみマークを表示します。
  • cookie を利用して折りたたみ状態を保持しますので、リロードやブラウザを新しく開いても以前の折りたたみ状態を表示することができます。
  • 設定を変更することで折りたたみマークをカテゴリーの左側に表示させることもできます。
  • 親カテゴリーの記事数を子カテゴリーの記事数と合算表示できます。
  • カテゴリー名の横に新着表示が可能です。
  • ツリー化スクリプトとの併用が可能です。

プルダウン動作は Windows2000/XP の IE/Firefox/Opera で確認しております。他の環境はもっておりませんので予めご了承ください。

前置きが長くなりましたが、以下カスタマイズ方法です。

1.プラグインのダウンロード・アップロード

下記の FoldCategory.zip または FoldCategory.lzh をクリックして、プラグインのアーカイブをダウンロードしてください。

修正履歴

2005.12.09 初版
2006.02.12 個別エントリーで表示されるカテゴリーリストの各カテゴリー件数が全て0になる不具合を修正
2007.10.13 親カテゴリーにサブカテゴリーの記事数を合計して表示・記事数の表示・非表示の切り替え・記事数を括るマークに任意の文字列を設定可能
2008.07.03 記事がないカテゴリーに「0件」を出力する不具合を修正
2008.08.28 記事がないカテゴリーにリンクを設定する不具合を修正
2008.09.22 新着表示プラグイン(サブカテゴリーリスト版)と合体
FoldCategory.zip

ダウンロードしたアーカイブを解凍し、中にある FoldCategory.pm を plugins ディレクトリ直下に、resource/ja/foldcategory.txt を、同じディレクトリの構成があると思いますので、foldcategory.txt のみを ja 配下にアップロードしてください。

アップロードの後、Serene Bach の管理画面を起動し、「環境設定」→「プラグイン」をクリックし、プラグイン一覧に FoldCategory.pm が表示されていることを確認し、一番右のチェックボックスをチェックして右下の「利用する」をクリックしてください。

2.スクリプトのダウンロード・アップロード

このプラグインを動作させるためには menufolder.js というスクリプトが別途必要になります。サイドメニューの折りたたみで menufolder.js をすでにお使いの場合は、本項目および3項の作業をスキップしてください。下記のリンク先より menufolder.js をダウンロードしてください。ダウンロードした menufolder.js を index.html のあるディレクトリにアップロードしてください。

download

3.独自タグの設定1

2項でダウンロードした menufolder.js を使うための宣言を、ベースHTMLテンプレートに設定します。個別エントリー用HTMLテンプレートを設定している場合はそちらも同じ設定を行ってください。
下記のように </head> の前辺りに青色のブロックおよび独自タグを設定します。

      :
<!-- BEGIN fold_category -->
{fold_category_script}
<!-- END fold_category -->
</head>
      :

4.独自タグの設定2

ベース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 -->
      :

5.折りたたみマークに関するカスタマイズ

基本的な設定は以上ですが、折りたたみマーク
なおデフォルトではスペースがないため、menufolder.js を任意のエディタで開き、下記の青色部分のように「1」に変更すれば、スクリーンショットのように件数とマークの間にスペースが挿入されます。

       :
// サブカテゴリーのタイトルとマークのスペース
var offsetForTitleAndMarkOfSubcategory = 1;
       :

また、カテゴリー名の左側に折りたたみマークを表示する場合は、同じファイルの下記の青色部分のように「true」を設定します。

       :
// サブカテゴリー用折りたたみマーク挿入位置
// カテゴリー前に折りたたみマークを配置:true
// カテゴリー後に折りたたみマークを配置:false
var preMarkForSubCategory = true;
       :

6.スクリプトの追加(新着表示を行う場合のみ)

まず、8項の設定画面で「新着表示」を「新着表示対応する」に設定してください。

次に、ベースHTMLテンプレートの、4項で設定した独自タグのすぐ後ろに、下記のスクリプト(青色)を追加してください。

       :
<!-- BEGIN fold_category -->
<div class="sidetitle">Categories</div>
<div class="side" id="categories">{fold_category_list}</div>
<!-- END fold_category -->
 
<script type="text/javascript">
//<![CDATA[
// passage time
var pass = 24;
 
// display content
var content = 'New!!';
 
var currentDate = new Date();
var spans = document.getElementsByTagName('span');
for (i = 0; i < spans.length; i++) {
    if(spans[i].getAttribute('class') == 'new' ||
       spans[i].getAttribute('className') == 'new') {
        var now = (spans[i].innerHTML - (Math.ceil(currentDate.getTime()/1000))) /(60*60);
        now = Math.ceil(now);
        if(-now <= pass){
            spans[i].innerHTML = content;
            spans[i].style.display = 'inline';
        }
    }
}
//]]>
</script>

新着表示の時間は

// passage time
var pass = 24;

の赤色部分を変更します。単位は時間です(例は24時間)。

表示させる内容は

// display content
var content = 'New!!';

の赤色部分を変更してください。HTMLタグも大丈夫ですので

var content = '<img src="http://~/hogehoge.gif" style="vertical-align: middle" />';

とすれば画像を表示することもできます。

7.スタイルシートの設定(新着表示を行う場合のみ)

スタイルシートに下記の設定を追加します。最初の display プロパティで1項のタグに設定したタイムスタンプを非表示にします。その下の color プロパティと font-weight プロパティは、 New!! という文字が表示された場合に適用される設定です。

span.new {
    display: none;
    color: red;
    font-weight: bold;
}

プロパティは適宜変更してお好みのデザインにしてください。

8.設定画面

  • 記事数表示
  • 親カテゴリーへの子カテゴリーの合算
  • 記事数表示を括る文字
  • 新着表示

については、管理画面の「追加機能」に表示された「カテゴリーのプルダウン化」のページ(下)から設定できます。

管理画面の「追加機能」に表示された「カテゴリーのプルダウン化」のページ

9.その他

なお本プラグインは sb パッケージに含まれる

sb/Content.pm::_category_tree
sb/Content.pm::_list_category

を利用したものです(sb研究所様へは連絡済)ので、プラグイン改造等による再配布はご遠慮ください。

2005.12.10
ブログの文字コードがEUCの場合の考慮がもれていましたので、プラグインを修正しました。

2005.12.12
他サイトの公開テンプレートへの適用例を追加しました。

2008.08.24
プラグインの修正履歴を追加しました。

2008.09.22
6項~8項を追加しました。

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

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


AMN
Categories
Monthly Archives
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