TopMovable Typeカスタマイズ新着表示 > New マーク表示カスタマイズ改善のお知らせ
2006年4月18日

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

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

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

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

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

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

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

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

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

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].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(":");

になります。

3.CSS修正

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

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

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

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

Posted by yujiro
関連記事
人気エントリー
トラックバック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
コメントする

*必須



太字 イタリック アンダーライン ハイパーリンク 引用

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

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

Now loading...
Entry Trackbacks
Movable Type って…
 [Stray child's expert] 05/15 00:44
Movable Type って…
 [Stray child's expert] 05/15 00:48
新着マーク表示を一部改善
 [PARADISE BLOG] 12/26 22:56
Entries of this Category
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 ...
BlogPeople
Now loading...
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 4.1
 
List Me!