小粋空間: New マーク表示カスタマイズ改善のお知らせ

Top ＞ Movable Type ＞カスタマイズ＞新着表示＞ New マーク表示カスタマイズ改善のお知らせ

News

各種ブログテンプレート

2006年4月18日

エントリー本文

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

Posted at April 18,2006 1:10 AM
Category：[新着表示]
Tag：[Customize, Information, MovableType]

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 マーク表示を設定した全てのリストにタイムスタンプが表示されてしまいます。

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

Posted by yujiro ReTweet This!

« SCode プラグインでコメントスパムを制限する（その1：基本設定） | Main | トミカショップ »

この記事を読んだ人はこんな記事も読んでいます

人気エントリー

Hatena Hot Entries

Hatena Entries

トラックバックURL

このエントリーのトラックバックURL:

このブログは重複トラックバック防止プラグインにより、同一エントリーに対する同一のトラックバックは登録されないようにしています（記事のタイトルまたは記事の概要が異なる場合は登録されます）。

トラックバック

≫ Movable Type って… from Stray child's expert
MTと呼ばれるブログツール。自分でレンタルとかしてきたサーバーにあげて使う。こ... [続きを読む]

Tracked on May 15, 2006 12:44 AM

≫ Movable Type って… from Stray child's expert
MTと呼ばれるブログツール。自分でレンタルとかしてきたサーバーにあげて使う。こ... [続きを読む]

Tracked on May 15, 2006 12:48 AM

≫ 新着マーク表示を一部改善 from PARADISE BLOG
以前、行なった「新着表示に、Newマークを付ける」を参考に、させて頂いた小... [続きを読む]

Tracked on December 26, 2006 10:56 PM

いつもお世話になております。この度、この記事を拝見させて頂き不具合があるとの事なので早速修正させて頂いたところ、スクリプトの修正をするとカテゴリーでのNEW表示がしなくなりました。（他の修正箇所については、記事通りにしました）どうしてでしょうか？お手数ですがサポートの程宜しくお願い致します。

[1] Posted by panser : May 14, 2006 12:20 PM

＞panserさん
こんばんは。
ご利用ありがとうございます。
ご質問の件ですが、単に24時間以上経過しているので表示されないだけのようです。
それではよろしくお願い致します。

[2] Posted by yujiro : May 15, 2006 12:01 AM

こんにちは。飄々（ひょうひょう）です。
ツリー化＆経過日数表示＆新着表示を同時に装着したいのですが、新着表示が「New！！」のテキストであれば同時に３種類を使い分けて表示するものの、新着表示を「New」のアイコンにすると表示されません。
原因と対処法を教えてくださるようお願いします。
それとも３種類同時使い分けの場合はこれでやむを得ないのでしょうか。

[3] Posted by 飄々（ひょうひょう） : June 7, 2008 1:40 PM

いつもお世話になっています。
いきなりで申し訳ありませんが、質問します。MT4.25をインストールして新着記事のあるカテゴリに、上記の方法で設定したんですが、どうしてもエラーが出てしまいます。
他の新着コメントや、エントリーには設定できたのですが、カテゴリだけはどうしてもできません。よろしければ、何かヒントを頂けないでしょうか？
ちなみにエラー内容は
「カテゴリ「2」の再構築中にエラーが発生しました: テンプレート「カテゴリ別ブログ記事リスト」の再構築中にエラーが発生しました: <mtInclude>タグでエラーがありました: error in module サイドバー: テンプレート「サイドバー」の再構築中にエラーが発生しました: <mtIf>タグでエラーがありました: <mtElse>タグでエラーがありました: <mtWidgetSet>タグでエラーがありました: <mtinclude>タグでエラーがありました: error in widget カテゴリアーカイブ: テンプレート「カテゴリアーカイブ」の再構築中にエラーが発生しました: <mtIfArchiveTypeEnabled>タグでエラーがありました: <mtTopLevelCategories>タグでエラーがありました: <mtEntryDate>タグでエラーがありました: mtEntryDateをコンテキスト外で利用しようとしています。MTEntriesコンテナタグの外部で使っていませんか?」
です。長文失礼しました。

[4] Posted by たまご : April 5, 2009 4:27 AM

＞たまごさん
こんにちは。
ご質問の件ですが、とりあえずエラーが発生しているテンプレート（ウィジェットの「カテゴリアーカイブ」でしょうか）を貼り付けて送信してください。
それではよろしくお願い致します。

[5] Posted by yujiro

: April 5, 2009 3:58 PM

こんにちは、お忙しい中申し訳ありません。テンプレート（ウィジェットの「カテゴリアーカイブ」を貼り付けます。

------ここから-------
<mt:IfArchiveTypeEnabled archive_type="Category">
<div class="widget-archive widget-archive-category widget">
<h4 class="widget-header">カテゴリ</h4>
<div class="widget-content">
<MT:TopLevelCategories sort_method="SortCatFld::Sort">
<mt:SubCatIsFirst>
<ul>
</mt:SubCatIsFirst>
<mt:If tag="CategoryCount">
<li><a href="<$mt:CategoryArchiveLink$>"<mt:If tag="CategoryDescription"> title="<$mt:CategoryDescription remove_html="1" encode_html="1"$>"</mt:If>><$mt:CategoryLabel$></a>(<$mt:CategoryCount$>)
<mt:Else>
<li><$mt:CategoryLabel$>
</mt:If>
<$mt:SubCatsRecurse$>
</li>
<mt:SubCatIsLast>
</ul>
</mt:SubCatIsLast>
</MT:TopLevelCategories sort_method="SortCatFld::Sort">
</div>
</div>
</mt:IfArchiveTypeEnabled>
------ここまで-------

この中の(<$mt:CategoryCount$>)の後ろに

<span class="up"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></span>
↑↑↑
これを貼り付けたのですが、再構築でエラーになってしまいます。
モジュールテンプレの最近のブログ記事や、最近のコメントではきちんと表示されるのですが、ウィジェットのほうがどうしてもできなくて・・・
どうぞ宜しくお願い致します<(_ _)>

[6] Posted by たまご : April 6, 2009 3:35 PM

＞たまごさん
こんにちは。
分かりました。

<$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$>

の前後に

<MTEntries lastn="1">～</MT:Entries>

が必要です。

あと、本問題とは関係ありませんが、

</MT:TopLevelCategories sort_method="SortCatFld::Sort">

は、

</MT:TopLevelCategories>

で大丈夫です（終了タグにモディファイアは不要です）。
それではよろしくお願い致します。

[7] Posted by yujiro

: April 6, 2009 5:31 PM

こんばんは、たまごです。

ご指摘のとおりに訂正しましたところ、きちんと表示されるようになりました＾＾
あと最後のところも訂正しました。

どうも有り難う御座います、助かりました。

それでは失礼致します。

[8] Posted by たまご : April 6, 2009 9:38 PM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）:

URL（U）:

情報を保存する？

ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「<」、「>」は「>」と入力してください。例えば「<$MTBlogURL$>」は「<$MTBlogURL$>」となります（全て半角文字）