ココログ・カレンダーを横一列に表示させるスクリプト

ココログでカレンダーを横一列に表示させるスクリプト（JavaScript）を作成してみました。本来「横一列表示」は、テンプレートタグを自由に扱える「プロ（有料）」でないとできませんが、サイドバーに設置可能な「通常のカレンダー」を情報源にしたスクリプト処理で実現できました。つまり、「通常のカレンダー」の設置が必須条件になりますが、全プランで使用可能です。

○スクリプトの設置方法

ココログにログインして「マイリスト」を開き、
「リストのタイプ」が「リンク」型のリストを新規作成します。
（既に作成済みの方はそれを代用しても構いません）

マイリストのメイン画面の「設定の変更」で、
「２．高度な設定」の「メモの表示」の設定を、
「テキスト表示」にして「変更を保存」ボタンを押下します。

マイリストのメイン画面の「項目の追加」で、
「タイトル」と「URL」には何も記入しないまま、
「メモ」に次のコードを貼り付けて「追加」ボタンを押下します。

<style type="text/css">
<!--
#banner-body-bottom {
text-align: center;
padding: 4px;
}
#Line-Calendar {
font-family: verdana;
font-size: small;
text-align: center;
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://adstv-web.cocolog-nifty.com/studio/files/cocolog_linecalendar.js"></script>
<script type="text/javascript">
<!--
LineCalendar();
// -->
</script>

※スクリプトファイルは、ダウンロードして使用しても構いません。

スクリプトの処理概要を簡単に説明します。

○スクリプトの処理概要

１．通常のカレンダーを探し、年月情報とリンク付き日付情報を取得。
２．取得した情報を使って、横一列表示のHTMLコードを作成。
３．バナー下部を探し、作成したHTMLコードを挿入。
（表示完了）

○設置の注意事項

通常のカレンダーは必ず設置し、
それより後の位置に作成したマイリストを設置してください！
また、通常のカレンダーを操る別のスクリプトを使用している場合は、
誤動作防止のため通常のカレンダーより後でそのスクリプトより前の位置に設置してください！

--------
（ソース先頭）

（左サイドバー等）
＜スクリプト設置（先頭）＞　←　×これは正しくない設置例

［通常のカレンダー］

＜スクリプト設置＞　←　○これが正しい設置例

（通常のカレンダーを操る別のスクリプト）

＜スクリプト設置＞　←　×これは正しくない設置例

（ソース最後）
--------

ソースを表示させた時に、以上のようになっていればＯＫです。

○デザインについての説明

横一列カレンダーは、ココログの画面上部にあるblogタイトルやバナーの真下の位置を見つけ、そこに表示します。真下の位置とは、具体的にはIDが「banner-body-bottom」のdivタグ（ブロック要素）の場所です。ここに、横一列カレンダーのspanタグ（インライン要素）付きのHTMLコードを挿入します。なお、spanタグのIDは「Line-Calendar」と定義しています。

<div id="banner-body-bottom"><span id="Line-Calendar">（横一列カレンダー）</span></div>

※外枠が「banner-body-bottom」で、内枠が「Line-Calendar」。
　　枠の色は、CSSで定義しない限り出ません。

この２つのIDに対して、CSSでデザイン定義を行うことができます。設置サンプルとして挙げたのはほんの一例で、例えばリンク色を変えたり、hover（マウスカーソルを乗せた時）色指定を加えたり、全体を右寄せにしたり、フォントの種類や大きさを自由に変更したりと、様々なことができます。ココログデザインのリッチテンプレートを利用しているココログは、そのテンプレートに合わせたデザイン定義をすると横一列カレンダーが溶け込んで見えます。CSSの指定や定義については、他のガイド系サイトを参照ください。

ただし！　全てのテンプレートで試したわけではないため、「banner-body-bottom」指定の処理だと問題になる可能性もあります。それが分かった際には修正します。

それでもダメな場合は、ご報告願います。要望事項や設置報告もＯＫです！

○バージョンアップ情報

テンプレートの種類による問題があるようです。
とりあえずの対処案として・・・。
・リッチテンプレート：
上記の通りで問題無さそうです。
・カスタムテンプレート：
こっちの場合、「banner-body-bottom」が生成されない模様。
そこで、ココログのサブタイトルに、
<div id="banner-body-bottom"></div>
を記入して保存して再構築。これでいけます。　(^_^;)

NEW!
「banner-body-bottom」がソース内に存在しない場合も、
強制的にバナー直下へ表示するようにしてみました。
いかがなものでしょうか？（いずれやるつもりで放置気味でした＾＾）
後日、オプション機能も追加します！

以上で完了です。ブラウザで表示を確認してください。
横一列カレンダーが現れましたでしょうか？
今後しばらくの間スクリプトの調整を行いますが、
上記のコードは変更しなくても大丈夫です。
ただ、オプション機能をいくつか追加するので、
それを使用する場合は変更が必要です。

改造は自由です。どうぞ使ってみてくださいね！