Top > CMS・ブログ > Serene Bach > カスタマイズ > カレンダー > 2006年4月
2006年4月24日

休日表示付リアルタイムカレンダープラグイン(横型) for Serene Bach 不具合修正のお知らせ

April 24,2006 12:37 AM
Tag:[, , ]
Permalink

トラックバックを頂いて気がついたのですが、休日表示付リアルタイムカレンダープラグイン(横型) for Serene Bach に不具合がありました。
具体的には、カレンダーの日付のリンクが連続している、つまり毎日投稿している場合、CSSの設定が全て反映されません。

本日プラグインを修正致しましたので、これまでご利用頂いている方は申し訳ございませんが休日表示付リアルタイムカレンダープラグイン(横型) for Serene Bach のエントリーよりプラグインの差し替えをお願い致します。また「プラグインが有効にならない」という方にはプラグインに実装しているスクリプトを抜き出し、直接テンプレートに設定して頂いてますが、その場合は下記の青色部分を1行追加してください。
テーブル型のプラグインには影響ありません。

     :
// 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;
     :

以上です。
ご迷惑をおかけして申し訳ありませんがよろしくお願い致します。

Comments [0] | Trackbacks [0]
2006年4月 3日

休日表示付リアルタイムカレンダープラグイン(横型) for Serene Bach

April 3,2006 1:35 AM
Tag:[, , , ]
Permalink

休日表示付リアルタイムプラグイン(横型)Serene Bach のカレンダーに土・日祝日・本日を表示するプラグインです(sb も大丈夫だと思います)。ここでは公開テンプレートをサンプルに横型タイプのカレンダーを追加するカスタマイズ方法をご紹介します。他のテンプレートでもご利用可能です。
スクリーンショットは公開テンプレートに設定した完成例です(画像をクリックすると全体が表示されます)。

注:本プラグインは横型カレンダー(独自タグが {calendar_horizontal})専用です。

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

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

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 をクリックして休日表示用カレンダースクリプトをダウンロードしてください。

download

ダウンロードした 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項を追記しました。

Comments [26] | Trackbacks [6]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner


AMN
Categories
Monthly Archives
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3