« ココログの関係者にお会いしてきました | トップページ | クロサギ・第9話 »

2006.06.11

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

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

○スクリプトの設置方法

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

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

マイリストのメイン画面の「項目の追加」で、
「タイトル」と「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>

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

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

○スクリプトの処理概要

1.通常のカレンダーを探し、年月情報とリンク付き日付情報を取得。
2.取得した情報を使って、横一列表示のHTMLコードを作成。
3.バナー下部を探し、作成したHTMLコードを挿入。
(表示完了)

○設置の注意事項

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

--------
(ソース先頭)

(左サイドバー等)
<スクリプト設置(先頭)> ← ×これは正しくない設置例

[通常のカレンダー]

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

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

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

(ソース最後)
--------

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

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

横一列カレンダーは、ココログの画面上部にある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で定義しない限り出ません。

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

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

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

○バージョンアップ情報

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

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

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

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

|

« ココログの関係者にお会いしてきました | トップページ | クロサギ・第9話 »

コメント

あずさん、どうもです。

こちらのスクリプト、そのままでは何故かうちのサイトでは動作しなかったので、勝手ながら若干の改修を加えた上で設置させていただきました。

【ココログ】ラインカレンダーの設置
http://furyu.tea-nifty.com/annex/2006/08/post_207c.html

(ついでに、拙作のカレンダースクリプトと併用時することで、前後月への移動も可能なようになりました(笑)。)

便利なスクリプトの公開、有り難うございます。

投稿: 風柳 | 2006.08.12 23時35分

風柳さん、毎度どうもです! スクリプトの前提条件をクリアさせた上で、ご自身のスクリプトと連動させたんですね。素晴らしい!

このスクリプトは大したことをしていなくて、元ネタのカレンダーを使って表現を変えているだけなんだけど、そのような小さな発想を活かした効果もなかなか面白いものですよね。今後も小ネタ系のスクリプトを公開していきたいと思っています。またじっくり吟味してもらえるとうれしいです!(処理を見られるのは少し照れるけど)

投稿: ads(あず)@管理人 | 2006.08.13 02時26分

あずさん、どうもです。
詳細はあちらでコメントしましたが、確かにタイトルバナーに画像を使っている場合はNGでしたので修正しました。
お知らせ有り難うございました。

投稿: 風柳 | 2006.08.16 02時47分

風柳さん、わざわざこちらでもご報告いただき感謝します!

「バナー画像を使用しているblog」とはまさに私のblogのことで、カレンダーを表示させるにはバナー部分の外を使わなければならないみたいなんですね。前提条件外の環境下でどうしても表示されかったので、ちょっと思い切った作戦に出ました。あんな処理で良いのかなあ。でもIEでもFirefoxでも正常表示できたから良いかなあ。

まあそれはともかく、素早く対処されたようで良かったです!

投稿: ads(あず)@管理人 | 2006.08.16 03時11分

コメントを書く



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




トラックバック

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

この記事へのトラックバック一覧です: ココログ・カレンダーを横一列に表示させるスクリプト:

» 【ココログ】ラインカレンダーの設置 [風柳亭 - 別館:書庫のある庵 -]
あずスタのads(あず)さんが作られたココログ・カレンダーを横一列に表示させるスクリプト(以下ラインカレンダーと呼称)を若干改造して設置してみました。 タイトル... [続きを読む]

受信: 2006.08.12 23時29分

» ココログカレンダーPlus [風柳亭 - 別館:書庫のある庵 -]
ココログのカレンダーを拡張するスクリプト『ココログカレンダーPlus』を作成しました。 といっても、以前から公開している『バックナンバーに応じたカレンダーを表示... [続きを読む]

受信: 2008.01.21 01時22分

« ココログの関係者にお会いしてきました | トップページ | クロサギ・第9話 »