<< 折りたたみ | Main | 最近のエントリー >>
Top ＞ Movable Type ＞ カスタマイズ ＞ 新着表示 [全て開く]
2006年9月 6日

投稿者情報に New マークをつける

September 6,2006 1:20 AM
Tag：[, ]
Permalink

投稿者情報に New マークをつけるMovable Type のエントリーに新着コメントまたは新着トラックバックがあった場合、エントリーの下に表示されている投稿者情報に New マークをつけるカスタマイズです。ご質問を頂きましたので本エントリーにてご紹介致します。

スクリーンショットはデフォルトテンプレートに設置した例です。新着コメントまたは新着トラックバックと連動して「New!」マークまたは任意の画像を表示させることができます。
また JavaScript を利用してますので、投稿からの経過時間をリアルタイムに計測して、新着マークの表示・非表示が制御できます。表示判定は時間単位での設定が可能です。

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

１．テンプレートの修正

メインページ／カテゴリー・アーカイブ／日付アーカイブの中から新着表示を行いたいテンプレートに対し、下記の設定を行います。コメント・トラックバックに分けてますので、必要な分だけ設定してください。

１．１ コメントの新着表示

デフォルトテンプレートと公開テンプレートの設定例を下記に示します。青色で表示している部分を追加してください。

デフォルトテンプレートの場合

<MTIfCommentsActive>| <a href="<$MTEntryPermalink$>#comments">コメント (<$MTEntryCommentCount$>)</a> <MTComments lastn="1"><span class="new"><$MTCommentDate format="%Y:%m:%d:%H:%M:%S"$></span></MTComments></MTIfCommentsActive>

公開テンプレートの場合

<!-- コメント・非ポップアップ用 -->
 | <a href="<$MTEntryPermalink archive_type="Individual"$>#comments" title="comments<$MTEntryID$>">Comments</a> [<$MTEntryCommentCount$>] <MTComments lastn="1"><span class="new"><$MTCommentDate format="%Y:%m:%d:%H:%M:%S"$></span></MTComments>

１．２ トラックバックの新着表示

デフォルトテンプレートと公開テンプレートの設定例を下記に示します。青色で表示している部分を追加してください。

デフォルトテンプレートの場合

<MTIfPingsActive>| <a href="<$MTEntryPermalink$>#trackback">トラックバック (<$MTEntryTrackbackCount$>)</a> <MTPings lastn="1"><span class="new"><$MTPingDate format="%Y:%m:%d:%H:%M:%S"$></span></MTPings></MTIfPingsActive>

公開テンプレートの場合

<!-- トラックバック・非ポップアップ用 -->
 | <a href="<$MTEntryPermalink archive_type="Individual"$>#trackbacks" title="trackbacks<$MTEntryID$>">Trackbacks</a> [<$MTEntryTrackbackCount$>] <MTPings lastn="1"><span class="new"><$MTPingDate format="%Y:%m:%d:%H:%M:%S"$></span></MTPings>

２．スクリプトの追加

下記のスクリプトを新着表示を設定したテンプレートの最後の方（</body> の前）に設定します。すでに新着表示のカスタマイズをされている場合は設定不要です。

<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" />';

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

３．CSS設定

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

span.new {
    display: none;
    color: red;
    font-weight: bold;
}
Comments [5] | Trackbacks [0]
2006年8月15日

新着トラックバックに New マークをつける

August 15,2006 12:53 AM
Tag：[, , ]
Permalink

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

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

動作は、トラックバック受信時間をページ上に表示させておき（CSSで非表示）、JavaScript でその投稿時間を取得し、現在時刻との差を計算して指定時間以内であればテキストまたは画像を表示する、という仕組みです。

１．テンプレートの修正

１．１ 公開テンプレートの場合

<!-- 最近のトラックバック開始 -->
<div class="sidetitle">
Recent Trackbacks
</div>
 
<div class="side">
<MTPings lastn="10">
<a href="<$MTPingURL$>" target="_blank" title="t<$MTPingID$>"><$MTPingTitle$></a><br />
from <$MTPingBlogName$> <$MTPingDate format="%m/%d %X"$> <span class="new"><$MTPingDate format="%Y:%m:%d:%H:%M:%S"$></span><br />
</MTPings>
</div>
<!-- 最近のトラックバック終了 -->

１．２ recently_pinged_on プラグインの場合

Ogawa::Memoranda さんの recently_pinged_on プラグインに設定する方法です。

<dl>
  <MTEntries recently_pinged_on="5">
    <dt><a href="<$MTEntryLink$>"><$MTEntryTitle$></a></dt>
    <MTPings lastn="5">
      <dd><a href="<$MTPingURL$>" rel="nofollow">
          <$MTPingBlogName$>: <$MTPingTitle$></a> <span class="new"><$MTPingDate format="%Y:%m:%d:%H:%M:%S"$></span></dd>
    </MTPings>
  </MTEntries>
</dl>

１．３ Recents プラグインの場合

The blog of H.Fujimoto さんのRecents プラグインに設定する方法です。

