新着表示プラグイン(最新記事リスト版) for Serene Bach
現在配布中の「新着表示プラグイン(サブカテゴリーリスト版) 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.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;
}
プロパティは適宜変更して、お好みのデザインに仕上げてください。
以上です。不具合等ございましたらご連絡ください。
- 新着表示プラグイン(最近のコメントリスト版) for Serene Bach
- 新着表示プラグイン(投稿者情報版) for Serene Bach
- 新着表示プラグイン(サブカテゴリーリスト版) for Serene Bach
≫ 新着表示plugin from px*blog
Serene Bach用の新着表示のプラグイン導入。 [続きを読む]
≫ お世話になりましたサイト様。 from UNTIL THE DAY I DIE
☆プラグインをお借りしたサイト様。・[あ]UnderDone(あんでるどん)様http://underdone.net/blog/「うにゅうにゅ Read... [続きを読む]
≫ 新着に「New!!」を表示してみました from tkfm.net
またしても小粋空間さんのこれとこれを使わせて頂きました!これで、最新エントリーとカテゴリーに、24時間以内の新着があると赤く「New!!」と... [続きを読む]
≫ 新着表示プラグインを導入 from Dog*Walkキャバグロでゴー!
久しぶりにSereneBachのテンプレートをいじってみました。小粋空間さんのv 新着表示プラグイン(サブカテゴリーリスト版)v新着表示プラグイン(... [続きを読む]
≫ 4時間以内の更新にNew表示 from ガリレオFM
わたしは一日にいくつもモブログを送ったりするので、どれが最新記事かわかりやすくするため、マークをつけることにしました。具体的には、4時間以内に更新した記事... [続きを読む]
≫ iPhone MT に新着表示を付けた from 『超おむすび』
「iPhoneテンプレートfor MT」に新着表示を付けてみた。 [続きを読む]
こんにちは。
今朝、カレンダーの記事にコメントしてから、こちらの不具合と格闘してみましたが、全くわからず困っています。
というのはIEでは問題ないのですが、FirefoxやOperaなど、他のブラウザで見たときに、3項の設定のdisplayプロパティが全く効いてないのです。
どこを直したらいいのでしょう???
たびたびすみません。
>chiffonさん
こんばんは。
ご利用ありがとうございます。
ご質問の件ですが、
ul.tree li.end {
background-image: url(http://chiffon.j-mx.com/dan/template/tree_end.gif);
list-style: none;}
の "}" のすぐ後に全角空白がありますので、これを削除してみてください。
それではよろしくお願い致します。
無事直りました!!!
もしかして、このプラグインを利用してみなければそこに全角スペースがあるなんてことに気づかなかったかもしれませんね。
エラーに感謝すべきかも。
これからもお世話になります。
ありがとうございました!!!
>chiffonさん
こんばんは。
ご連絡ありがとうございました。
無事になおったようでよかったです。
ではでは!
すみません、どうしても分からないので教えてください。
こちらのプラグインを使おうとして、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 -->
これの変わりに、記述をするのでしょうか。
このタグの下に、新着表示用最新記事リストの独自ブロック・独自タグとスクリプトを追加したのですが、最近の投稿が二つになってしまいました。
お時間ありましたら、ぜひ教えてください。お願いします。
>くまんたさん
こんばんは。
ご質問の件ですが、おっしゃる通り、デフォルトの「最新記事リストの独自ブロック・独自タグ」は削除し、このエントリーに掲載している独自ブロック・独自タグに置き換えてください。新着表示以外はどちらも(多分)同じ内容が表示されます。
もう少し申し上げますと、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 -->
それではよろしくお願い致します。
無事出来ました!
ほんと、この機能をずっと欲しい欲しいと思っていたので感激です。
丁寧に教えて頂き、ありがとうございました!
>くまんたさん
こんにちは。
ご連絡ありがとうございました。
無事に設置できたようでよかったです。
ではでは!
はじめまして、こんばんは!
先日必死の思いで記事及びコメント欄に絵文字を表示させることができ感激でいっぱいです。
ありがとうございます!
さて、今回はこちらのプラグインに挑戦しようと奮闘中なのですが。。。
表示させるまではできたもののNew Entries 以下のカテゴリーがズレて表示されてしまいます。
どこを直せばよいものなのか全くわからずこちらに書き込ませていただいたしだいです。
>yukiさん
はじめまして。
色々ご利用くださりありがとうございます。
ご質問の件ですが、New Entries を表示している最後のタグが <dl> になってますので、</dl> に修正してください。
それではよろしくお願い致します。
yujiroさん
早々にコメントをいただきまして誠にありがとうございます!!!
単純な見落としだったのですね、恐縮です。。。
yujiroさんに迅速に対応していただいたお陰で無事に設置することができました。
ありがとうございました♪今後ともよろしくお願いいたします。
>yukiさん
こんにちは。
ご連絡ありがとうございました。
無事になおったようで良かったです。
ではでは!
たびたびお世話になります。
以前のデータを誤って削除してしまい、新規に作成中なのですが、新着記事はきちんと表示されているのですが、新着記事ではない記事に、変な数字がついてくるのですが、どうしてでしょうか?
以前はこんなことはなかったと思うのですが……。
よろしくお願いします。
上記の件、スタイルシートの設定をしたところ、数字もなくなりました。
「New!!」を文字で表すときだけ、スタイルシートの設定をするのだと、勘違いしていました。
お騒がせして申し訳ありません。
また何かありましたら、よろしくお願いします。
>みーしゃんさん
こんにちは。
ご連絡ありがとうございます。
ご質問の件、自己解決されたようで良かったです。
ではでは!
いつもお世話になります。
新着表示を「New」の文字で設定すると表示されるのですが、画像にすると消えてしまいます。
何が原因なのかわからなくて、行き詰まりました。
どこを直したらよいのか、教えてください。
よろしくお願いします。
すみません、わかりました。
画像を指定したURLによけいなスペースが入って
いたようです。無事、表示できました。
お騒がせしました。
>もみぃさん
こんにちは。
ご質問の件、自己解決されたようでなによりです。
また何かございましたらご連絡ください。
ではでは!
はじめまして。
こちらのプラグインをいれたのですが、htmlでの表示のときにはLatest Entriesの欄が表示されません。キャッシュを消して、再構築をしてみても表示されないのですが、何が悪いのでしょうか。ベーステンプレートだけでなく、個別テンプレートも使っていて、そちらにもタグは記入したのですが。
どうすれば表示されるのでしょうか。
すみません、上のものなのですが、表示されました。
何がわるかったのかはよくわからないのですが。お手数おかけしました。
>やまさん
はじめまして。
プラグインご利用ありがとうございます。
ご質問の件、解決されたようで良かったです。
また何かございましたらご連絡ください。
ではでは!
すごく欲しい機能です!
javascriptを外部ファイルにして読み込ませることは可能でしょうか??
>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>
としてください。
それではよろしくお願い致します。
たびたびすみません。
JUGEMのツリー化スクリプトを利用し、
エントリーリストを日付別にリスト化しました。
同時にこの新着表示プラグインを使わせて頂きたく試してみたのですが、
上手くいきませんでした。
JUGEMのツリー化スクリプトでこのプラグインを使うことは出来ないのでしょうか。
アドレスは非公開にしたいので、メールでお送りいたします。
お手数お掛けしますが、よろしくお願い致します。
>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>
それではよろしくお願い致します。
yujiroさん、こんにちは。
無事、新着マークを表示させることができました。
お忙しい中ありがとうございました!!
>ponkoさん
こんにちは。
ご連絡ありがとうございました。
うまくできたようで良かったです。
ではでは!