小粋空間  -  a cheap joke and a play on words site

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

以前投稿した、新着エントリー等へ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 マーク表示を設定した全てのリストにタイムスタンプが表示されてしまいます。

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