nekoprojectブログ

はい。小説を更新しておりませんが別の記事をアップします。
※小説は明日あたりにうｐしたいところ……。

目次ページから更新したページにリンクをはる時、更新日時を手動で書いていました。
が、もう少しだけ簡単にしたいと思いまして。
jqueryも搭載していますし実装できないかな、と調べてみたところ良さそうなものを発見！

一定時間で自動的に消える New マークを付ける JavaScript の jQuery 版 | かたつむりくんのWWW

リンクタグ内のtitle要素を読み込んで、その日付が今日より3日以内ならNew印を付けるものです。これなら更新日付も残せますし古くなったらNew印が見えなくなるので最適です。
ただ、title要素は手動で書く＆○○年○○月○○日までで良いので、少々カスタマイズしてみました。

こちらが元のソース

$(document).ready(function(){
var currentDate = new Date();
$('.newmarkList').each(function(){
var pass // passage time
= 72;
var content // display content
= '<img class="newmark" title="3日以内の新着ブログ記事" src="/img/icon/newmark.gif" alt="3日以内の新着ブログ記事" width="15" height="15" />';
var newmarkAttr = $(this).attr('title');
newmarkAttr = newmarkAttr.replace(/年|月|日|時|分/g,':');
newmarkAttr = newmarkAttr.replace(/\s|秒.*/g,'');
var time = newmarkAttr.split(":");
var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]);
var now = (currentDate.getTime() - entryDate.getTime())/(60*60*1000);
now = Math.ceil(now);
if(now $(this).after(content);
}
});
});


カスタマイズ後のソース

$(document).ready(function(){
var currentDate = new Date();
$('.novelNote ol li a').each(function(){
var pass // passage time
= 168;
var content // display content
= '<span class="newmark">更新</span>';
var newmarkAttr = $(this).attr('title');
newmarkAttr = newmarkAttr.replace(/年|月/g,':');
newmarkAttr = newmarkAttr.replace(/\s|日.*/g,'');
var time = newmarkAttr.split(":");
var entryDate = new Date(time[0], time[1]-1, time[2]);
var now = (currentDate.getTime() - entryDate.getTime())/(60*60*1000);
now = Math.ceil(now);
if(now $(this).after(content);
}
});
});


変更したのはオレンジの箇所。上から順番に……

1. 元のソースではリンク内のnewmarkListクラスに適用されていましたが、クラス名の記載を省くため親タグから辿って該当するリンク全部に適用させました。
2. passage timeを3日間から7日間に増加。
3. display contentをテキストに修正して、表記を「更新」にしました。
4. 時間や秒はいらなかったので日付の末尾を「日」とし、不要なものを撤去。
5. new Dateで時間や秒が不要になったので併せて撤去

これで、更新してから7日間までのページに対して「更新」という表記が可能です。7日過ぎたものには表示されません。

◎設置例

headタグ内

<script type="text/javascript" src="/share/js/jquery.js"></script>
<script type="text/javascript" src="/share/js/newmark.js"></script> 

jquery本体へのリンクとカスタマイズしたjavascriptを読み込みます。

bodyタグ内

<div class="novelNote">
<ol>
<li><a href="/novel/contents/sample/1.php" title="2012年2月10日 更新">1</a></li>
<li><a href="/novel/contents/sample/2.php" title="2012年3月3日 更新">2</a></li>
<li><a href="/novel/contents/sample/3.php" title="2012年3月21日 更新">3</a></li>
</ol>
</div> 

.novelNote ol li aに適用させるので、上記例だとliに囲われたaが対象。
アンカータグ内のtitle要素の日付とページを閲覧している日付を比較します。今日は2012年3月23日なので3.phpへのリンクだけに「更新」と表示します。3月29日以降は更新の表示が自動で消えます。

満足(・ω・)

細かい仕様については元記事を確認してください。