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

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

News

各種ブログテンプレート

2006年7月 5日

エントリー本文

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

Posted at July 5,2006 1:11 AM
Category：[新着表示]
Tag：[Customize, SereneBach]

新着エントリーに 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" />';

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

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

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

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

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

８．その他

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

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

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

Posted by yujiro ReTweet This!

« Movable Typeではじめるビジネスブログ・テンプレートブック | Main | コメント・プレビューで実体参照が無効になる不具合を解消する »

この記事を読んだ人はこんな記事も読んでいます

人気エントリー

Hatena Hot Entries

Hatena Entries

トラックバックURL

このエントリーのトラックバックURL:

このブログは重複トラックバック防止プラグインにより、同一エントリーに対する同一のトラックバックは登録されないようにしています（記事のタイトルまたは記事の概要が異なる場合は登録されます）。

トラックバック

≫ 新着エントリのあるカテゴリにNewマーク from てぃあら
新着エントリのあるカテゴリに「New!!」マークを表示するプラグイン。　　⇒ 小粋空間：新着表示プラグイン（サブカテゴリーリスト版） for Sere... [続きを読む]

Tracked on July 6, 2006 1:43 PM

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

Tracked on September 2, 2006 1:18 AM

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

Tracked on September 3, 2006 1:06 AM

≫ カテゴリー部分をカスタマイズ from marrontic
ムスメが風邪をひいて寝込んでしまいました。連休なんて…という感じです。さてさて、サイドのカテゴリー部分をカスタマイズ。カテゴリーの... [続きを読む]

Tracked on September 18, 2006 5:53 PM

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

Tracked on September 19, 2006 10:35 PM

こんにちは。早速、導入させていただきましたｖ
ただ、「カテゴリーのプルダウン化プラグイン for Serene Bach」のときからなのですが、Ｆｉｒｅｆｏｘで見たときにプルダウンを開閉すると三角のマークが文字化けしてしまうのです。
ＩＥ６で見た場合は問題なかったのですが……。
文字化けする場合の方のmenufolder.jsを使っても同様です。

Serene BachはＥＵＣ?ＪＰ版を使用していますが、menufolder.jsを文字コードＵＴＦ?８で読み込んでるのが原因なのでしょうか･･････？

[1] Posted by 暁 : July 5, 2006 12:20 PM

＞暁さん
こんにちは。
ご利用ありがとうございます。
ご質問の件ですが、ページ一番下で実行している compact.js の中に FoldNavigation を起動するスクリプトが残っており、これが menufolder.js の処理と干渉してしまっているようです。
文字化けの原因は、compact.js が SJIS で記述されており、こちらに記述されている折りたたみマーク

var openMark = '▽'; /* 閉じている場合に開くためのマーク */ var closeMark = '△'; /* 開いている場合に閉じるためのマーク */

で上書きされてしまっていたようです（文字コードをSJISにしたところ、文字化けした折りたたみマークは compact.js に設定されているマークで表示されました）。

ということで、compact.js の45行目以降を削除すれば解消すると思います。
それではよろしくお願い致します。

[2] Posted by yujiro : July 5, 2006 4:30 PM

ありがとうございます。
compact.jsが上手く動いてないこともあって、そのｊｓファイルへのリンクをさくっと消したら問題解消しました。

[3] Posted by 暁 : July 5, 2006 5:26 PM

このプラグインを待ってました！！！
リクエストにお答えいただき、ありがとうございます。
深く感謝いたします！！
早速使わせていただきました！！

本当にありがとうございました。

[4] Posted by haruharu : July 6, 2006 10:48 AM

こんにちは。ホントご無沙汰しすぎですが、なんとかやっております。
これ、使わせていただきました。ほとんど月に1回しかエントリのないブログなので
New!!マークつけるほどのこともないのですが・・・

[5] Posted by さえら : July 6, 2006 1:46 PM

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

＞haruharuさん
こんばんは。
遅くなってすいませんでした。
素敵なアイデアありがとうございました！

＞さえらさん
こんばんはー。
ご無沙汰してます。
ご利用＆トラックバックありがとうございました。
ではまた会う日まで（笑）。

[6] Posted by yujiro : July 8, 2006 2:16 AM

こんにちは。
これだ！というプラグインを見つけダウンロードさせていただきました。
早速導入してみたのですが、もしかして、この機能はトップページに表示にしないと設定しているカテゴリーはエントリーを投稿してもNEW！は表示されないのでしょうか？？
表示させるようにすることが可能でしたら方法を教えていただきたいです。

[7] Posted by そら : October 23, 2006 3:30 AM

＞そらさん
こんにちは。
ご質問の件ですが、頂いたコメント内容からどのような機能を希望されているのか判断できませんでした（特に「設定しているカテゴリーは」の部分）。すいませんが再度、ご要望の機能を具体的にお知らせ頂けますでしょうか。

なお今のところ「本プラグインは（ベースHTMLに）設定するが、トップページにはリストを表示したくない」という解釈でいます。
それではよろしくお願い致します。

[8] Posted by yujiro : October 23, 2006 1:57 PM

理解しにくい質問をしてしまい申し訳ありませんでした。
管理ページの記事カテゴリーの詳細で【表示設定】を『トップページに表示しない』『カテゴリーリストに表示する』と選択しているカテゴリーではエントリーを投稿してもそのカテゴリーには新着マークがつかなかったんです。
このような設定をしていても新着マークを各カテゴリーにつけれる方法があればと思い質問させていただきました。
無駄な時間をとらせてしまい本当にすみませんでした。

[9] Posted by そら : October 24, 2006 1:57 AM

＞そらさん
こんにちは。
ご質問の内容、理解できました。ありがとうございます。
それでWindows環境でsb205Rをインストールし、記事をひとつ公開し、その記事のカテゴリーを「トップページに表示しない」に変更して再構築してみたのですが、当方では同様の事象が発生しませんでした（Newマークが表示されます）。

またsbのプログラムと該当プラグインもトレースしてみましたが、「トップページに表示しない」の設定とカテゴリーリスト生成の動作は関係がないようです（「カテゴリーリストに表示しない」は関係あり）。

それ以前に、当方の実験環境がおかしいのかもしれませんが、「トップページに表示しない」が正常に機能していないように思われます。このオプションは記事部分に該当カテゴリーの記事を表示しない機能、という認識ですが合ってますでしょうか。

ということで、今のところ同事象が発生させられない状況です。申し訳ありません。もしなにか分かりましたら改めてエントリーの方でご連絡致します（分からなければこのままとなりますのでお許しください）。
それではよろしくお願い致します。

[10] Posted by yujiro : October 25, 2006 2:31 PM

本日はわざわざ　コメント（ＢＢＳへ）残してくださりありがとうございましたm(__)m
プラグインを利用させていただいて
きっちり機能してから　こちらへご挨拶に伺う予定でしたが
先に　私のアタフタ記事を読んでくださりコメントを残してくださったお陰で
無事にエラーは消えました。
とてもお恥ずかしいミスで【menufolder.js】をＤＬしてアップロードしてなかったんです（滝汗
このファイルをアップロードしたらエラーは消えました！
yujiroさまのカキコが無ければ　今でも気づかないまま悩んでいたかもしれません。
自分では隅々まで読んでいたつもりでしたが　１人ではやっぱりダメですわぁ・・・
本当にありがとうございました♪
yujiroさまのお心遣いに　感謝です★

[11] Posted by あーちゃん : May 8, 2007 12:05 AM

＞あーちゃんさん
こんにちは。
コメントありがとうございました。
無事に直ったようでなによりです。
ではでは！

[12] Posted by yujiro : May 8, 2007 4:45 PM

とても素晴らしいプラグイン　ありがとうございます。
カテゴリ毎の閲覧をメインにしたサイトを作成しているのですが、

カテゴリ毎の設定で、
　　「トップページに表示しない」　　「カテゴリーリストに表示する」

以上のような設定にしているのですが、
このような設定にすると、カテゴリーリストに新着表示ができません。
「トップページに表示する」という設定にすると、新着表示されます。

「トップページに表示しない」という設定のままで、新着表示をさせる方法がありましたら、お教え下さい。
どうぞ、よろしくお願い致します。

[13] Posted by y550550 : November 2, 2007 10:50 AM

先日に引き続き、再び質問させて頂きます；
今回、最初にyujiroさんのエントリー「カテゴリーのプルダウン化プラグイン・バージョンアップ」を
導入し、カテゴリーをプルダウン化させ、親記事に合計数を表示するようにしております。
また、合わせて「プルダウン化プラグインで特定のカテゴリーだけをプルダウン化するカスタマイズ」も
利用しており、正常に動作しておりました。

今回、記事リストにNEW！マークをつけるプラグインがあったのでこちらを導入しようとしたところ
下記の症状が出ました；

１）親カテゴリに表示されていた合計記事数がなくなり「0」表示になった。
２）特定のカテゴリだけをプルダウン化させていたが、それが全て無効になってしまった。

上記エントリー自体が、こちらのプラグインよりも後に出ているものと思われるので
もしかして、併用は難しいのでしょうか…？(>_

１）に関しては、プルダウン化プラグインのVUにより可能になったものだったので、
それをこちらのプラグインに切り替えると無効になる理屈はわかるのですが…
でも出来れば、併用出来たらなぁと思っています。

２）についてはちょっと理由がわからないのですが、どこか書き換えないとダメでしょうか？
エントリーを見る限りではこちらのプラグインのほうが後の記事のようだったので
併用できそうだったのですが…。

お忙しいところ立て続けの質問となりましてすみません；
もしよろしければお返事頂ければ幸いです。では！

[14] Posted by あいら : August 28, 2008 10:26 AM

＞あいらさん
こんばんは。
ご要望の件ですが、この記事に掲載しているプラグインは、先日のバージョンアップに対応していません。先日作成したプラグインに新着表示（をするためのHTMLタグを追加する機能）も追加しましたので、下記のURLからダウンロードして試してみてください。

http://www.koikikukan.com/archives/download/SereneBach/plugins/FoldCategory/3.00/FoldCategory.zip

管理画面に新着表示の設定を追加しました。
この記事の６項・７項の設定はそのまま使ってください。
それではよろしくお願い致します。

[15] Posted by yujiro

: August 30, 2008 12:32 AM

＞yujiroさん

こんにちは。またまた早急にご返信下さってありがとうございます！
おかげさまで、新しいプラグインの方を使用したところ、上記不具合は全部解消されました！
本当にありがとうございました！
特定のカテゴリのみプルダウン化も引き続き問題なく出来ております。

個人的ないち質問であるにも拘らず、ひとつずつ、ご回答や要望などにお答え頂きまして
本当にありがとうございました。おかげで凄く自分で納得のいくカスタマイズが出来そうです。

自分で作成するにはスキルが全然足りないもので人様のおつくり頂いているものに
頼りきりなのです(^^;)でもプログラミングとか自分で作るの凄く楽しそうですよね…！
私も少しずつでも勉強できたらいいのですが…なかなか(´д｀)

yujiroさんもお体に気をつけて、頑張って下さい。
それから、ブログが完成しましたらお礼もかねてご報告に参りますのでよろしくお願いします。
それでは＾＾

[16] Posted by あいら : August 30, 2008 10:58 AM

＞あいらさん
こんにちは。
ご連絡ありがとうございました。
無事に動作したようで良かったです。
ではでは！

[17] Posted by yujiro

: September 2, 2008 4:06 PM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）:

URL（U）:

情報を保存する？

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

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

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

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

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