TopMovable Typeカスタマイズ新着表示 > 2006年2月
2006年2月28日

新着エントリーの New マークを親カテゴリーに表示する

新着エントリーの New マークを親カテゴリーに表示する先日エントリーした「新着エントリーに New マークをつける」で「サブカテゴリーリストを折りたたんだ状態で親カテゴリーにもNewマークを表示させたい」というご要望をいただきましたので、本エントリーにてご紹介します。
このカスタマイズを行うことで、スクリーンショットのように子カテゴリー [Linux] を新規エントリーした際、最上位の親カテゴリー [趣味] にも New マークを表示します(折りたたみマークは割愛)。

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

1.サブカテゴリー構成が2階層の場合

サブカテゴリー構成が2階層の場合、親カテゴリーに子カテゴリーの新着エントリーの日付を反映させることで、New マークを表示させます。ただし New マークは全ての親カテゴリーに反映されるので、3階層以上のカテゴリー構成の場合は2項をご利用ください。

1.1 サブカテゴリーリストの修正

サブカテゴリーリストの折りたたみ用タグ(下記)に青色部分を追加します。

<!-- サブカテゴリー用 -->
<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$>] <span class="new"><MTEntriesWithSubCategories lastn="1"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></MTEntriesWithSubCategories></span><MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <span class="new"><MTEntriesWithSubCategories lastn="1"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></MTEntriesWithSubCategories></span>
<MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
<!-- サブカテゴリー用 -->

1.2 スクリプトの設定・CSSの設定

スクリプトの設定・CSSの設定については新着エントリーに New マークをつけるを参照ください。

2.サブカテゴリー構成が3階層以上の場合

サブカテゴリー構成が3階層以上の場合は、途中の親カテゴリーに New マークを表示させないようにするため、1項とは設定内容が異なります。

2.1 サブカテゴリーリストの修正

サブカテゴリーリストの折りたたみ用タグ(下記)に青色部分を追加してください。

<!-- サブカテゴリー用 -->
<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$>] <span class="new"><MTEntries lastn="1"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$>:</MTEntries><MTTopLevelParent><$MTCategoryID$></MTTopLevelParent></span><MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <span class="new">00:00:00:00:00:00:<MTTopLevelParent><$MTCategoryID$></MTTopLevelParent></span><MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
<!-- サブカテゴリー用 -->

2.2 スクリプトの追加

下記のスクリプトを2.1項のタグの下に追加してください。

<script type="text/javascript">
<!--
// passage time
var pass = 24;
 
// display content
var content = 'New!!';
 
var currentDate = new Date();
var spans = document.getElementById('categories').getElementsByTagName('span');
var list = new Array();
for (i = 0; i < spans.length; i++) {
    if(spans[i].getAttribute('class') == 'new' ||
        spans[i].getAttribute('className') == 'new') {
        if (spans[i].childNodes[0]) {
            time = spans[i].childNodes[0].nodeValue.split(":");
            var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]); 
            list.push(time[6]);
            var now = (entryDate.getTime() - currentDate.getTime())/(60*60*1000); 
            now = Math.ceil(now);
            if(-now <= pass){
                spans[i].innerHTML = content;
                spans[i].style.display = 'inline';
                for(j = 0; j < list.length; j++){
                    if(list[j] == time[6]){
                        spans[j].innerHTML = content;
                        spans[j].style.display = 'inline';
                        break;
                    }
                }
            }
        }
    }
}
//-->
</script>

このスクリプトの動作ですが、各カテゴリーの日付の最後に最上位の親カテゴリーIDを予め付与しておき、新着エントリーがあった場合にその親カテゴリーIDのカテゴリーを再検索して、New マークを与えています。

2.3 CSSの設定

CSSの設定については新着エントリーに New マークをつけるを参照ください。

2006.02.28 追記
2.2項、3項でエントリーが存在しない親カテゴリーの考慮がもれていましたのでタグを修正しました。

2006.08.19
記事を全面修正しました。

2009.01.06
スクリプトを修正しました。

Comments [16] | Trackbacks [0]
2006年2月22日

新着コメントに New マークをつける

