小粋空間  -  a cheap joke and a play on words site

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

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

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

１．テンプレートの修正

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

<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" />';

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

３．CSS設定

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

span.new {
    display: none;
    color: #e50003;
    font-weight: bold;
}

FC2ブログの新規登録方法です。本当はFC2ブログ・公開テンプレートの具体的な設定方法を説明する予定でしたが、折角なので最初から説明することにしました。

FC2ブログトップページ左上にある「新規ユーザ登録」の画像をクリック

ご自身のメールアドレスを入力して「送信」をクリック

「<メールアドレス>に送信しました」という画面が表示されるので、メーラーを開いてFC2ブログからの「FC2ID・登録完了のお知らせ」というタイトルのメールを確認してください。

メール本文にある「以下のURLから本登録をしてください」という下にあるリンクをクリックします。

新しく開いた画面でニックネーム・パスワード・性別を入力します。ニックネームはブログの投稿者となるもので、後から変更することも可能です。

フォームを送信すると「?様の登録が完了しました」という画面にジャンプします。ここでは「引き続き『FC2ブログ』の登録にすすむ」をクリックします。

ここでは新規ユーザを想定してますので、「はじめての方」をクリックします。

利用規約を読み、希望ID・ニックネーム・ブログタイトル・ブログジャンル・ブログの説明を入力し、「登録」をクリックします。希望IDは変更することはできません。他の項目は後から変更することができます。

テンプレート選択画面にジャンプします。ここでは一番上にあるテンプレートのラジオボタンをクリックして、ページ一番下の「選択」をクリックします。 ここで選択したテンプレートは当サイトの公開テンプレートに上書きされるカスタマイズ記事につながります。当サイトのテンプレートをご利用にならない場合は、ここで一旦お好みのテンプレートをきちんと選択してください。なおテンプレートは複数選択・保存でき、後で切り替えられます。

以上でFC2ブログの基本的な設定が完了しました。真ん中辺りにある[管理画面]をクリックするとブログの管理画面にジャンプします。

ブログの登録が完了した時点で、ログインID等の情報が登録したメールアドレスに送信されますので、大切に保管しておきましょう。

次回は公開テンプレートの設定方法を説明します。