【ココログ】ラインカレンダーの設置

あずスタのads(あず)さんが作られたココログ・カレンダーを横一列に表示させるスクリプト(以下ラインカレンダーと呼称)を若干改造して設置してみました。

タイトルバナーの下に表示されているのがそれです。シンプルなのが好み(^^)。

『ココログ・カレンダーを横一列に表示させるスクリプト』を見たときから設置したいとは思っていたのですが、必須条件である“IDが「banner-body-bottom」のdivタグ（ブロック要素）”をこのサイトは充たしていない(何故かうちのサイトでは要素が存在しない)ため、スクリプトの改変が必要なので今まで見送っていました。

これ、上級テンプレートで調べてみると、MTWeblogIfExternalStylesheetが真のときだけ表示されるみたいなんですが……プロコースだとデフォルト偽なのかなぁ？

オリジナルからの修正点は以下のようになります。

1. カレンダースクリプトに対応。
   併用するとラインカレンダーでも前後月への移動が可能になります。
2. id="banner-body-bottom" のdiv要素が無いページに対応(id="banner" の div要素中に追加)。
3. 通常カレンダー消去オプション(bDeleteCal)が有効のときdisplay属性をnoneにするように変更(オリジナルはinnerHTMLクリア)。

■単体で設置する場合

オリジナルの設置方法とほぼ同様ですが、オリジナルでは、

<script type="text/javascript" src="http://adstv-web.cocolog-nifty.com/studio/files/cocolog_linecalendar.js"></script>

となっている箇所を、

<script type="text/javascript" src="http://furyu.tea-nifty.com/script/cocolog_linecalendar.js"></script>

に変更して下さい。
【2006.08.16】追記
タイトルバナーに画像を設定している場合には、LineCalendar(); をコールする前に bAddInBanner = false; を追加して下さい(下記の赤色部分を追加します)。

<script type="text/javascript">
<!--
bAddInBanner = false;
LineCalendar();
// -->
</script>

■カレンダースクリプトと併用する場合

設置用スクリプトは次のようになります。

<!--【ラインカレンダー】(オリジナル：http://adstv-web.cocolog-nifty.com/studio/2006/06/post_cddd.html) -->
<style type="text/css">
<!--
#banner-body-bottom {
text-align: center;
padding: 4px;
}
#Line-Calendar {
font-family: verdana;
font-size: small;
text-align: center;
display: block;
padding: 4px;
border: 1px dashed red;
}
#Line-Calendar a { color: red; }
#Line-Calendar a:hover { color: white; background-color: red; }
-->
</style>

<script type="text/javascript" src="http://furyu.tea-nifty.com/script/cocolog_linecalendar.js"></script>

<!--【JavaScript版カレンダー】 -->
<script type="text/javascript" src="http://furyu.tea-nifty.com/script/prototype.js"></script>
<script type="text/javascript" src="http://furyu.tea-nifty.com/script/dayChecker.js"></script>
<script type="text/javascript" >
<!--
// === [オプション設定]
var calendarType ='J' ; // J:日本語 E:英語
var dateArchive = false ; // 日別アーカイブ有りの場合のみtrue設定可(日別ページへのリンクになる)
var calendarOnload = function( calendarObj ) {
    bAddInBanner = true; // タイトルバナーが画像の場合はfalseに変更すること
    LineCalendar(); // ラインカレンダー表示
    if ( navigator.userAgent.match( /Opera/i ) ) {
        var divs = document.getElementsByTagName('div') ;
        for ( var ci=0; ci < divs.length; ci++ ) {
            if ( divs[ci].className == 'sidebar' ) {
                divs[ci].style.display = 'block' ;
            }
        }
    }
    else {
        calendarCssAddRule( ".sidebar", "display:block" ) ;
    }
}
//-->
</script>
<noscript>
<style type="text/css">
<!--
.sidebar {
display:block;
}

/*
.calendar {
display:block;
}
*/

#calendar {
display:block;
}

-->
</style>
</noscript>
<script type="text/javascript" src="http://furyu.tea-nifty.com/script/cocoCalendar.js"></script>
<script type="text/javascript" >
<!--
// === [カスタマイズカレンダー呼出]
checkCreateCalendar();
//-->
</script>

青色がラインカレンダーのための設定です。
【2006.08.16追記】赤色の箇所は、タイトルバナーが画像の場合はtrueをfalseに変えて下さい。

なお、元のカレンダーを表示させずにラインカレンダーだけにしたい場合には、カスタムCSSに

.calendar {
display:none;
}

#calendar {
display:none;
}

を追加しておきます。