FCafe  新着マーク 2

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

  で、今宵はコンテスト用テンプレートに用いたへたれスクリプトなどを御紹介しようかと。
以前コメント・TB等のナビリストに新着マークを表示するものを御紹介しましたが、今回は当店の Odin に載せた別バージョンです。
経過時間により段階的にCSSの属性( Odin ではサイズでしたが色でも背景色でも可)を変化させる事により、コメントや記事の新旧が一目瞭然となります。 宜しければお試しを。


【 設置方法 】  head 領域に以下のスクリプトを書きます

<script type="text/javascript"><--
var today=new Date();
function newMk(u1,u2,u3,u4) {
var c=new Date(u1,u2-1,u3,u4); var t=today-c; var m=0;
if (t<86400000) {m=4}
if (t<43200000) {m=3}
if (t<21600000) {m=2}
if (t<3600000) {m=1}
if (m>0) document.write('<span class="new n'+m+'">*</span>')}
}
--></script>

 新着マーク用のクラス設定をCSSに追加します ( Odin の場合 )

.new {color:red; font-weight:bolder; margin:0 0 0 -1px; vertical-align:top;}
.n1 {font-size:14px;}
.n2 {font-size:12px;}
.n3 {font-size:10px;}
.n4 {font-size: 6px;}

 recent、rcomment、rtrackback 等の項目内に以下のスクリプトを書きます

<script type="text/javascript">newMk(年要素,月要素,日要素,時要素)</script>
 以下 ↓ は 「最新記事」 の場合の一例です
<ul><!--recent--><li>
<a href="<%recent_link>" title="<%recent_month>/<%recent_day>"><%recent_title></a>
<script type="text/javascript">
newMk(<%recent_year>,<%recent_month>,<%recent_day>,<%recent_hour>)
</script>
</li><!--/recent--></ul>

.

【 解 説 】  前回と同様、年・月・日・時のタグが揃っている要素には全て適用可能です。
横(水平)型リストの Odin ではリスト各項の幅を節約する為に文字列は*一文字を用いましたが、複数でも構いません。
この記事の設定では 1,6,12,24 時間の4段階表示ですがそれぞれの設定時間帯や段階数はお好みで調整されて下さい。

Comment

paruparu paruparu Edit
12/08 21:53

paruparuです。いつもすみません。
新着マーク(旧バージョン) を使わせていただいていますが、新着マーク 2 と 新着マーク 3 は何故か私のブログでは機能しないようです。。。 daniel さんのトップページでは機能するのに...何故でしょう?
新着マーク(旧バージョン) だけでも便利に使わせていただいているので、不満もないのですが、一応報告だけさせていただきます。

でもいつか... この 新着マーク 2 のようなものを使ってみたいです。


.  
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/155-b0c0badc

Shown after Admisson
.

≫ 検索エンジンとblog 完全ニ非ズ ≪

2005 / 06 / 09  Thu
Navigation   
Comment 1 / TB 0 / Edit
Designed by Daniel Corporation . all rights renounced
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。