« カレンダースクリプトの小技その3:月毎に背景画像を設定 | トップページ | カレンダースクリプトの小技その4:本日と祝日の表示を変える »

2006/08/12

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

あずスタの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;
}
を追加しておきます。

« カレンダースクリプトの小技その3:月毎に背景画像を設定 | トップページ | カレンダースクリプトの小技その4:本日と祝日の表示を変える »

ウェブログ・ココログ関連」カテゴリの記事

コメント

風柳さん、こんにちは!
近頃カレンダー関係で精力的に動いていらっしゃいますね。

私のスクリプトへのテコ入れの件、ありがとうございました。
「2」の前提条件外の対策はいずれ同じようなことをやるつもりでいたけど、
今になってようやく取り入れました。うちでも表示されるようになりました(笑)。

ところで、「id=banner」の部分に前提IDのdiv要素を「appendChild」した場合、
バナー画像を使用しているblogでは上手く表示されないかも?
「id=banner」のdiv要素の次に付加した方が無難かも?
詳しく確認していませんが、一応そちらの改造版でも動作確認していただきたいです。
問題が無ければOKですよ!

あずさん、お知らせ有り難うございます。

確かに、タイトルバナーを画像にしていると、id=bannerのdiv要素内にappendChild()した場合はNGですね(styles.cssで#bannerがdisplay:none;されてしまっていました)。

うーん、そうするとbanner直後に挿入……でも、このサイトの場合だとバナー内に入れてしまった方が収まりがよいので……。

結局、オプション(bAddInBanner)を追加して選択出来るようにしました。
#スタイルシートの状態を調べれば自動判別も出来るかなとも思うのですが、技術力不足です(苦笑)

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/161784/11405511

この記事へのトラックバック一覧です: 【ココログ】ラインカレンダーの設置:

« カレンダースクリプトの小技その3:月毎に背景画像を設定 | トップページ | カレンダースクリプトの小技その4:本日と祝日の表示を変える »

戻るリンク追加

カレンダー

2017年10月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

ココログカレンダーPlus

検索


    • Web全体 サイト内
    • 蔵書のISBNを入力して下さい
    • はじめる前
      初級者向け
      上級者向け
      ブログ紹介
      結果を表示

最近のトラックバック

コメントリストツリー化

無料ブログはココログ