ココログのカスタマイズ 【カレンダー編（導入）】

カスタマイズカレンダーの導入方法についてご説明します。

【ブログの設定】
設定を「カレンダーを表示」にする必要があります。
設定されていない場合は「デザイン」→「コンテンツ」→サイドバーのコンテンツの「カレンダー」で設定を行って下さい。

次に、「日付ヘッダーを表示」に設定する必要があります。（記事タイトルの上に表示されている日付です）
設定されていない場合は「デザイン」→「コンテンツ」→「日付ヘッダー」で設定を行って下さい。
また、本 JavaScript が対応している「日付の書式」は以下の通りです。

• 2006/02/19
• 2006.02.19
• 2006-02-19
• 2006年2月19日
• 2006年2月19日 (日)
• 2006年2月19日 (日曜日)

上記以外の書式を使用している場合は、「設定」→「表示設定」→「日付の書式」で設定変更を行って下さい。

【JavaScriptの設定】
こちら（calendar.js 50.3K 2006/4/6更新）からJavaScriptのファイルをダウンロードし、利用しているブログのURL直下（http://*****.cocolog-nifty.com/*****/）にファイルをアップロードして下さい。
「コントロールパネル」→「ファイル」からアップロードすることができます。

【2006/4/5追記1】
アップロードするディレクトリは http://*****.cocolog-nifty.com/*****/ です。
http://*****.cocolog-nifty.com/ ではありません。
本サイトを例にすると、http://maximum.cocolog-nifty.com/longer_than_forever/になります。（http://maximum.cocolog-nifty.com/ ではありません）
【2006/4/5追記1 ここまで】

次に「サブタイトル」に下記のコードを記述して下さい。
「ブログ」→「設定の変更」→「ブログのサブタイトル（キャッチフレーズ）」から設定することができます。

<script language="javascript">
<!--
var blogURL = "http://*****.cocolog-nifty.com/*****/";
var blogStartYear = 2005;
var blogStartMonth = 10;
var calendarType;
//-->
</script>
<script language="javascript" src="http://*****.cocolog-nifty.com/*****/calendar.js" type="text/JavaScript"></script>

尚、各値は利用するブログに合わせる必要がありますので、下記を参考にして記述して下さい。

• blogURL：ブログのURLです。
• blogStartYear：ブログを開始した年（西暦）
• blogStartMonth：ブログを開始した月
• calendarType：カレンダーを日本語表示にする場合は、 var calendarType = "J"; として下さい。英語表示の場合はそのまま var calendarType; です。
• src：ブログのURL + calendar.js です。

ここまでの手順で、ひとまず動作するようになるはずです。

【動作しない場合】
上記の手順を再度確認して下さい。
それでも動作しない場合は、次のような原因が考えられます。
他の JavaScriptを 使用していて、そのスクリプトの中で onload を使用している場合、本スクリプト或いは他のスクリプトが動かなくなってしまう可能性があります。
その場合は、他の JavaScript 或いは本スクリプトの onload で関数を呼出している部分を、片方のスクリプトに統合することにより回避できるかと思います。
本スクリプトの方で呼出す関数は checkCreateCalendar(); になります。

【その他】
ここからはオマケ的な内容になります。
当該月カレンダーが表示されるまでタイムラグがあるため、突然ガサっと書き換わるので何となく気持ち悪い感じを受けるかもしれません。
これについては、以下のような感じで対応するのが良いかなと思います。
ちなみに本ブログもこの方法で表示させています。

1. カレンダーは非表示に設定する。
2. 「マイリスト」に「カレンダー」等の名前で「リンク」タイプの新規項目を作成する。
3. 「設定の変更」により「メモの表示」設定を「テキスト表示」に設定する。
4. 追加した「マイリスト」に項目を追加する。この時「タイトル」「URL」は空欄とし、「メモ」に空のカレンダーHTMLを設定する。
   空のカレンダーのソースは以下の通りです。

<div id="calendar" class="module">
  <table>
    <caption>&nbsp;</caption>
      <tr>
        <th>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th>
        <th>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th>
      </tr>
      <tr>
        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
      </tr>
  </table>
</div>

もしかしたら説明が足りない部分があるかも知れませんので、その辺は随時追記していきたいと思います。

【2006/4/5追記2】
コメントを受け付けるように設定を変更しました。
ご質問がございましたら、ご記入ください。
また、個人的な都合により、回答までに時間が掛かる場合があるかと思いますが、ご理解の程宜しくお願いいたします。