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

新着表示プラグイン（投稿者情報版） for Serene Bach

記事に新着コメントまたは新着トラックバックがあった時に、記事本文下の投稿者情報に「New!!」というテキストや画像を表示するプラグインを作成しました。

本プラグインを適用し、ベースHTMLテンプレートに追加するスクリプトに「コメント投稿（またはトラックバック受信）後 n 時間以内」という指定を行うことで、該当記事の投稿者情報欄に任意のテキスト（または画像）を表示することができます。スクリーンショットは公開テンプレートに適用した完成イメージですが、どのテンプレートでも利用可能です。

動作の仕組みは、プラグインを用いて、最新記事リストの各エントリーの右側にエントリー投稿時間を span 要素で予め埋め込んでおき、CSSで非表示の状態にします。そしてページ表示時に JavaScript でその投稿時間を取得し、現在時刻との差を計算して指定時間以内であれば投稿時間の部分をテキストまたは画像に置き換えて表示する、という仕組みです。

プラグインの他に、ベースHTMLテンプレートに JavaScript を設定する必要がありますが、ページを読み込む毎に現在時刻との差を計算するので、誤差の少ない表示が可能です。なおサブカテゴリーリスト版をお使いの場合、JavaScript の設定が共用できるので設定不要です。
Windows2000/XPのIE6.0・Firefox1.0・Opera8.0で動作を確認しています。

以下カスタマイズ方法です。

１．プラグインのダウンロード・アップロード

下記の RecentDate.zip または RecentDate.lzh をクリックして、プラグインのアーカイブをダウンロードしてください。

RecentDate.zip / RecentDate.lzh

ダウンロードしたアーカイブを解凍し、中にある RecentDate.pm を plugins ディレクトリ直下に、resource/ja/recentdate.txt を、同じディレクトリの構成があると思いますので、recentdate.txt のみを ja 配下にアップロードしてください。

アップロードの後、Serene Bach の管理画面を起動し、「環境設定」→「プラグイン」をクリックし、プラグイン一覧に RecentDate.pm が表示されていることを確認し、一番右のチェックボックスをチェックして右下の「利用する」をクリックしてください。

２．テンプレートの修正

ベースHTMLテンプレートに対し、下記の新着表示用の独自タグ

• コメント用：{recent_comment_date}
• トラックバック用：{recent_trackback_date}

とスクリプトを entry ブロックの中に追加してください。リスト1 に公開テンプレートへの設定例を示します（スクリーンショットと同じ設定）。

リスト 1　独自タグの追加

<!-- BEGIN entry -->
　　　　：
　　（中略）
　　　　：
<div class="entry-footer">
Posted by {user_name} at {entry_time} | Category: {category_name} | {comment_num} {recent_comment_date} | {trackback_num} {recent_trackback_date}
</div>
</div>
{trackback_auto_discovery}
<!-- END entry -->

また、</body> の直前に下記のスクリプトを追加します。

リスト2　スクリプトの追加

<script type="text/javascript">
//<![CDATA[
// 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') {
        var now = (spans[i].innerHTML - (Math.ceil(currentDate.getTime()/1000))) /(60*60);
        now = Math.ceil(now);
        if(-now <= pass){
            spans[i].innerHTML = content;
            spans[i].style.display = 'inline';
        }
    }
}
//]]>
</script>

他の新着表示プラグイン（サブカテゴリーリスト版等）をすでにご利用の場合は、リスト2 を追加する必要はありません。

３．新着表示のチェック時間変更

デフォルトは 24時間以内のコメント・トラックバックに新着表示を行ないます。この時間を変更する場合は、リスト2 の最初の方の部分を、リスト3 の赤色部分のように変更してください。

リスト3　チェック時間変更

// passage time
var pass = 24;

設定する単位は「時間」です。（例は24時間）。

４．表示内容変更

新着表示の内容を変更する場合は、リスト2 の最初の方の部分を、リスト4 の赤色部分のように変更してください。

リスト4　スクリプトの追加

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

HTMLタグも大丈夫ですので、リスト5 のように、

リスト5　スクリプトの追加

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

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

５．スタイルシートの設定

スタイルシートに下記の設定を追加します。最初の display プロパティで２項のタグに設定したタイムスタンプを非表示にします。その下の color プロパティと font-weight プロパティは、 New!! という文字が表示された場合に適用される設定です。

リスト6　CSSの追加

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

プロパティは適宜変更して、お好みのデザインに仕上げてください。他の新着表示プラグイン（サブカテゴリーリスト版等）をすでにご利用の場合は、リスト6 を追加する必要はありません。

以上です。不具合等ございましたらご連絡ください。