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

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

Posted at July 19,2006 12:50 AM
Tag:[Category, Customize, Plugin, SereneBach]

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

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

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

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

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

1.プラグインのダウンロード・アップロード

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

LatestEntryWithTime.zip / LatestEntryWithTime.lzh

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

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

2.テンプレートの修正

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

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

3.スタイルシートの設定

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

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

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

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

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

新着表示plugin from px*blog
Serene Bach用の新着表示のプラグイン導入。 [続きを読む]

Tracked on July 19, 2006 12:47 PM

お世話になりましたサイト様。 from UNTIL THE DAY I DIE
☆プラグインをお借りしたサイト様。・[あ]UnderDone(あんでるどん)様http://underdone.net/blog/「うにゅうにゅ Read... [続きを読む]

Tracked on September 1, 2006 11:15 PM

新着に「New!!」を表示してみました from tkfm.net
またしても小粋空間さんのこれとこれを使わせて頂きました!これで、最新エントリーとカテゴリーに、24時間以内の新着があると赤く「New!!」と... [続きを読む]

Tracked on September 3, 2006 1:07 AM

新着表示プラグインを導入 from Dog*Walkキャバグロでゴー!
久しぶりにSereneBachのテンプレートをいじってみました。小粋空間さんのv 新着表示プラグイン(サブカテゴリーリスト版)v新着表示プラグイン(... [続きを読む]

Tracked on September 19, 2006 10:26 PM

4時間以内の更新にNew表示 from ガリレオFM
わたしは一日にいくつもモブログを送ったりするので、どれが最新記事かわかりやすくするため、マークをつけることにしました。具体的には、4時間以内に更新した記事... [続きを読む]

Tracked on September 19, 2006 10:52 PM

iPhone MT に新着表示を付けた from 『超おむすび』
「iPhoneテンプレートfor MT」に新着表示を付けてみた。 [続きを読む]

Tracked on April 28, 2010 3:50 AM
コメント

こんにちは。
今朝、カレンダーの記事にコメントしてから、こちらの不具合と格闘してみましたが、全くわからず困っています。

というのはIEでは問題ないのですが、FirefoxやOperaなど、他のブラウザで見たときに、3項の設定のdisplayプロパティが全く効いてないのです。
どこを直したらいいのでしょう???
たびたびすみません。

[1] Posted by chiffon : July 27, 2006 2:54 PM

>chiffonさん
こんばんは。
ご利用ありがとうございます。
ご質問の件ですが、

ul.tree li.end {
    background-image: url(http://chiffon.j-mx.com/dan/template/tree_end.gif);
    list-style: none;} 

の "}" のすぐ後に全角空白がありますので、これを削除してみてください。
それではよろしくお願い致します。

[2] Posted by yujiro : July 27, 2006 7:15 PM

無事直りました!!!

もしかして、このプラグインを利用してみなければそこに全角スペースがあるなんてことに気づかなかったかもしれませんね。
エラーに感謝すべきかも。

これからもお世話になります。
ありがとうございました!!!

[3] Posted by chiffon : July 27, 2006 8:40 PM

>chiffonさん
こんばんは。
ご連絡ありがとうございました。
無事になおったようでよかったです。
ではでは!

[4] Posted by yujiro : July 27, 2006 11:12 PM

すみません、どうしても分からないので教えてください。
こちらのプラグインを使おうとして、HTMLに挿入する箇所が分からなくて困っています。

ちなみに、latest_entryのところの記述はこのようになっています。

<!-- BEGIN latest_entry -->
<dl class="recententry">
<dt id="newentryname">New Entries</dt>
<dd id="newentrylist">{latest_entry_list}</dd>
<dl>
<!-- END latest_entry -->

これの変わりに、記述をするのでしょうか。
このタグの下に、新着表示用最新記事リストの独自ブロック・独自タグとスクリプトを追加したのですが、最近の投稿が二つになってしまいました。
お時間ありましたら、ぜひ教えてください。お願いします。

[5] Posted by くまんた : October 31, 2006 8:56 PM

>くまんたさん
こんばんは。
ご質問の件ですが、おっしゃる通り、デフォルトの「最新記事リストの独自ブロック・独自タグ」は削除し、このエントリーに掲載している独自ブロック・独自タグに置き換えてください。新着表示以外はどちらも(多分)同じ内容が表示されます。

もう少し申し上げますと、2項の独自ブロック・独自タグの部分は、下記のように修正して頂いても大丈夫だと思います。

<!-- BEGIN latest_entry_with_time -->
<dl class="recententry">
<dt id="newentryname">New Entries</dt>
<dd id="newentrylist">{latest_entry_list_with_time}</dd>
<dl>
<!-- END latest_entry_with_time -->

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

[6] Posted by yujiro : November 1, 2006 12:01 AM

無事出来ました!
ほんと、この機能をずっと欲しい欲しいと思っていたので感激です。
丁寧に教えて頂き、ありがとうございました!

[7] Posted by くまんた : November 1, 2006 12:14 PM

>くまんたさん
こんにちは。
ご連絡ありがとうございました。
無事に設置できたようでよかったです。
ではでは!

[8] Posted by yujiro : November 1, 2006 2:38 PM

はじめまして、こんばんは!
先日必死の思いで記事及びコメント欄に絵文字を表示させることができ感激でいっぱいです。
ありがとうございます!

さて、今回はこちらのプラグインに挑戦しようと奮闘中なのですが。。。
表示させるまではできたもののNew Entries 以下のカテゴリーがズレて表示されてしまいます。
どこを直せばよいものなのか全くわからずこちらに書き込ませていただいたしだいです。

[9] Posted by yuki : February 11, 2007 11:15 PM

>yukiさん
はじめまして。
色々ご利用くださりありがとうございます。
ご質問の件ですが、New Entries を表示している最後のタグが <dl> になってますので、</dl> に修正してください。
それではよろしくお願い致します。

[10] Posted by yujiro : February 11, 2007 11:46 PM

yujiroさん

早々にコメントをいただきまして誠にありがとうございます!!!
単純な見落としだったのですね、恐縮です。。。
yujiroさんに迅速に対応していただいたお陰で無事に設置することができました。
ありがとうございました♪今後ともよろしくお願いいたします。

[11] Posted by yuki : February 12, 2007 12:36 AM

>yukiさん
こんにちは。
ご連絡ありがとうございました。
無事になおったようで良かったです。
ではでは!

[12] Posted by yujiro : February 12, 2007 1:12 PM

たびたびお世話になります。

以前のデータを誤って削除してしまい、新規に作成中なのですが、新着記事はきちんと表示されているのですが、新着記事ではない記事に、変な数字がついてくるのですが、どうしてでしょうか?
以前はこんなことはなかったと思うのですが……。
よろしくお願いします。

[13] Posted by みーしゃん : March 9, 2007 3:03 PM

上記の件、スタイルシートの設定をしたところ、数字もなくなりました。

「New!!」を文字で表すときだけ、スタイルシートの設定をするのだと、勘違いしていました。

お騒がせして申し訳ありません。

また何かありましたら、よろしくお願いします。

[14] Posted by みーしゃん : March 10, 2007 10:39 AM

>みーしゃんさん
こんにちは。
ご連絡ありがとうございます。
ご質問の件、自己解決されたようで良かったです。
ではでは!

[15] Posted by yujiro : March 12, 2007 12:56 PM

いつもお世話になります。
新着表示を「New」の文字で設定すると表示されるのですが、画像にすると消えてしまいます。
何が原因なのかわからなくて、行き詰まりました。
どこを直したらよいのか、教えてください。
よろしくお願いします。

[16] Posted by もみぃ : March 23, 2007 1:07 PM

すみません、わかりました。
画像を指定したURLによけいなスペースが入って
いたようです。無事、表示できました。
お騒がせしました。

[17] Posted by もみぃ : March 23, 2007 7:24 PM

>もみぃさん
こんにちは。
ご質問の件、自己解決されたようでなによりです。
また何かございましたらご連絡ください。
ではでは!

[18] Posted by yujiro : March 26, 2007 10:55 AM

はじめまして。
こちらのプラグインをいれたのですが、htmlでの表示のときにはLatest Entriesの欄が表示されません。キャッシュを消して、再構築をしてみても表示されないのですが、何が悪いのでしょうか。ベーステンプレートだけでなく、個別テンプレートも使っていて、そちらにもタグは記入したのですが。
どうすれば表示されるのでしょうか。

[19] Posted by やま : October 17, 2007 1:13 PM

すみません、上のものなのですが、表示されました。
何がわるかったのかはよくわからないのですが。お手数おかけしました。

[20] Posted by やま : October 17, 2007 1:17 PM

>やまさん
はじめまして。
プラグインご利用ありがとうございます。
ご質問の件、解決されたようで良かったです。
また何かございましたらご連絡ください。
ではでは!

[21] Posted by yujiro logo : October 17, 2007 2:46 PM

すごく欲しい機能です!
javascriptを外部ファイルにして読み込ませることは可能でしょうか??

[22] Posted by koko : November 5, 2007 8:57 PM

>kokoさん
こんにちは。
ご質問の件ですが、可能です。
2項のスクリプト要素の内容を削除し、代わりに下記の内容を外部ファイル(newmark.js)にします。

function newmark(){
 
    // 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';
            }
        }
    }
}