February 22,2006 11:56 PM
Tag:[, , , ]
Permalink

新着コメントに New マークをつける新着エントリーに New マークをつけるの「最近のコメント」版で、「最近のコメント」の新着コメントに「New!!」というテキストや画像を表示するカスタマイズです。

「コメント投稿後×時間以内」という指定により任意のテキストまたは画像を指定したリストに表示することができます。JavaScript で書きましたのでテンプレートにタグを追加するだけで動作します。また JavaScript OFF の場合は何も表示されないようにしています。Windows2000/XPのIE6.0・Firefox1.0・Opera8.0で動作確認しています。

動作はコメントの投稿時間をコメントタグで予め表示させておき、後から JavaScript でその投稿時間を取得し、現在時刻との差を計算して指定時間以内であればテキストまたは画像を表示するという仕組みです。

1.テンプレートの修正

1.1 公開テンプレートの場合

「最近のコメント」タグに下記のように青色部分を追加します。

<!-- 最近のコメント開始 -->
<div class="sidetitle">
Recent Comments
</div>
 
<div class="side">
<MTEntries recently_commented_on="5">
<a href="<$MTEntryLink$>"><MTEntryTitle></a>
<br />
<MTComments lastn="5">
└ <a href="<$MTEntryLink$>#c<$MTCommentID$>" title="c<$MTCommentID$>">
<MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$> <span class="new"><$MTCommentDate format="%Y:%m:%d:%H:%M:%S"$></span><br />
</MTComments>
</MTEntries>
</div>
<!-- 最近のコメント終了 -->

1.2 Recents プラグインの場合

The blog of H.Fujimotoさんの最近のコメント/トラックバックをエントリーとともに表示するプラグインのサンプルリストを元に修正したものです。

<ul>
<MTCommentsRecent lastn="10" comment_sort_order="ascend">
<MTCommentsRecentIfEntry><li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>(<$MTEntryDate$>)</MTCommentsRecentIfEntry>
<MTCommentsRecentIfComment>
<MTCommentsRecentHeader><ul></MTCommentsRecentHeader>
<li><$MTCommentAuthorLink$>(<$MTCommentDate$>) <span class="new"><$MTCommentDate format="%Y:%m:%d:%H:%M:%S"$></span></li>
<MTCommentsRecentFooter></ul></li></MTCommentsRecentFooter>
</MTCommentsRecentIfComment>
</MTCommentsRecent>
</ul>

1.3 MTCollate プラグインの場合

以下は当サイトで公開しているMTCollate を使って「最近のコメント」を表示するのサンプルを元に修正したものです。

<MTCollateCollect>
<MTComments lastn="10">
<MTCollateRecord>
<MTCollateSetField name="comment_id"><$MTCommentID$></MTCollateSetField>
<MTCollateSetField name="comment_author"><$MTCommentAuthor$></MTCollateSetField>
<MTCollateSetField name="comment_date"><$MTCommentDate format="%m/%d"$></MTCollateSetField>
<MTCollateSetField name="comment_newdate"><$MTCommentDate format="%Y:%m:%d:%H:%M:%S"$></MTCollateSetField>
<MTCommentEntry>
<MTCollateSetField name="entry_key"><MTComments lastn="1"><$MTCommentDate format="%y%m%d%H%M%S"$></MTComments></MTCollateSetField>
<MTCollateSetField name="entry_link"><$MTEntryPermalink$></MTCollateSetField>
<MTCollateSetField name="entry_title"><$MTEntryTitle$></MTCollateSetField>
</MTCommentEntry>
</MTCollateRecord>
</MTComments>
</MTCollateCollect>
 
<div class="sidetitle">
Recent Comments
</div>
 
<div class="side">
<MTCollateList sort="entry_key:#:- comment_id:#:+">
<MTCollateIfHeader name="entry_key">
<a href="<$MTCollateField name="entry_link"$>" title="<$MTCollateField name="entry_title" encode_html="1"$>"><$MTCollateField name="entry_title"$></a><br /></MTCollateIfHeader>
└ <a href="<$MTCollateField name="entry_link"$>#<$MTCollateField name="comment_id"$>" encode_html="1"><$MTCollateField name="comment_author"$></a> <$MTCollateField name="comment_date"$> <span class="new"><$MTCollateField name="comment_newdate"$></span><br />
</MTCollateList>
</div>

