新着表示プラグイン（最新記事リスト版） for Serene Bach
現在配布中の「新着表示プラグイン（サブカテゴリーリスト版） for Serene Bach」に続いて、最新記事リストの新着エントリーに「New!!」というテキストや画像を表示するプラグインを作成しました。
本プラグインを適用し、ベースHTMLテンプレートに追加するスクリプトに「エントリー投稿後 n 時間以内」という指定を行うことで、最新記事リストの該当エントリーーに任意のテキスト（または画像）を表示することができます。スクリーンショットは公開テンプレートに適用した完成イメージですが、どのテンプレートでも利用可能です。
動作の仕組みは、プラグインを用いて、最新記事リストの各エントリーの右側にエントリー投稿時間を span 要素で予め埋め込んでおき、CSSで非表示の状態にします。そしてページ表示時に JavaScript でその投稿時間を取得し、現在時刻との差を計算して指定時間以内であれば投稿時間の部分をテキストまたは画像に置き換えて表示する、という仕組みです。
プラグインの他に、ベースHTMLテンプレートに JavaScript を設定する必要がありますが、ページを読み込む毎に現在時刻との差を計算するので、誤差の少ない表示が可能です。なおサブカテゴリーリスト版をお使いの場合、JavaScript の設定が共用できるので設定不要です。
Windows2000/XPのIE6.0・Firefox1.0・Opera8.0で動作を確認しています。
以下カスタマイズ方法です。
１．プラグインのダウンロード・アップロード
下記の 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;
}プロパティは適宜変更して、お好みのデザインに仕上げてください。
以上です。不具合等ございましたらご連絡ください。
新着表示プラグイン（サブカテゴリーリスト版） for Serene Bach
現在配布中の「カテゴリーのプルダウン化プラグイン 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.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" />';とすれば画像を表示することもできます。
７．スタイルシートの設定
スタイルシートに下記の設定を追加します。最初の display プロパティで１項のタグに設定したタイムスタンプを非表示にします。その下の color プロパティと font-weight プロパティは、 New!! という文字が表示された場合に適用される設定です。
span.new {
display: none;
color: red;
font-weight: bold;
}プロパティは適宜変更してお好みのデザインにしてください。
８．その他
プラグインの動作上、下記の制約があります。- 折りたたみマークをカテゴリー名の右側に表示している場合、New マークはカテゴリー名と折りたたみマークの間に表示されます。
- 子カテゴリーに新着エントリーがある場合、その親カテゴリーに New マークを表示する機能はありません。
以上です。不具合等ございましたらご連絡ください。
