FC2BLOGで最新リストに更新マーク(新着マーク)

前に「FC2BLOGで更新マーク(新着マーク)」というエントリーを書きましたが、今回は、サイドバーにある最新エントリー(ウチはページトップにあります)リストに更新マーク(新着マーク)を設置してみました。

参考にしたサイトは、ブログのカスタマイズでいつもお世話になってる小粋空間さんの「新着エントリーに New マークを表示する for FC2ブログ」です。そのうち設置してみようと思ってたのでほんとナイスタイミングです。さすがyujiroさん。


で、ウチの場合は、

<ul>
<!--recent-->
<li><a href="<%recent_link>" title="<%recent_title>"><%recent_title></a>(<%recent_month>/<%recent_day>) <span class="new"><%recent_year>:<%recent_month>:<%recent_day>:<%recent_hour>:<%recent_minute>:<%recent_second></span></li>
<!--/recent-->
</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>

としてみました。小粋空間さんとの違いは、エントリー日を入れたところです。(赤字の部分)

青字の部分を変更することで、マークが出ている時間や表示される文字や画像を変更することができます。

スタイルシートには、

span.new {
display: none;
color: #FF0000;
}

を追加。(これを追加しないとNew!!マークが出ていないときにエントリーの年月日時分秒が表示されます。)
青字の部分を変更することで表示する文字の色を変更できます。

ありがとうございましたm(_ _)m

Comment

Post a comment
















管理者にだけコメントをわたす。

 

Trackback

Trackback Pings

※この記事に関係の無いトラックバックは削除させていただきます。
FC2ブログユーザーは”こちら”をクリック。

このエントリーのURL
 

copyright © 武州屋 all rights reserved. Powered by FC2ブログ.ホームページ アフィリエイト レンタルサーバー FC2ブログ