2.スクリプトの追加

上記を設定したテンプレートの最後の方に下記のスクリプトを追加します。

<script type="text/javascript">
<!--
// 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') {
        time = spans[i].childNodes[0].nodeValue.split(":");
        var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]); 
        var now = (entryDate.getTime() - currentDate.getTime())/(60*60*1000); 
        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" />';

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

3.CSS設定

表示するテキストは new という class 属性つきの span タグで括られていますので、

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

2006.08.15 追記
HTMLタグおよびスクリプトにコメントアウトする方式の設定が残っていましたので修正しました。

2006.08.18 追記
CSS に display プロパティがもれていたので追加しました。

Comments [30] | Trackbacks [9]
2006年2月20日

新着エントリーのあるカテゴリーに New マークをつける

February 20,2006 11:51 PM
Tag:[, , , ]
Permalink

新着エントリーに New マークをつける「最近のエントリー」の新着エントリーやカテゴリーリスト・サブカテゴリーリストで新着エントリーのあるカテゴリーに「New!!」というテキストや画像を表示するカスタマイズです(スクリーンショットはサブカテゴリーリストの完成イメージ)。

「エントリー投稿後×時間以内」という指定により任意のテキストまたは画像を指定したリストに表示することができます。JavaScript で書きましたのでテンプレートにタグを追加するだけで動作します。また JavaScript OFF の場合は何も表示されないようにしています。Windows2000/XPのIE6.0・Firefox1.0・Opera8.0で動作確認しています。

動作はエントリー(カテゴリーリストは最新1件)の投稿時間をコメントタグで予め埋め込んでおき、CSSで非表示にします。そして JavaScript でその投稿時間を取得し、現在時刻との差を計算して指定時間以内であればテキストまたは画像に置き換えて表示するという仕組みです。

1.テンプレートの修正

Newマークを表示したいテンプレートに下記の青色部分を追加します。例は公開テンプレートです。

1.1 「最近のエントリー」の場合

<!-- エントリーリスト開始 -->
<div class="sidetitle">
Recent Entries
</div>
 
<div class="side">
<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a> <span class="new"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></span><br />
</MTEntries>
</div>
<!-- エントリーリスト終了 -->

1.2 カテゴリーリストの場合

<!-- カテゴリーリスト開始 -->
<div class="sidetitle">
Categories
</div>
 
<!-- 全カテゴリー用 -->
<div class="side" id="test">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a>  [<$MTCategoryCount$>] <span class="new"><MTEntries lastn="1"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></MTEntries></span><br />
</MTCategories>
</div>
<!-- 全カテゴリー用 -->

1.3 サブカテゴリーリストの場合

<!-- カテゴリーリスト開始 -->
<div class="sidetitle">
Categories
</div>
 
<!-- サブカテゴリー用 -->
<div class="side">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <span class="new"><MTEntries lastn="1"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></MTEntries></span><MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div>
<!-- サブカテゴリー用 -->

2.スクリプトの追加

上記タグを設定した各テンプレートの最後の方に下記のスクリプトを追加します(上記タグの中に埋め込まないでください)。

<script type="text/javascript">
<!--
// 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') {
        if (spans[i].childNodes[0]) {
            time = spans[i].childNodes[0].nodeValue.split(":");
            var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]); 
            var now = (entryDate.getTime() - currentDate.getTime())/(60*60*1000); 
            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" />';

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

3.CSS設定

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

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

以上です。参考サイトは下記です。ありがとうございました。

JavaScript で遊ぼう指定した日までカウントダウンする

2006.02.21
3項を追加しました。

2006.04.18
HTMLコメントの設定からCSSで非表示にする方式に変更しました。

2006.07.02
説明文を修正しました。

2009.01.04
エントリーのないカテゴリーを処理すると正常に動作しないという不具合があるため、スクリプトを修正しました。

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