新着エントリーに New マークを表示する for FC2ブログ

新着エントリーに New マークを表示する for FC2ブログ

Posted at July 30,2006 12:38 AM
Tag:[Customize, FC2]

新着エントリーに New マークを表示するエントリーリストの新着エントリーに「New!!」というテキストや画像を表示するカスタマイズです(スクリーンショットは完成イメージ)。

「エントリー投稿後×時間以内」という指定により任意のテキストまたは画像をエントリーリストに表示することができます。JavaScript で書きましたのでテンプレートにタグを追加するだけで動作します。また JavaScript OFF の場合は何も表示されないようにしています。
Windows2000/XPのIE6.0・Firefox1.0・Opera8.0で動作確認しています。

動作はエントリーの投稿時間を span タグで予め埋め込んでおき、CSSで非表示にします。そして JavaScript でその投稿時間を取得し、現在時刻との差を計算して指定時間以内であればテキストまたは画像に置き換えて表示するという仕組みです。

1.テンプレートの修正

テンプレートに下記の青色部分を追加します。例は公開テンプレートです。

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

新着表示の時間は

// passage time
var pass = 24;

の赤色部分を変更します。単位は時間です(例は24時間)。

表示させる内容は

// display content
var content = 'New!!';

の赤色部分を変更してください。HTMLタグも大丈夫ですので

var content = '<img src="http://~/hogehoge.gif" style="vertical-align: middle" />';

とすれば画像を表示することもできます。

3.CSS設定

スタイルシートに下記の設定を追加します。最初の display プロパティで1項のタグに設定したタイムスタンプを非表示にします。その下の color プロパティと font-weight プロパティは、 New!! という文字が表示された場合に適用される設定です。下の二つはお好みに合わせて適宜修正してください。

span.new {
    display: none;
    color: #e50003;
    font-weight: bold;
}
関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

FC2BLOGで最新リストに更新マーク(新着マーク) from チームニゴイでございます。
前に「FC2BLOGで更新マーク(新着マーク)」というエントリーを書きましたが、今回は、サイドバーにある最新エントリー(ウチはページトップにあります)リス... [続きを読む]

Tracked on July 30, 2006 6:10 PM
コメント

先日依頼させて頂きましたカスタマイズ、エントリーして頂きありがとうございます! 色々と対応の程感謝します

[1] Posted by panser : July 30, 2006 5:58 AM

こんにちは(^O^)
いつもお世話になります。
このカスタマイズを自力でいろいろ探ってみたのですがなかなか良いのが見つからず先送りにしてたちょうどその時にこのエントリー。ほんとナイスタイミングです(^_^)b
早速設置&エントリーさせていただきました。

最近いろいろな都合でFC2に引っ越ししたのですが引き続きよろしくお願い致します。m(_ _)m

[2] Posted by くんぞー : July 30, 2006 6:18 PM

>panserさん
こんにちは。
ご連絡ありがとうございます。
エントリー遅くなってすいませんでした。

>くんぞーさん
こんにちは。
ご利用&トラックバックありがとうございます。
FC2はなかなかいいみたいですね。また引き続きよろしくお願い致します!

[3] Posted by yujiro : July 31, 2006 1:24 PM

yujiro様、こんばんは。
毎日、いろいろなカスタマイズを楽しませて頂いています。
今日もFC2の新着エントリーにNEWマークを付けました。それを応用してコメントやトラックバックにもNEWマークを・・・と思ったのですが、エントリーの様にはうまくいきませんでした。
どこの部分を変更したら良いのか解りません。
どうか教えて頂けますでしょうか?

[4] Posted by tsuduku : May 19, 2008 7:31 PM

>tsudukuさん
こんにちは。
ご返事遅くなりすいません。
サイトを拝見させて頂いたところ表示されているようですので、まだ不具合が残っているようでしたら再度ご連絡ください。

なお、以下の赤色部分のマークアップが冗長なため、サイドバーの一部が下に回りこんでしまっているようです。該当箇所をみつけて削除してください。

</div>
<script type="text/javascript">
<!--
FoldNavigation('blogpet','on',false);
//-->
</script>
<!-- BlogPet終了 -->

以上です。
それではよろしくお願い致します。

[5] Posted by yujiro logo : June 6, 2008 6:12 PM

yujiro様、こんばんは。
BlogPetのご指摘、ありがとうございました。
全く気付きませんでした( ;´・ω・`)人(´・ω・`; )

NEWマークの件、前回のコメントがうまく伝わらなかったようで・・・(*_ _)人ゴメンナサイ
エントリーのNEWマークの表示はできたので、FC2ブログでコメントやトラックバックでのNEWマーク表示方法を教えて頂きたかったのです。
yujiro様のテンプレートでは、FC2ブログにおいてその様な記事が見つからなかったので・・・。
勝手なお願いで申し訳ありませんが、再度コメントを頂けたら光栄です。

[6] Posted by tsuduku : June 9, 2008 7:43 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)