そして、head 終了タグの直前に上記のスクリプトを読み込む script 要素

<script type="text/javascript" src="[外部ファイルのURL]"></script>

を記述し、2項のソースコードを

<!-- 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[
newmark();
//]]>
</script>

としてください。
それではよろしくお願い致します。

[23] Posted by yujiro logo : November 6, 2007 5:59 PM

たびたびすみません。
JUGEMのツリー化スクリプトを利用し、
エントリーリストを日付別にリスト化しました。
同時にこの新着表示プラグインを使わせて頂きたく試してみたのですが、
上手くいきませんでした。
JUGEMのツリー化スクリプトでこのプラグインを使うことは出来ないのでしょうか。
アドレスは非公開にしたいので、メールでお送りいたします。
お手数お掛けしますが、よろしくお願い致します。

[24] Posted by ponko : August 5, 2008 8:50 PM

>ponkoさん
こんばんは。
ご質問の件ですが、newentry.js の 14行目、

    this.elem = Array('<a href="',linkUrl,'">',objLink.innerHTML,'</a>').join('');

    this.elem = Array('<a href="',linkUrl,'">',objLink.innerHTML,'</a>','<span class="new">',objLink2.innerHTML,'</span>').join('');

に変更してください。

次に、newentry.js の 3行目と4行目の間に次のコードを追加してください。

  var objLink2 = objList.getElementsByTagName('span')[0];

最後に、テンプレートの最後に設定している

<script type="text/javascript" src="newentry.js"></script>

の後ろに、2項のスクリプトを追加するように変更してください(新着エントリーリストの直後に設定しているスクリプトは削除してください)。

移動後は次のようになります(青色)。

<script type="text/javascript" src="newentry.js"></script>
<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>

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

[25] Posted by yujiro logo : August 7, 2008 12:29 AM

yujiroさん、こんにちは。
無事、新着マークを表示させることができました。
お忙しい中ありがとうございました!!

[26] Posted by ponko : August 7, 2008 9:47 AM

>ponkoさん
こんにちは。
ご連絡ありがとうございました。
うまくできたようで良かったです。
ではでは!

[27] Posted by yujiro logo : August 11, 2008 4:12 PM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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