小粋空間: 新着表示アーカイブ

Top ＞ Serene Bach ＞カスタマイズ＞新着表示 [全て開く]

2006年12月14日

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

December 14,2006 1:50 AM
Tag：[Comment, Customize, Plugin, SereneBach, Trackback]
Permalink

新着コメント・新着トラックバックのある投稿者情報に New マークをつける記事に新着コメントまたは新着トラックバックがあった時に、記事本文下の投稿者情報に「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 に公開テンプレートへの設定例を示します（スクリーンショットと同じ設定）。

<!-- 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 -->

リスト 1　独自タグの追加

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

<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　スクリプトの追加

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

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

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

// passage time
var pass = 24;

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

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

４．表示内容変更

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

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

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

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

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

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

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

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

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

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

リスト6　CSSの追加

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

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

Comments [6] | Trackbacks [1]

2006年7月19日

新着表示プラグイン（最新記事リスト版） for Serene Bach

July 19,2006 12:50 AM
Tag：[Category, Customize, Plugin, SereneBach]
Permalink

新着エントリーに New マークをつける現在配布中の「新着表示プラグイン（サブカテゴリーリスト版） for Serene Bach」に続いて、最新記事リストの新着エントリーに「New!!」というテキストや画像を表示するプラグインを作成しました。

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

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

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

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

LatestEntryWithTime.zip / LatestEntryWithTime.lzh

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

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

２．テンプレートの修正

ベースHTMLテンプレートに対し、下記の新着表示用最新記事リストの独自ブロック・独自タグとスクリプトを追加してください。

<!-- BEGIN latest_entry_with_time -->
<div class="sidetitle">Latest Entries</div>
<div class="side" >{latest_entry_list_with_time}</div>
<!-- END latest_entry_with_time -->
 
<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>

前述した通り、新着表示プラグイン（サブカテゴリーリスト版）をすでにご利用の場合は、スクリプト部分の

<script type="text/javascript">
　　　　　　：
　　　　　（略）
　　　　　　：
</script>

は設定しなくても大丈夫です。

新着表示の時間は

// passage time
var pass = 24;

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

新着表示の内容は、

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

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

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

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

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

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

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

プロパティは適宜変更して、お好みのデザインに仕上げてください。

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

Comments [27] | Trackbacks [5]

2006年7月 5日

新着表示プラグイン（サブカテゴリーリスト版） for Serene Bach

July 5,2006 1:11 AM
Tag：[Customize, SereneBach]
Permalink

新着エントリーに New マークをつける現在配布中の「カテゴリーのプルダウン化プラグイン for Serene Bach」を改造して、新着エントリーのあるカテゴリーに「New!!」というテキストや画像を表示するプラグインを作成しました（スクリーンショットは完成イメージ）。これは Movable Type のカスタマイズですでに公開している「新着エントリーのあるカテゴリーに New マークをつける」を参考に Serene Bach に適用したものです。

本プラグインを適用し、ベースHTMLテンプレートに追加するスクリプトに「エントリー投稿後 n 時間以内」という指定を行うことで、該当するエントリーのあるカテゴリーに任意のテキスト（または画像）を表示することができます。
Windows2000/XPのIE6.0・Firefox1.0・Opera8.0で動作を確認しています。

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

プラグインの他に、ベースHTMLテンプレートに JavaScript を設定する必要がありますが、ページを読み込む毎に現在時刻との差を計算するので、誤差の少ない表示が可能です。

少し前にこのプラグインについてのご要望を頂いておりましたが、Movable Type 3.3 のリリースと重なったこともあり、公開がかなり遅くなってしまって申し訳ございませんでした。またアイデアをご提供くださったこと、この場をお借りしてお礼申し上げます。ありがとうございました。

本エントリーではサブカテゴリーリストに新着表示を設定するプラグインのみを提供致しますが、他のリストについても同様のロジックで新着表示が可能と思われますので、随時公開していく予定です。

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

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

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

FoldCategoryWithTime.zip / FoldCategoryWithTime.lzh

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

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

２．スクリプトのダウンロード・アップロード

３．独自タグの設定１

４．独自タグの設定２

５．折りたたみマークに関するカスタマイズ

２～５項については、カテゴリーのプルダウン化プラグイン for Serene Bachをご覧ください。すでに FoldCategory.pm をご利用の場合は、２～５項の設定は不要です。

６．スクリプトの追加

ベースHTMLテンプレートの、４項で設定した独自タグのすぐ後ろに、下記のスクリプト（青色）を追加してください。

　　　　　　　：
<!-- BEGIN fold_category -->
<div class="sidetitle">Categories</div>
<div class="side" id="categories">{fold_category_list}</div>
<!-- END fold_category -->
 
<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>

新着表示の時間は

// passage time
var pass = 24;

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

表示させる内容は

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

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

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

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

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

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

プロパティは適宜変更してお好みのデザインにしてください。

８．その他

プラグインの動作上、下記の制約があります。

折りたたみマークをカテゴリー名の右側に表示している場合、New マークはカテゴリー名と折りたたみマークの間に表示されます。
子カテゴリーに新着エントリーがある場合、その親カテゴリーに New マークを表示する機能はありません。

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

Comments [17] | Trackbacks [5]

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

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

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

２．テンプレートの修正

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

４．表示内容変更

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

新着表示プラグイン（最新記事リスト版） for Serene Bach

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

２．テンプレートの修正

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

新着表示プラグイン（サブカテゴリーリスト版） for Serene Bach

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

２．スクリプトのダウンロード・アップロード

３．独自タグの設定１

４．独自タグの設定２

５．折りたたみマークに関するカスタマイズ

６．スクリプトの追加

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

８．その他