カテゴリリストのカテゴリに「new」マークを付ける

| コメント(0) | トラックバック(0)

小粋空間さんを参考にしました。
http://www.koikikukan.com/archives/2006/02/20-235151.php

<span class="new"><MTEntries lastn="1"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></MTEntries></span>

上記をカテゴリリストに追加する。
うちは、カテゴリレベルを日本語表記にしているので、このようになりました。

<a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>
"><$MTCategoryDescription$></a><span class="new">
<MTEntries lastn="1"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></MTEntries></span>


それで、各テンプレートの下部に下記Javascriptを追加。

<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>

・「new」マークを表示している時間をここで調節。

// passage time
var pass = 24;

・「new」マークの表記をここで調節。タグを入れられるので、画像も可能だそうです。

// display content
var content = 'New';

・cssの設定。
小粋空間さんは、font-weightをboldにしていらっしゃったんですが、うちはboldにしたくなかったのでカット。

span.new {
display: none;
color: red;
}

----

本当は特定カテゴリのみにnewマークを表示したかったんだけど、よくわからなかったのでこれで妥協。

トラックバック(0)

トラックバックURL: http://raiga.net/mt/mt-tb.cgi/1506

コメントする