横型カレンダーを付けてみた。『超おむすび』

カレンダーを付けてみようと思ったら…。
MovableType4.0あたりの情報しかない…。
おまけに…私のやりたいのはウィジットにある 「箱型カレンダー」ではなく 「横型カレンダー」 。

さて、真っ先に”小粋空間様”のテンプレートを使わせていただいたのですが、カレンダーが表示しない？。

ま、箱型は使う気はなかったので気にもしていなかったのですが、さて横置きで表示しようとしたら、あまり情報が無いんですね。それでも小粋空間様の所に【Ajax 月送りカレンダー（横型）】という記事が。

でも日付を見ると 2006年。
明らかに古い情報で 4.25で使えるのか？、不安でしたが何とか組み込むことに成功したので、その手順をメポしておきます。

■必要なものをダウンロード

prototype.js
ajaxCalendar.js （←コレは横表示専用です。ボックス型と同名ファイルですからご注意を）
dayChecker.js

ダウンロードしたファイルをブログサイトのトップにＦＴＰしておきます。

■カレンダーテンプレートを作成

テンプレート書式は”小粋空間様”のものをコピペでＯＫですが、テンプレートを作り方が説明とはちょっと違ってきます。

ブログのテンプレート画面

「ブログ記事リスト」をクリックして、新規アーカイブテンプレートとい「カレンダー」を作ります。

名前は「カレンダー」。
内容は”小粋空間様”の所からコピペします。
私の場合「公開」⇒「アーカイブの設定」をしていますので、フォルダ名も追加しました。

format="アーカイブフォルダ/calendar/%Y/%m/index.html

■アーカイブマッピングの設定

カレンダーテンプレートを保存したら次に「新しいアーカイブマッピング」を作ります。

アーカイブ設定

そして「アーカイブテンプレート一覧」に戻り、今度は「ブログ記事リスト」にもアーカイブマッピング「日別」を追加します。

アーカイブ設定

■カレンダー表示部分の設定

これも”小粋空間様”からコピーしたものを「ヘッダー」の「<body>」以降の好きな場所に貼り付けます。
この時、「アーカイブの設定」をされている場合、そのフォルダ名を追記しておきます。

後は、デフォルトのＣＳＳの「/* カレンダー */」部分を横置き用のＣＳＳとを入れ換え、再構築して終わりです。

ちなみに、問題なく表示されるとココで”小粋空間様”のテンプレートの場合、本来の箱型テーブルカレンダーも表示されます。その場合、ソレは必要ありませんので「ウィジット」の「3カラムのサイドバー(サブ)」左にある「カレンダー」を摘んで右に戻して保存して下さい。

初期状態

カレンダーを外した状態

以上メポでした。

【 6 】横型カレンダーを付けてみた。