osone

NEWマークを任意の日数だけ表示させる

※※※URLが変更となりました。
以前のURLはこちら (http://tam-tam.co.jp/tipsnote/javascript/post729.html
ブックマークをされている方はお手数ですが変更をお願いいたします。※※※
 

新着ニュースや記事などで“更新から一週間だけ「NEW!」マークをつけたい”
ということが多々あると思います。
手動で更新するのはあまりに面倒ですよね。

方法はいくつかあるのですが、javascriptでわかりやすい方法をご紹介します。

以下を読み込みます。

<script type="text/JavaScript">
function new_mark(y, m, d, cl) {
  keep_day = 4; // この日数表示されます
  old_day = new Date(y + "/" + m + "/" +d);
  new_day = new Date();
  d =(new_day - old_day) / (1000 * 24 * 3600);

  if(d <= keep_day) {
    if(cl == "new") document.write("<img>または NEW! など"); // Newマーク
  }
}
//-->
</script>

NEWマークを画像で表示させる場合は絶対パスのほうがいいかもしれません。
MTであれば、MTタグを使用して指定してください。

HTMLの表示したい箇所に以下を直接記述

<script>new_mark(2011,1,31,"new")</script>

(ここの日付は、削除したい日付ではなく、更新した日付です)

keep_day = 4;

たとえば、keep_day = 5にすれば
2011年1月31日=new_mark(2011,1,31,"new")から
5日後にNEWマークの表示が消えます。
一週間後であれば keep_day に 7 を指定します。

MTの場合はこのようにテンプレートに書いておくと
自動で日付を入れてくれます。

<script>new_mark(<$mt:EntryDate language="en" format="%Y,%m,%d"$>,"new")</script>
新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら