休日表示付リアルタイムカレンダープラグイン(横型) for Serene Bach
Serene Bach のカレンダーに土・日祝日・本日を表示するプラグインです(sb も大丈夫だと思います)。ここでは公開テンプレートをサンプルに横型タイプのカレンダーを追加するカスタマイズ方法をご紹介します。他のテンプレートでもご利用可能です。 |
注:本プラグインは横型カレンダー(独自タグが {calendar_horizontal})専用です。
1.プラグインのダウンロード
下記のリンク先にある RealTimeHolidayCalendar2.zip または RealTimeHolidayCalendar2.lzh をクリックして、プラグインのアーカイブをダウンロードしてください。
2006.04.03 Ver 1.00 初版
2006.04.23 Ver 1.01 リンクが連続する場合にスタイルが反映されない不具合を修正
ダウンロードしたアーカイブを解凍し、中にある RealTimeHolidayCalendar2.pm を plugins ディレクトリ直下に、resource/ja/realtime_holidaycalendar2.txt を、同じディレクトリの構成があると思いますので、realtime_holidaycalendar2.txt のみを ja 配下にアップロードしてください。
アップロードの後、Serene Bach の管理画面を起動し、「環境設定」→「プラグイン」をクリックし、プラグイン一覧に RealTimeHolidayCategory2.pm が表示されていることを確認し、一番右のチェックボックスをチェックして右下の「利用する」をクリックしてください。
注:リアルタイムカレンダープラグインをご利用の場合はリアルタイムカレンダープラグインの利用を停止してください。
2.休日表示用カレンダースクリプトのダウンロード・アップロード
下記のリンク先にある dayChecker.js をクリックして休日表示用カレンダースクリプトをダウンロードしてください。
ダウンロードした dayChecker.js を index.html と同じディレクトリにアップロードしてください。
3.独自タグの設定1
2項でダウンロードした dayChecker.js を使うための宣言を、ベースHTMLテンプレートに設定します。個別エントリー用HTMLテンプレートを設定している場合はそちらも同じ設定を行ってください。
下記のように </head> の前辺りに青色のブロックおよび独自タグを設定します。
:
<!-- BEGIN rt_holiday_calendar -->
{rt_holiday_calendar_script}
<!-- END rt_holiday_calendar -->
</head>
:
4.独自タグの設定2
新しく横型カレンダーを設置される場合、ベースHTMLテンプレート(個別エントリーを使っている場合はそちらも)のバナーの下にカレンダー用の独自タグおよび休日表示用カレンダースクリプトの独自タグ(青色)を下記のように追加してください。
<!-- BEGIN title -->
<div id="banner">
<h1 id="banner-header">{blog_name}</h1>
<h2 id="banner-description">{blog_description}</h2>
</div>
<!-- END title -->
<!-- BEGIN calendar -->
<div id="rt_holiday_calendar">
{calendar_horizontal}
</div>
<!-- END calendar -->
<!-- BEGIN rt_holiday_calendar -->
{rt_holiday_script}
<!-- END rt_holiday_calendar -->
カレンダー独自タグをすでに設定されている場合、下記の青色部分を追加してください。
<!-- BEGIN calendar -->
<div id="rt_holiday_calendar">
{calendar_horizontal}
</div>
<!-- END calendar -->
<!-- BEGIN rt_holiday_calendar -->
{rt_holiday_script}
<!-- END rt_holiday_calendar -->
ここでは div タグに id 属性を追加していますが、タグの構成が異なる場合、id 属性 rt_holiday_calendar を {calendar_horizontal} で括っているタグに付与してください(タグの構成が異なる場合、後述のCSSの設定で若干変更が必要になるかも知れません)。{calendar_horizontal} がタグで括られていない場合は下のように div タグを追加してください。
リアルタイムカレンダープラグインをご利用されていた方は、rt_calendar という id 属性を rt_holiday_calendar に変更してください。
5.CSSの設定
スタイルシートに下記の設定を追加してください。
#rt_holiday_calendar {
font-size: 9px;
text-align: center;
padding: 5px 0; /* カレンダー上下のパディング */
border-bottom : 1px solid #666699; /* カレンダー下の罫線 */
}
.today {
padding: 0 1px;
border: 1px solid #444444;
}
.holiday,
.holiday a:link {
color: #e50003;
}
.saturday,
.saturday a:link {
color: #0000ff;
}
.tholiday {
border: 1px solid #444444;
color: #e50003;
}
.tholiday a:link {
color: #e50003;
}
.tsaturday {
border: 1px solid #444444;
color: #0000ff;
}
.tsaturday a:link {
color: #0000ff;
}
上記の #rt_holiday_calendar は公開テンプレートに併せた設定ですので、ご利用のテンプレートに併せて適宜修正してください。
なお平日・土・日祝日の span 要素に対し、下記のセレクタを設定しています(span 要素は JavaScript で後から設定していますのでソース上は見えません)。
- 平日(本日):today
- 土(本日以外):saturday
- 土(本日・リンクなし):tsaturday
- 土(本日・リンクあり):tsaturday a:link
- 日祝日(本日以外):holiday
- 日祝日(本日・リンクなし):tholiday
- 日祝日(本日・リンクあり):tholiday a:link
公開テンプレートをご利用の場合、設定されている today セレクタ(下記)を削除してください。
.today {
display: block;
text-align: center;
color: #444444;
border: 1px solid #444444;
}
6.CSSが反映されない場合
カレンダー全体を他の id 属性で括り、それに対してCSSを設定している場合、5項のCSSが反映されない可能性があります(id 属性に対するCSSが優先されるため)。その場合は古いCSSを削除するか、5項の設定を
:
#rt_holiday_calendar .today {
padding: 0 1px;
border: 1px solid #444444;
}
#rt_holiday_calendar .holiday,
#rt_holiday_calendar .holiday a:link {
color: #e50003;
}
#rt_holiday_calendar .saturday,
#rt_holiday_calendar .saturday a:link {
color: #0000ff;
}
#rt_holiday_calendar .tholiday {
border: 1px solid #444444;
color: #e50003;
}
#rt_holiday_calendar .tholiday a:link {
color: #e50003;
}
#rt_holiday_calendar .tsaturday {
border: 1px solid #444444;
color: #0000ff;
}
#rt_holiday_calendar .tsaturday a:link {
color: #0000ff;
}
としてください。#rt_holiday_calendar の後ろの半角空白を忘れずに。
7.その他
休日表示付リアルタイムカレンダープラグイン for Serene Bachでプラグインが反映されないという報告を頂いてますが原因不明のため、プラグインに記しているスクリプトを直接埋め込むように回答しています。不具合が発生して設定方法が分からない方はご連絡ください。
2006.04.23 追記
プラグインでリンクが連続する場合にスタイルが反映されない不具合を修正しました。また6項を追記しました。
- 休日表示付リアルタイムカレンダープラグイン for Serene Bach 修正
- Flash カレンダープラグイン(3.00 対応版) for Serene Bach
- Flash カレンダープラグイン バージョンアップ
- Flash カレンダープラグイン for Serene Bach
- 休日表示付リアルタイムカレンダープラグイン(横型) for Serene Bach 不具合修正のお知らせ
- 休日表示付リアルタイムカレンダープラグイン for Serene Bach
- リアルタイムカレンダープラグイン修正
- リアルタイムカレンダープラグイン
≫ テンプレート変更 from VanillaCream**BLOG
この間から気になっていたプラグインを入れたくてなかなかうまく行かなくて3カラムから2カラムに変更しました??テンプレートはblog TK*Plus1 | ... [続きを読む]
≫ Serene Bach カスタマイズ from 徒然なるKAZUOの日常
最近トラックバックスパムが多いので、スパムフィルターを導入することにしました。使ったのは凪さんのサイト「this calm night.」にて配布されてい... [続きを読む]
≫ カスタマイズMEMO from m*size Blog
久々に(?!)チョコっとカスタマイズъ( ゜ー^)バニラちゃまのBlogで気になってた休日表示付リアルタイムカレンダー。私も真似っこでカスタマイズしちゃい... [続きを読む]
≫ weblogカスタマイズ2・小粋空間さんより from おかち日和
SereneBachでウェブログを新しく作るにあたり、たくさんの技をお借りしました。 [続きを読む]
≫ お世話になりましたサイト様。 from :: go with the light ::
☆プラグインをお借りしたサイト様。・[あ]UnderDone(あんでるどん)様http://underdone.net/blog/「うにゅうにゅ Read... [続きを読む]
≫ カレンダーを横表示にする from apfelschorle
以前にjugemさんを利用していた頃から、カレンダーは横表示が好きで、今回も横表示にするべく、頑張ってみました。 [続きを読む]
yujiroさん、こんにちは。
『休日表示付リアルタイムカレンダープラグイン(横型) for Serene Bach』 をみつけ、さっそく導入してみました。これで良いのかな?と恐る恐る設置してみましたが、何とか表示されてるのでホッと一安心です。ありがとうございました。
>ちこりんさん
こんばんは。
ご利用&ご連絡ありがとうございました。
うまくできたようで私もホッとしています(笑)。
ではでは!
CGIは詳しくないのでよく分からないのですが、プラグインのソースを見たところでは、
use vars
の下りが「休日表示付リアルタイムカレンダー」に無いのが気になります。
まさか、これが原因ってことはないですよね?
>キャニオンさん
こんばんは。
チェックくださりありがとうございます。
use vars? は変数をグローバル変数として定義する場合の指定ですので、本プラグインでは不要と思います。
お作法として use strict; は設定した方が良いかもしれません。
おはようございます。
いろいろいじったのが悪かったのでしょうか・・?
カレンダーがまた変になってしまいました。
当日の囲まれてる部分が横に長くなってしまいました。
昨日までちゃんと表示されていたのですが・・・。
テンプレートを変更したので横型もお借りしました^^
テンプレのCSSの設定と設定方法が合いませんがこれからきちんと表示でされるように変更しています♪
>ちこりんさん
こんばんは。
ご質問の件ですが、スタイルシートの下記の赤色部分を削除してください。
: .tholiday { display: block; border: 1px solid #444444; color: #e50003; } : .tsaturday { display: block; border: 1px solid #444444; color: #0000ff; } :
横長になる原因は、スタイルシートで指定した要素がブロック指定(display:block)になっていると前後に改行が含まれてしまうためです。
以上です。
それではよろしくお願い致します。
yujiroさん、こんばんは。
おかげさまで直りました。
いつも聞く事ばかりですみません。
本当にありがとうございました。
>ちこりんさん
こんばんは。
ご連絡ありがとうございます。
直ったようでなによりです。
ではでは!
yujiroさん。コンバンワ★
『休日表示付リアルタイムカレンダープラグイン(横型) for Serene Bach』 を友だちのブログで見つけ...早速、私のブログにも!と、思い使用させて頂きました。
何故か記事を書き込みと反映されないのですが私の設定が間違ってるのでしょうか???
あと、TBもさせて頂きました
yujiroさん。
お忙しい中、早急の対応...
お陰さまでしっかり!(記事の書き込みをしても)表示されるようになりました。
どうもアリガトウございました
>Maronさん
こんばんは。
ご利用&ご連絡ありがとうございました。
確認不足で申し訳ありません。
無事に表示されて良かったです。
ではでは!
こんにちは。
いつもMovable Typeのブログのカスタマイズでお世話になっていますが、この度Serene Bachにも手を出し、カスタマイズをしております。
このプラグインも利用してみたのですが、「休日に投稿が合った場合のリンクの色が休日色ではなくなってしまう」のです。
MTでも同じトラブルに見舞われたものの、MTでは簡単に直せました。が、今回はどうにもわかりません。
いろいろ探ってみたのですが。。。
いったい、どこを直したらいいのでしょうか???
自己解決しました!
カレンダーがタイトルエリア内にあったことが原因でした。(6項の状態?)
6項を実行しても直らないため、行き詰っていましたが、カレンダーのエリアとタイトルのエリアを分けることで直りました。
たびたびお騒がせしてすみません。
コメント3つも続けてしまい失礼します。あわてんぼうです(^_^;)
上記に書いた原因とともに、スタイルシートのほうも土曜日や休日にはa:link のところに「.holiday a」「.saturday a」「.tholiday a」「.tsaturday a」も必要だったようです。
(本日と本日以外の両方に必要かどうかは???)
そもそもスタイルシートのほかの部分を直す必要があるのかもしれないのですが、とりあえず現在正しく表示されているようなので、ま、いっか、と思ってます。
原因を探していろいろなサイトを開いてみたときに同じような状態になっていたサイトもありましたので、参考になるかもしれないと思い、書き込ませていただきました。
>chiffonさん
こんばんは。
ご連絡ありがとうございました。
無事に表示されたようでよかったです。
設定が不足していた件については別途追記したいと思います。
ではでは!
こんばんは。
なんとなく原因のようなものがわかった気がします。
何気なくソースを見てみると、3項で設定した独自タグの部分が、使っている文字コード(EUC)と違って、UTF-8と表示されていました。
それでスクリプトの文字コードを変更して保存し、アップしなおすのですが、全く直りませんでした。
それで、本日サーバー移転をきっかけに文字コードをUTF-8の方をインストールして使うことにしたところ、 yujiroさんの書かれた内容どおりで問題なく表示されました。
もう一つ新着表示に不具合があるのですが、そちらは、落ち着いたらそちらのエントリーにて相談させていただこうかと思っております。
最後に、Movable Typeでのブログでテンプレートを使わせていただき、Template Users
にも入れていただいている「chiffon's diary」もアドレスが変更になりましたので、変えていただけたら幸いです。
アドレスは
http://chiffon.j-mx.com/diary/
です。
>chiffonさん
こんにちは。
ご連絡ありがとうございます。
3項で表示される文字コードは dayChecker.js の文字コードを指定するものですので、ご利用のブログの文字コードがEUCでも大丈夫と思いますが、確認したところ、私がアップロードした dayChecker.js の文字コードが Shift_JIS になってしまっておりました。これがうまく表示されなかった原因かもしれません。ご迷惑おかけして大変申し訳ございません。
とりあえず無事に直ったようでよかったです。
URLの方も先ほど修正させていただきました。
それではよろしくお願い致します。
こんばんわ。
久々にblogをリニューアルしようと思い、このプラグインを使わせて頂こうと思いました。
しかし、一部のリンク(BlogPeopleなど)から飛んで来た時に、IEで文字化けが起きるのです。
Javaの方の文字コードをUTF-8にしてみましたがダメでした。
現在はプラグインを外して通常のカレンダーに戻してしまいましたが、報告だけでもと思いコメントさせて頂きます。
報告が遅れてしまい申し訳ございませんでした。
>Takaさん
こんばんは。
ご連絡ありがとうございました。
こちらでは事象が確認できないため、可能であれば不具合の発生するページのファイルを、FTPツール等でファイル名を変更し、そのファイルを確認させて頂ければ幸いです。
それではよろしくお願い致します。
こんばんわ。
確認して頂こうともう一度横型カレンダーを組み込んでみました。
結果、文字化けは再現されませんでした。
化けていた時と何か条件が違うのかもしれませんが、今となっては全く同じ環境を作る事は出来ません。
原因を調べていた時、Javaの方はUPし直したのですが、プラグインの方はそのままだったので、プラグインのファイルが壊れていた等の原因で化けていたのかもしれません。
今回は私のミスで起きていた現象だった様で、ご迷惑をお掛けして申し訳ございませんでした。
今後はこの様な事の無いように気をつけたいと思います。
>Takaさん
こんにちは。
ご連絡ありがとうございました。
こちらで公開しているカスタマイズは基本的にベータ版という認識ですので、不具合がありましたらお気軽にご連絡ください。どうぞお気遣いなく。
それではよろしくお願い致します。
はじめまして。最近SBを利用し始め、小粋空間さまにはカスタマイズで大変お世話になっております。
休日表示ができることに感激し、プラグインをお借りしたのですが、amazonのオススメ表示をテンプレートに追加してみたところ、それまで問題なく表示されていた休日の色が変わらなくなってしまいました。
todayのスタイルは適応されているようなので、色だけが適応されない原因が分からず行き詰ってしまい、何かアドバイスをいただければと思いコメントさせていただきました。
よろしくお願いいたします。
ひとつ前のコメントから時間が空いていますが、こちらにコメントで問題ありませんでしたでしょうか...?
>あきさん
こんばんは。
ご質問の件ですが、CSSのセレクタ名(holiday/saturdayなど)が重複しているのではないかと思われます。
解決できない場合は不具合が生じている状態のサイトのURLをご連絡ください。
それではよろしくお願い致します。
yujiroさんご回答ありがとうございます。
セレクタ名を変えてみましたが改善されず、機能を切ったり表示数を変更したりをできる限り試したところ、どうやらオススメを二つ以上表示すると反映されなくなるようです。
ソースを開いたところ、スクリプトがごっそりなくなっている状態でした。
原因はわかったのですが、そこからまた動けなくなってしまい、お手数をかけてしまうのですが、URLを添えさせていただきました。http://ri2tw0.com/sb/です。
お時間あるときにで構いませんので見てやってください。よろしくお願いいたします。
>あきさん
こんにちは。
対処については申し訳ありませんが、下記の内容を直接テンプレートに設定してください。
なお、Amazonの表示にプラグインを使われているのでしたらプラグインの配布元URLをご連絡ください。
1.head終了タグの直前に下記を追加。「ドメイン」の部分はブログのドメインに書き換えてください。
<script type="text/javascript" src="http://ドメイン/dayChecker.js"></script>
2.body終了タグの直前に下記を追加。「ドメイン」の部分はブログのドメインに書き換えてください。
<script type="text/javascript" src="http://ドメイン/calendar.js"></script>
3.以下の内容を外部ファイル(calendar.js)として index.html と同じ位置にアップロード。
function setWeekendAndHoliday() {
var id = 'rt_holiday_calendar';
// check year and month
var element = document.getElementById(id);
if(!element){
return;
}
var link = element.getElementsByTagName('a')[0].getAttribute('href');
var ym = link.split('=')[1];
var year = ym.substring(0, 4);
var month = ym.substring(4);
if (month == '12') {
month = '01';
year++;
} else {
month++;
if (month < 10) {
month = '0' + month.toString();
}
}
buf = element.innerHTML;
// delete span
buf = buf.replace(/<span class="today">(\d+)<\/span>/gi,"\$1");
buf = buf.replace(/<span class=today>(\d+)<\/span>/gi,"\$1"); // for IE
// add span
buf = buf.replace(/\s(\d+)\s/gi," <span class=\"day\">\$1<\/span> ");
buf = buf.replace(/\s(\d+)\s/gi," <span class=\"day\">\$1<\/span> ");
buf = buf.replace(/\s(<a\s\S+>\d+<\/a>)\s/gi," <span class=\"day\">\$1<\/span> ");
buf = buf.replace(/\s(<a\s\S+>\d+<\/a>)\s/gi," <span class=\"day\">\$1<\/span> ");
element.innerHTML = buf;
var spans = element.getElementsByTagName("span");
var day;
for (i = 0; i < spans.length; i++) {
if (spans[i].getAttribute("class") == "day" ||
spans[i].getAttribute("className") == "day") {
if(spans[i].innerHTML.indexOf("href") != -1){
day = spans[i].getElementsByTagName("a")[0].innerHTML;
} else {
day = spans[i].innerHTML;
}
if (isHoliday(year, month, day)) {
if (isToday(year, month, day)) {
spans[i].setAttribute('class', 'tholiday');
spans[i].setAttribute('className', 'tholiday');
} else {
spans[i].setAttribute('class', 'holiday');
spans[i].setAttribute('className', 'holiday');
}
} else if(isSaturday(year, month, day)) {
if (isToday(year, month, day)) {
spans[i].setAttribute('class', 'tsaturday');
spans[i].setAttribute('className', 'tsaturday');
} else {
spans[i].setAttribute('class', 'saturday');
spans[i].setAttribute('className', 'saturday');
}
} else if (isToday(year, month, day)) {
spans[i].setAttribute('class', 'today');
spans[i].setAttribute('className', 'today');
}
}
}
}
setCurrentDate();
setWeekendAndHoliday();
それではよろしくお願い致します。