<ul>
<MTPingsRecent lastn="10" ping_sort_order="ascend">
<MTPingsRecentIfEntry><li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></MTPingsRecentIfEntry>
<MTPingsRecentIfPing>
<MTPingsRecentHeader><ul></MTPingsRecentHeader>
<li><a href="<$MTPingURL$>"><$MTPingTitle$></a> <$MTPingDate format="%m/%d"$> <span class="new"><$MTPingDate format="%Y:%m:%d:%H:%M:%S"$></span></li>
<MTPingsRecentFooter></ul></li></MTPingsRecentFooter>
</MTPingsRecentIfPing>
</MTPingsRecent>
</ul>

２．スクリプトの追加

１項のタグを設定したテンプレートの最後の方に、下記のスクリプトを追加します（上記タグの中に埋め込まないでください）。
他の新着表示で利用している場合、スクリプトの設定は不要ですが、スクリプトがトラックバック表示より後方になるように設定してください。

<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" />';

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

３．CSS設定

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

span.new {
    display: none;
    color: red;
    font-weight: bold;
}
Comments [5] | Trackbacks [3]
2006年4月18日

New マーク表示カスタマイズ改善のお知らせ

April 18,2006 1:10 AM
Tag：[, , ]
Permalink

Another HTML-lint gatewayエラー以前投稿した、新着エントリー等へNewマークを表示するカスタマイズについての改善案をお知らせします。

当初、span 要素の中にHTMLコメントでエントリー投稿時刻やコメント投稿時刻を埋め込む方式を紹介していましたが、span 要素の内容が空き（コメントも空きとみなされます）となることは好ましくありません。この状態のHTMLページを Another HTML-lint gateway でチェックすると、スクリーンショットのようにエラーが多発します。
考慮不足であったこと、この場をお借りしてお詫び申し上げます。

改善した方式は、HTMLコメントを外し、CSSで非表示にするようにします。とりあえず下記のエントリーは元記事を修正しています。

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

ここでは新着エントリーのあるカテゴリーに New マークをつけるで紹介している内容の変更点についてお知らせします。部分的な変更をする自信のない方は元記事のカスタマイズを再度実施してください。
なおエラー自体は軽微なものですので、気にならない方はそのままでも構いません。

１．HTMLタグからコメントマークを外す

まず、HTMLタグからHTMLコメントマークである「<!--」と「-->」を外してください。最近のエントリーを例にすると、下記の赤色部分を削除します。

<!-- エントリーリスト開始 -->
<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>
<!-- エントリーリスト終了 -->

他のリストの場合も同様の修正を行ってください。

２．スクリプトの修正

下記のように赤色部分を削除して青色に置き換え、または追加します。

<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].nodeValueinnerHTML.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>

上記リストの中間辺りにある、タイムスタンプ部分を取得するコードを再掲しておきますと、

time = spans[i].childNodes[0].nodeValue.split(":");

から

time = spans[i].innerHTML.split(":");

になります。

３．CSS修正

スタイルシートの .new に display プロパティを追加してください。

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

この設定を行わないと、New マーク表示を設定した全てのリストにタイムスタンプが表示されてしまいます。

以上です。
新着マーク表示の他の記事について現段階では未修正ですが、上記と同様の修正を行えば動作すると思います。

Comments [2] | Trackbacks [3]
2006年2月28日

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

February 28,2006 2:22 AM
Tag：[, , , , ]
Permalink

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

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

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

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

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

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

<!-- サブカテゴリー用 -->
<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>
<!-- サブカテゴリー用 -->

１．２ スクリプトの設定・CSSの設定

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

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

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

２．１ サブカテゴリーリストの修正

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

<!-- サブカテゴリー用 -->
<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>
<!-- サブカテゴリー用 -->

２．２ スクリプトの追加

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

<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') {
        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 マークを与えています。

２．３ CSSの設定

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

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

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

Comments [5] | 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 でその投稿時間を取得し、現在時刻との差を計算して指定時間以内であればテキストまたは画像を表示するという仕組みです。

１．テンプレートの修正

１．１ 公開テンプレートの場合

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

<!-- 最近のコメント開始 -->
<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>
<!-- 最近のコメント終了 -->

１．２ 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>

１．３ 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>

２．スクリプトの追加

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

<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" />';

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

３．CSS設定

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

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

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

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

Comments [27] | Trackbacks [8]
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 でその投稿時間を取得し、現在時刻との差を計算して指定時間以内であればテキストまたは画像に置き換えて表示するという仕組みです。

１．テンプレートの修正

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

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

<!-- エントリーリスト開始 -->
<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>
<!-- エントリーリスト終了 -->

１．２ カテゴリーリストの場合

<!-- カテゴリーリスト開始 -->
<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>
<!-- 全カテゴリー用 -->

１．３ サブカテゴリーリストの場合

<!-- カテゴリーリスト開始 -->
<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>
<!-- サブカテゴリー用 -->

２．スクリプトの追加

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

<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" />';

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

３．CSS設定

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

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

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

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

2006.02.21 追記
３項を追加しました。

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

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

Comments [75] | Trackbacks [17]
Now loading...
List of "新着表示"
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
＜ Default ＞
For defective color vision
Gray Scale
RGB Color
Search this site

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

loading ...
Category Monthly Archives
BlogPeople
Now loading...
Syndicate this site
FeedBurner（RSS1.0/RSS2.0/Atom）
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 4.1
 
List Me!