小粋空間  -  a cheap joke and a play on words site

当サイトで配布しているテンプレート（3・2・1カラム固定レイアウトおよび1カラムリキッドレイアウト）の、ブログの左右および下部に表示されている背景の背景色を変更する方法です。

まずはサンプルをご覧ください。

変更前

変更後

以下、変更方法です。

１．固定レイアウト（3カラム／2カラム／1カラム）の場合

リスト1.1に示すスタイルシートの赤色部分を変更します。この設定はスタイルシートの後方にあります。

body.layout-three-column,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
    margin-bottom: 20px;
    text-align: center;
    background: #36414d;
}

リスト1.1 固定レイアウト（3カラム／2カラム／1カラム）の場合

２．1カラムリキッドレイアウトの場合

リスト2.1に示すスタイルシートの赤色部分を変更します。１項と同様、この設定もスタイルシートの後方にあります。

body.layout-one-column-liquid {
    background: #36414d;
}

リスト2.1 1カラムリキッドレイアウトの場合

３．変更例：背景色をグレーに変更

冒頭のスクリーンショットの「変更後」の設定はリスト3.1のように変更しています。色はお好みに応じて変更してください。

body.layout-three-column,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
    margin-bottom: 20px;
    text-align: center;
    background: #dddddd;
}

リスト3.1 変更例

カラーの指定方法は、例えば下記にあります。

eWeb：Web配色の見本：Webセーフカラー216色／カラーネーム一覧

その他、Google 等の検索エンジンで「Web」と「配色」「カラー」「カラーチャート」「RGB」等を組み合わせたキーワードで検索すると色々出てきます。

Movable Type で一旦公開したエントリーを削除した場合、対象のエントリー・アーカイブはデータベースから削除され、メインページやカテゴリー・アーカイブ／月別アーカイブに表示された記事、さらに各ページに貼られた対象エントリーへのリンクもすべて消滅しますが、Movable Type を普通にインストールしたままの状態では、エントリーを公開した時点で生成されるHTMLファイルは残ってしまいます。

したがって、対象となるエントリーの公開→削除のタイミングによっては検索ロボットにクロールされてしまい、削除したはずのエントリーが検索エンジン経由で他の方に閲覧されてしまう可能性があります。*1

これは公開したエントリーを「非公開」に変更した場合や出力ファイル名を変更した場合も同様です。

このような事態を回避したい場合、これまではFTPツール等を利用して手動で残ってしまったHTMLファイルを削除する必要がありましたが、3.3 からはオプション機能として、

• エントリー削除
• 「公開」から「非公開」への変更
• ファイル名変更

の各操作と同時に、該当のHTMLファイルも Movable Type が自動的に削除してくれるようになりました。

参考サイトは下記です。ありがとうございました。

MovableTypeで行こう！：Movable Type 3.3-jaにアップデートしました
MovableType備忘録：ブログを上手に運用する

１．設定方法

Movable Type をインストールしたディレクトリにある、mt-config.cgi に下記の1行を追加します。

DeleteFilesAtRebuild 1

さらに具体的に説明すると、サーバにアップロードしている mt-config.cgi をダウンロードして、任意のエディタで開き、リスト1のように青色の行を追加し（こういう場合のお作法として、追加した行の行末には改行をいれておきましょう）、ファイルを保存後、mt-config.cgi を元の場所に再度アップロードします。

##          Movable Type configuration file                   ##
##                                                            ##
## This file defines system-wide settings for Movable Type    ##
## In total, there are over a hundred options, but only those ##
## critical for everyone are listed below.                    ##
##                                                            ##
## Information on all others can be found at:                 ##
## http://www.sixapart.jp/movabletype/manual/config
 
################################################################
##################### REQUIRED SETTINGS ########################
################################################################
 
# The CGIPath is the URL to your Movable Type directory
CGIPath    http://www.example.com/cgi-bin/mt/
 
# The StaticWebPath is the URL to your mt-static directory
# Note: Check the installation documentation to find out 
# whether this is required for your environment.  If it is not,
# simply remove it or comment out the line by prepending a "#".
StaticWebPath    http://www.example.com/mt-static
 
#================ DATABASE SETTINGS ==================
#   REMOVE all sections below that refer to databases 
#   other than the one you will be using.
 
##### SQLITE #####
ObjectDriver DBI::sqlite
Database /path/to/sqlite/database/file
 
DeleteFilesAtRebuild 1

リスト1　mt-config.cgi への設定例

２．各操作におけるファイル削除・リンク変更等の振る舞いについて

デフォルトテンプレートを元に、

• エントリー削除
• 「公開」から「非公開」への変更
• エントリー編集画面の「出力ファイル名」を変更
• 管理画面の「アーカイブマッピング」欄の「出力ファイル名」を変更

の各操作について、

A.対象エントリーに対応するHTMLファイル削除

B.対象エントリーの前後エントリーに設定された（対象エントリーの）リンクの削除または変更

C.カテゴリー・アーカイブ／日付アーカイブの（対象エントリーの）記事の削除または変更

D.メインページの（対象エントリーの）記事・リンクの削除または変更

が、それぞれどのようになるか実験してみました（3つのエントリーを「公開」で保存し、中間のエントリーを操作）。
実験結果は表1の通りです。

ご覧の通り、HTMLファイル自体はどの操作でも概ね削除されます。他のページに残存したリンクは一部再構築が必要なようです。

*1：「ダイナミックパブリッシング」を利用している場合、このような事象は発生しません。
*2：エントリー一覧画面右上にあるプルダウンメニューの「非公開にする」の操作ではファイルは削除されませんでした。

このサイトの右下に表示しているカウンタがまもなく 2222222 に到達します。現在のアクセスからすると本日中に超えそうです。

このカウンタはサイト開設当初の2004年5月から設置しているもので、その値はいわゆる「ページビュー」と、隣りに設置している「ビジット」カウンタの中間くらいの粒度で更新されているようです（IPチェックは行っている筈なのでやや閾値が低いビジットと言えるでしょう）。

ということで、2222222 のキリ番をゲットされた方は、カウンタおよびブラウザ内の他の部分を含んだキャプチャ画面をメールでお送り頂ければ、貴サイトを当サイトのエントリーにて紹介させて頂きます。*1

*1：サイト内容によってはお断りする場合があります。予めご了承ください。

飲みに行く。

先日公開した CommentOrderNumberByDescend プラグインをバージョンアップしました。

バージョンアップの内容は次の通りです。

• コメント内の MTCommentOrderNumberByDescend タグの重複設定に対応しました
• 複数エントリーアーカイブで利用するケースに対応しました
• MTComments タグに lastn 属性が付与されている場合、MTCommentOrderNumberByDescend で表示する初期値として、「コメント総数」あるいは「lastn値」のいずれかを選択できるようにしました（同一コメント内で両者を共存させることも多分可能）

設定方法の詳細等につきましては元エントリーを参照ください。

シックス・アパート社より、個人向け無料ブログ・サービス「Vox」が、本日10月27日より、日本・米国・フランスの3ヶ国で同時公開されました。

シックス・アパート、家族でも使える、安心な無料ブログ・サービス「Vox」を世界同時公開

シックス・アパートは本日、家族でも使える、安心な無料ブログ・サービス「Vox」を世界同時公開したことを発表いたします。「Vox」はこれまでのブログサービスとは違う、手軽さと安心を両立させたサービスです。自由に登録できますので、ぜひ「Vox」でのブログをお試しください。

ベータ版では既存利用者からの招待制となっていましたが、正式版は「Vox」サイトから自由にユーザー登録することができます。

Vox の主な特徴は次の通りです（詳細は引用記事参照）。

• ブログで初めて、柔軟できめ細かい閲覧制限機能を提供
• 150種類を超える豊富なテンプレート集から自分のブログのデザインを簡単に変更可能
• 高機能なWYSIWYGエディタと、コンジット *1 連携により、簡単にリッチな記事を作成
• 携帯電話からの登録および投稿・閲覧が可能
• 「今日の質問（QotD）」や「Vox Hunt」など、ブログを書き続ける工夫をサービスとして提供

*1：他のパートナー企業が提供しているウェブサービスを「Vox」の中に簡単に組み込めるようにする仕組み

ということで、ここでは下記の3項目に分けて説明します。

1. 基本設定
2. 選択状態を保持する
3. 公開テンプレートの1カラムレイアウトでの設定

１．基本設定

プルダウンメニューを選択すると、即座に月別アーカイブにジャンプする設定です。
リスト1.1のHTMLタグおよびスクリプトをそのままサイドバーに貼り付けてください。赤色部分はメニュータイトルですのでご自由に変更してください。

<script type="text/javascript">
<!--
function selectUrl(sel){
    if(sel.options[sel.selectedIndex].value){
        location.href = sel.options[sel.selectedIndex].value;
    }
}
//-->
</script>
 
<div class="sidetitle">
Monthly Archives
</div>
 
<div class="side" id="monthlylist">
<form>
<select name="select" onChange="selectUrl(this.form.select)">
<option value="">選択してください</option>
<!--archive-->
<option value="<%archive_link>"><%archive_year>年<%archive_month>月 [<%archive_count>]</option>
<!--/archive-->
</select> 
</form>
</div>

リスト1.1　HTMLとスクリプト

form を括っている div 要素も任意ですので削除しても構いませんが、２項の機能を有効にする場合は 「id="monthlylist"」を form 要素に付与してください。

プルダウンメニューのフォントサイズ等を変更する場合、リスト1.2のようなものをスタイルシートに追加してください。

select {
    font-size: 10px;
}

リスト1.2　スタイルシート

２．選択状態を保持する

下記のスクリプトをリスト1.1 のすぐ下に追加するだけで、ジャンプ先の月別アーカイブページで、選択した年月がプルダウンメニューに表示されるようになります。全体を <!--date_area-->～<!--/date_area--> で括ってますので、月別アーカイブページ以外では無効（先頭の「選択してください」を表示）になるようにしています。

<!--date_area-->
<script type="text/javascript">
<!--
var data ="<%now_year><%now_month>";
var year = data.substring(0,4);
var month = data.substring(4,6);
var nodes = document.getElementById('monthlylist').getElementsByTagName("option");
for (var i = 0; i < nodes.length; i++) {
    var selectYear = nodes[i].innerHTML.substring(0,4);
    var selectMonth = nodes[i].innerHTML.substring(5,7);
    if(year == selectYear && month == selectMonth){
        nodes[i].selected = true;
    }
}
//-->
</script>
<!--/date_area-->

リスト2.1　選択状態を保持するスクリプト

３．公開テンプレートの1カラムレイアウトでの設定

FC2ブログを1カラムレイアウト（サイドバーなし）にすることで、シンプルな日記サイトにすることができ、さらに月別アーカイブへのリンクが表示されれば過去の記事に簡単にジャンプできるようになります。
基本的には１項・２項の設定を任意の位置に追加すれば良いのですが、ここではフッタに表示する例として、当サイトの公開テンプレート（1カラムリキッドレイアウト・1カラム固定レイアウト共通）を用いたカスタマイズを紹介します。

下記にサンプルを用意しましたのでご確認ください（表示のみでプルダウンは動作しません）。

1カラムリキッドレイアウト
1カラム固定レイアウト

カスタマイズ方法は、「FC2 ブログテンプレート」の中央カラム終了部分を探して、リスト3.1に示している赤色部分を削除し、青色部分を追加してください。

なおカラムレイアウトの変更方法についてはここでは割愛しています。「FC2 ブログテンプレート」の本文記事をご覧ください。

　　　　：
<!-- コメント編集 -->
</div><!-- /blog -->
 
<!-- for one column
<div id="footer-one">
<script type="text/javascript">
<!--
function selectUrl(sel){
    if(sel.options[sel.selectedIndex].value){
        location.href = sel.options[sel.selectedIndex].value;
    }
}
//-->
</script>
 
<div id="monthlylist">
<form style="display:inline;">
<select name="select" onChange="selectUrl(this.form.select)" style="margin-bottom:6px;">
<option value="">選択してください</option>
<!--archive-->
<option value="<%archive_link>"><%archive_year>年<%archive_month>月 [<%archive_count>]</option>
<!--/archive-->
</select> 
</form>
 
<!--date_area-->
<script type="text/javascript">
<!--
var data ="<%now_year><%now_month>";
var year = data.substring(0,4);
var month = data.substring(4,6);
var nodes = document.getElementById('monthlylist').getElementsByTagName("option");
for (var i = 0; i < nodes.length; i++) {
    var selectYear = nodes[i].innerHTML.substring(0,4);
    var selectMonth = nodes[i].innerHTML.substring(5,7);
    if(year == selectYear && month == selectMonth){
        nodes[i].selected = true;
    }
}
//-->
</script>
<!--/date_area-->
<a href="http://www.koikikukan.com/"><img src="http://blog42.fc2.com/k/koikikukan/file/banner.gif" alt="小粋空間" width="128" height="22" /></a><br />
</div>
<span id="ad1"><script type="text/javascript">var j = '22';</script><script type="text/javascript" src="http://blog42.fc2.com/i/image/janre.js"></script></span><noscript><p>FC2Ad</p></noscript> | <span id="ad2"><strong><a href="http://blog.fc2.com/" title="FC2ならブログも簡単・大容量！">FC2ブログ</a></strong> <strong><a href="http://shoukaiyotei.com/" title="紹介予定派遣">紹介予定派遣</a></strong></span><br />
<p style="margin:10px 0 0 0">Copyright © 200x xxxxx. All Rights Reserved.</p>
</div>
/for one column -->
 
</div><!-- /content -->
<!-- 中央カラム終了 -->
　　　　：

リスト3.1　公開テンプレート・1カラムレイアウト用のプルダウンメニュー

以前当サイトで紹介させて頂いた、「Movable Typeでつくる!最強のブログサイト―Movable Type3.2対応」の 3.3 版が出版されました。

著書の南大沢ブロードバンド研究所さんのサイトでも紹介記事がアップされています。

Movable Type 3.3でつくる!最強のブログサイト 小川 晃夫 南大沢ブロードバンド研究会 ソーテック社 2006-10 売り上げランキング : 9662 Amazonで詳しく見る by G-Tools

以下、章単位に内容の紹介です。

Part1　ブログとは何か？

ブログの基礎知識と種類について。最近登場したばかりの Vox についても紹介されています。

Part2　Movable Type を使ってみよう

誌面の 1/4 程度がこの Part2 で、Movable Type のインストールから基本的な操作方法と管理画面の利用方法について紹介されています。管理画面は「投稿」「コミュニティ」「環境設定」の項目ほぼ全てと、Typekey についての解説が記載されています。

Part3　Movable Type の仕組みを理解しよう

Movable Type の仕組みと、各テンプレートの説明と代表的なタグの説明、そして簡単なカスタマイズが約30ページで解説されています。またスタイルシートの利用方法についても紹介されています。

Part4　ブログのカスタマイズ-基本編

本書のメインとなる部分で、Part5 と併せて誌面のほぼ半分がカスタマイズ記事で占められています。
内容は、StyleCatcher によるデザイン変更方法と仕組み、また 3 カラムへの変更方法とデザインの変更、そして基本的なカスタマイズ（ナビゲーションメニュー・カレンダー・最近のコメント・最近のトラックバック・リンクバナー等）。

Part5　ブログのカスタマイズ-応用編

さらに読み応えのある内容で、検索機能（Google 検索・e-Words 表示・Google Search プラグイン）、静止画・動画配信、プラグイン利用によるフォトアルバム、アフィリエイトの設置、携帯による閲覧と投稿、ポッドキャスティング、Web2.0 系サービス - 3.3 から導入された「Widget Manager」によるタグクラウド／RSSリスティング／livedoorお天気プラグイン／「テクノラティ」検索モジュール、エントリーへの Google Map 表示、U2B Player（YouTubeプレーヤー）の設置等 - についての解説。
個人的には「Seesaa ブログを利用したRSSプレイヤー」が目からウロコでした。

Part6　Movable Type をもっと活用しよう

TinyMCE をハックした管理画面のカスタマイズ、3.3 から導入されたログ・フィードの利用、XML-RPCインタフェースの利用（BlogWriteクライアントツール）、バックアップとアップグレードが記されています。

今回は当サイトとの連携は特にありませんが、コラム欄にて紹介くださってます。この場をお借りしてお礼申し上げます。ありがとうございました。

ということで、Movable Type 3.3 の基本的な利用方法からしっかりしたカスタマイズまで、きめ細かく網羅された1冊と言えるでしょう。かゆい所に手が届く Tips 的な内容もかなり豊富です。
ちなみに 3.2 版の前書を購読し、その内容にしたがってサイトを構築されてこのサイトに訪問された方もかなりいらっしゃいました。

ご興味のある方は是非お求めくださいますよう、よろしくお願い申し上げます。

公開中の Seesaa ブログテンプレートついて、「フッタにセンタリング表示している Seesaa ブログのバナーを Firefox 等の Mozilla 系ブラウザで閲覧するとセンタリングされない」という問題がみつかったため、修正致しました。

また Seesaa ブログで提供されているテンプレートについても同様の事象が発生しているようです（サンプル表示で確認した限り）ので、原因と対処方法を紹介します。

１．センタリングされない原因

公開テンプレートに設定されたフッタ（青色）はリスト1.1のようになっています。他のテンプレートも同様の設定のものが多いようです。

<div id="footer">
<% content_footer -%>
</div>

リスト1.1　Seesaa ブログのフッタ（テンプレート）

またそれに対応する CSS はリスト1.2のようになっています。

#footer {
    text-align: center;
}

リスト1.2　フッタのCSS

これで正常にセンタリングされるように思われますが、リスト1のテンプレートから再構築によって生成された HTML は、リスト1.3の青色の内容に変換されます。

<div id="footer">
<div class="powered">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="http://seesaa.jp"><img src="http://blog.seesaa.jp/img/seesaablog.gif" width="138" height="22" border="0" alt="Powered by Seesaa" /></a></td>
</tr>
<tr>
<td><div style="background-color:#9C9C9C;text-align:center;font-size:10px;padding:3px;margin:0px;"><a href="http://seesaa.jp" style="color:#FFF;">Seesaa</a><a href="http://blog.seesaa.jp" style="color:#FFF;">ブログ</a></div></td>
</tr>
</table>
</div>
</div>

リスト1.3　Seesaa ブログのフッタ（HTMLに展開後）

ご覧の通り、Seesaa ブログのバナーが table 要素（つまりブロックレベル要素）で括られます。

table 要素をセンタリングするためには、昨日エントリーした「CSSでブロックレベル要素をセンタリングする」の設定が必要ですが、リスト1.2 の設定しか行われていないとセンタリングされないという不具合が発生します。

公開テンプレートについては「バナーはインライン要素で表示」と思い込んでいたこと、また Firefox / Opera での表示の確認がきちんとできておりませんでした（IE6ではテンプレートは「後方互換モード」と認識されるため本問題が顕在化しません）。申し訳ございません。

２．対処方法

スタイルシートにリスト2.1のセレクタを追加してください

.powered {
    margin-left: auto;
    margin-right: auto;
    width:138px;
}

リスト2.1　スタイルシートに追加するセレクタ

当サイトの Seesaa ブログテンプレートをお使いの場合は、下記に該当する方が対象です。ご迷惑をおかけして申し訳ございませんがよろしくお願い致します。

• 2006.10.21 以前にテンプレートを利用
• テンプレートのフッタバナー部分を修正していない

他のテンプレートをご利用の方も同様の修正を行いますが、

• リスト1.1 のマークアップになっていること
• リスト1.2 の CSS が設定されていること

が前提です。該当しない場合は「CSSでブロックレベル要素をセンタリングする」を参考にして修正してみてください。

インライン要素をセンタリングする場合は、その要素のCSSで

text-align: center;

という text-align プロパティを与えれば良いのですが、div や table 等のブロックレベル要素をセンタリングする場合、例えば下記のようにマークアップされた ブロックレベル要素、

<div id="test">[ブロックレベル要素]</div>

をセンタリングする場合は、CSSに下記のような設定を行います。

#test {
    margin-left: auto;
    margin-right: auto;
    width: [ブロックレベル要素の幅];
}

ブロックレベル要素のセンタリングは上記が正しい方法で、Firefox や Opera、また IE6 の「標準準拠モード」や最近リリースされた IE7 では上記の設定で正常に表示されますが、IE6 の「後方互換モード」ではブラウザにバグがあるため、センタリングされません。*1

したがって、IE6 の「後方互換モード」でも同じようにセンタリングさせるためには、前述の div 要素をさらに div 要素でラップし、

<div id="wrap">
<div id="test">[ブロックレベル要素]</div>
</div>

追加した div 要素のスタイルに text-align プロパティを追加します。これは IE6 のバグを利用した手法です。*2

#wrap {
    text-align: center;
}
#test {
    margin-left: auto;
    margin-right: auto;
    width: [ブロックレベル要素の幅];
}

これでいずれのブラウザでもセンタリングされるようになります。
なお #wrap に設定した text-align プロパティは #test に対しても有効になるため、例えば内部のインライン要素を左寄せにする場合は、#test あるいはインライン要素に対して text-align: left を追加してください。

逆に、IE6 の後方互換モードでしかHTMLの表示確認をしていない場合、誤って

#test {
    text-align: center;
}

というマークアップをしていると、Firefox 等ではセンタリングされませんのでご注意ください。

*1：「標準準拠モード」と「後方互換モード」の詳細については「標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示する」が参考になれば幸いです。

*2：参考 - Web標準普及プロジェクト：ブロックレベル要素をセンタリングする方法

タイトルバナー下にナビゲーションバーを設置している場合、その左右に別の部品を並べて配置したい時のテクニックです。

ここでは、以前紹介した「ナビゲーションバー・シンプルタイプ」に「サイドバーの折りたたみ」の折りたたみマークを合体させ、ナビゲーションバーの左右に折りたたみマークを配置するカスタマイズを紹介します。

下記にサンプルを用意しました。

ナビゲーションバーにサイドバーの折りたたみマークを並べて表示

以下、基本構造および公開テンプレートによるサンプルで説明します。仕組みはタイトルの通り、3カラムレイアウトのCSSをナビゲーションバー部分に適用しています。
ナビゲーションバーの他、横型カレンダーとの組み合わせも（多分）可能です。

１．基本構造

１．１ HTML

HTMLマークアップは次のようになります。ul - li 要素は div 要素でも問題ありません。下から2行目の br 要素（の class 属性）は回り込み解除のため必須です。

<div id="navi">
<ul id="left"><li>[左に表示する部品]</li></ul>
<ul id="navbar"><li>[中央に表示する部品]</li></ul>
<ul id="right"><li>[右に表示する部品]</li></ul>
<br class="clear" />
</div>

リスト1.1　基本的なHTML

１．２ スタイルシート

下記の通りです。基本的な構造は3カラム固定レイアウトと同じです。

#navi {
    padding: [部品全体のパディング];
}
#navi ul {
    margin: 0;
    padding: 0;
    float:left;
}
#navi ul,
#navi ul li {
    display: inline;
}
#navbar {
    width: [中央に配置する部品の幅];
    text-align: center;
}
#left {
    width: [左に配置する部品の幅];
}
#right {
    width: [右に配置する部品の幅];
}
.clear {
    clear: both;
} 

リスト1.2　基本的なCSS

２．ナビゲーションバーとサイドバーの折りたたみマークを合体

サイドバーの折りたたみ用タグ

<div id="navi">
<ul><li id="leftmark"><a href="javascript:void(0);" onclick="changeSidebar('left');">&#65308;</a></li></ul>
<ul><li id="rightmark"><a href="javascript:void(0);" onclick="changeSidebar('right');">&#65310;</a></li></ul>
</div>

リスト2.1　サイドバーの折りたたみ用タグ

と、ナビゲーションバーのタグ

<div id="navbar">
<a href="<$MTBlogURL$>" title="Home">Home</a> |
<a href="<$MTBlogURL$>about.html" title="About">About</a> |
<a href="<$MTBlogURL$>profile.html" title="Profile">Profile</a> |
<a href="<$MTBlogURL$>link.html" title="Link">Link</a> |
<a href="<$MTBlogURL$>search.html" title="Search">Search</a> |
<a href="mailto:hogehoge@hogehoge.com" title="Mail">Mail</a>
</div>

リスト2.2　ナビゲーションバーのタグ

を合体すると下記のようになります。ナビゲーションバー部分は青で示しています。

<div id="navi">
<ul><li id="leftmark"><a href="javascript:void(0);" onclick="changeSidebar('left');">&#65308;</a></li></ul>
<div id="navbar">
<a href="<$MTBlogURL$>" title="Home">Home</a> |
<a href="<$MTBlogURL$>about.html" title="About">About</a> |
<a href="<$MTBlogURL$>profile.html" title="Profile">Profile</a> |
<a href="<$MTBlogURL$>link.html" title="Link">Link</a> |
<a href="<$MTBlogURL$>search.html" title="Search">Search</a> |
<a href="mailto:hogehoge@hogehoge.com" title="Mail">Mail</a>
</div>
<ul><li id="rightmark"><a href="javascript:void(0);" onclick="changeSidebar('right');">&#65310;</a></li></ul>
</div>

リスト2.3　同時に表示させる場合のタグ

これだけでは横1列に並んで表示されないため、１項と同じ構造にするため、赤色部分を追加します。

<div id="navi">
<ul id="left"><li id="leftmark"><a href="javascript:void(0);" onclick="changeSidebar('left');">&#65308;</a></li></ul>
<ul id="navbar"><li>
<a href="<$MTBlogURL$>" title="Home">Home</a> |
<a href="<$MTBlogURL$>about.html" title="About">About</a> |
<a href="<$MTBlogURL$>profile.html" title="Profile">Profile</a> |
<a href="<$MTBlogURL$>link.html" title="Link">Link</a> |
<a href="<$MTBlogURL$>search.html" title="Search">Search</a> |
<a href="mailto:hogehoge@hogehoge.com" title="Mail">Mail</a>
</li></ul>
<ul id="right"><li id="rightmark"><a href="javascript:void(0);" onclick="changeSidebar('right');">&#65310;</a></li></ul>
<br class="clear" />
</div>

リスト2.4　同時に表示させる場合のタグを修正

これに下記のCSSをスタイルシートに追加します。折りたたみマークは text-align プロパティで一旦両端に配置してから padding プロパティで位置を調整しています。

#navi {
    border-bottom: 1px solid #666699;
    padding: 3px 0;
    font-size: 12px;
}
#navi ul {
    margin: 0;
    padding: 0;
    float:left;
}
#navi ul,
#navi ul li {
    display: inline;
}
#navbar {
    width: 600px;
    _width: 598px;
    text-align: center;
}
#left {
    width: 125px;
    text-align: left;
}
#left li {
    padding-left: 18px;
}
#right {
    width: 125px;
    text-align: right;
}
#right li {
    padding-right: 18px;
}

リスト2.5　同時に表示させる場合のCSS

以上です。やっつけで作ったものですので誤りがありましたらお許しを。

以前エントリーした「サーバ不具合について」で「503エラーが多発しています」とお知らせした、その後の状況です。

長期的な 503 は発生しなくなりましたが、現在も間欠的に発生している模様です。ただし異常なプロセスは発生していないので、サーバを複数ユーザで共有しているというサーバの性能の問題、つまりサーバ移転という選択肢以外に解決できない状況になっているかもしれません。

それとは別に、mt4i からのコメントスパムが発覚し（関連記事）、mt4i のプログラム攻撃の懸念と CGI プログラム削減の意味も含め、現在 mt4i の使用は中止しています。

2006.12.17 追記：mt4i は 2.1（または 2.2β1）にバージョンアップして、スパム対策が施されています。

Movable Type のテンプレート・タグを一覧にしました。アルファベット順と機能別の切り替え表示が可能です。MTタグのリンクは Movable Type 3.3 マニュアルのテンプレート・タグ リファレンスの各タグ名に直接ジャンプするようにしています。*1 *2

ということでよろしければご利用ください。できればバージョンアップにも追従していきたいと思います。

*1：マニュアルの内容を折りたたみで表示する作戦も考えましたが、「転載」と解釈されるのは本意ではありませんのでリンクにとどめています（タグ名の掲載はいいのか？という意見もありますが）。

*2：簡単なプログラムを作って、lib/MT/Template/ContextHandlers.pm（全てのMTタグの処理が記述されているファイル） とマニュアルの差分をチェックしたところ下記のタグがみつかりましたが、カッコ内の理由で上記リストには含めておりません。

• MTIfDynamicComments（Context.pm の処理コメントに "this is bogus" と記載されています）
• MTIfDynamicCommentsStaticPage（同上）
• MTTemplateNote（MTIgnoreと同じ目的の変数タグですが、3.3 で非推奨となっています（関連記事））

3.33-ja が出回っている最中に何ですが、「【重要】 Movable Type 新バージョンとパッチの提供について」を受けてアップグレードしました（といってもすでに1週間ほど経ちますが）。

3.2-ja-2 から 3.21-ja へのアップグレード方法は次の通りです。

• 先の記事にリンクされている「Movable Type 3.2用パッチファイル（MT3.21-ja-patch.zip または MT3.21-ja-patch.tar.gz）」を入手
• パッチファイルを解凍
• 解凍し、MT3.21-ja-patch フォルダの中にあるファイルを、サーバの同じディレクトリにアップロード（上書き）

上書きするファイルは下記です。

• lib/MT.pm
• lib/MT/App.pm
• lib/MT/Sanitize.pm
• lib/MT/App/CMS.pm
• php/mt.php
• php/lib/sanitize_lib.php

パッチを適用するとバージョンが 3.21-ja と表示されます。また掲載は避けますが、新旧のファイルを比較したところ10行程度の修正が行われていました。

3.33-ja へのアップグレードについては、エントリー・タグ周辺の変更をどうするか考えてからトライする予定です。

BlogPeople やドリコム RSS がサービスとして提供しているリンクリスト。ご自身のページに直接HTMLでリンク集を作成するより、表示件数のカスタマイズやサイトの更新状況がわかる等、大変便利なサービスなので利用されている方はかなり多いと思います。

しかしながら、リンクリストはサーバに一旦アクセスしてから表示される仕組みになっているため、少なからずタイムラグが発生します。
このタイムラグはHTMLページの表示に大きく影響します。その理由は次の通りです。

例えばIEでサイトを閲覧する場合、そのサイトのページはHTMLソースの先頭から記述された順番に表示されるようになっています *1。つまり、ページの最初や途中にこのリンクリストを表示するタグが記述されている場合、サーバの応答が返ってくるまでそれ以降のHTMLソースの内容が表示されないという問題があります。
サーバからの応答がある場合はまだ良いのですが、サーバダウン等といった不測の事態が発生すると、それ以降のページがしばらく表示されなくなる可能性もあり、閲覧者にとってはかなりのストレスになります。

したがって、リンクリストを表示する位置についてはページの（少なくとも本文より）後方やリンクリスト専用のページに配置したり、あるいは「中継君（関連記事）」を利用されているのではないでしょうか。

前置きが長くなりましたが、このエントリーではごく簡単な JavaScript を用いてリンクリスト表示のタイムラグを解消する方法をご紹介します。*2
仕組みを説明しますと、リンクリストのタグはとりあえずページの一番最後に埋め込み、それを JavaScript を使って別の位置に再表示するという作戦です。これだけではリストが2ヶ所に表示されてしまうため、ページの最後に埋め込んだ方のリストはCSSで非表示にします。

下記にサンプル（カスタマイズ前・後）がありますので、IEでページを表示した後、ブラウザをリロードして表示の違いを比べてみてください（ページサイズが小さいため、カスタマイズ前のものも比較的スムーズに表示されます。ご容赦ください）。

• サンプル１：リンクリストタグをHTMLの前方に記述・表示
• サンプル２：リンクリストタグを後方に記述して前方に表示

このスクリプトを用いることで、

• ページが速やかに表示される
• サーバ側のリンクリスト更新にリアルタイムに対応
• リンクリストのアクセス数がPV（ページビュー）単位にカウントされる

といったメリットを享受することができます。
ただし、リスト配布元のサーバがダウンしている場合等はリンクリストは表示されませんので、必ず表示したいということであれば中継君の利用をお勧めします。

またリストを非表示にすることについての妥当性についてはここでは言及しておりませんので、ご利用の判断はご自身で行ってください。なお当サイトでは以前（数ヶ月前）よりこの方法で表示しています。

以下、カスタマイズ方法です。

１．リンクリスト表示用タグの追加

次のような空要素（ここでは div）を、リンクリストを表示したい位置へ設定します。

<div id="blogpeople"></div>

ここで重要なのは、id="xxx" という id 属性の記述です。ここでは属性値を "blogpeople" としておきます。

２．リンクリスト表示のスクリプト設定

div タグで括ったリンクリスト用のタグを、 </body> の直前に記述します（青色 *3）。ここでは BlogPeople のリンクリストを表示する例で示しています。

<div id="linklist"><script type="text/javascript" src="http://www.blogpeople.net/display/usr/0f0d42505b5dxxxx.js"></script></div>
</body>

ここでも外側の div 要素に任意の id 属性値を記述します。ここでは "linklist" とします。

３．表示用スクリプト設定

２項で設定したタグと </body> の間に、１項で設定したタグの位置に表示するためのスクリプトを記述します（青色）。

<div id="linklist"><script type="text/javascript" src="http://www.blogpeople.net/display/usr/0f0d42505b5dxxxx.js"></script></div>
<script type="text/javascript">
if(document.getElementById('blogpeople')){
    document.getElementById('blogpeople').innerHTML = document.getElementById('linklist').innerHTML;
}
</script>
</body>

赤色の部分が１項および２項で設定したid 属性値になります。１項・２項の id 属性値は任意ですが、設定した文字はこのサンプルのようにそれぞれ対応するよう反映させてください（id 属性値を変更する前にこのままお使いになることをお勧めします）。

４．CSS設定

スタイルシートに下記を追加します。

#linklist {
    display: none;
}

スタイルシートが編集できないブログサービスであればHTMLページの <head>～</head> の間に

<style type="text/css">
#linklist {
    display: none;
}
</style>

を追加すれば良いでしょう。

５．カスタマイズ

５．１ 他の情報を埋め込む場合

「私を登録」等のリンクやバナー等を表示する場合は、それらを２項のタグにまとめて記述しておくと良いでしょう。１項のタグに記述することもできますが、その場合は、元の div 要素の中ではなく、

<div id="blogpeople"></div>
[ここに記述]

となります。スタイルを与える場合はさらに div 要素等で括ってください。

５．２ 複数のリンクリストを表示する場合

このカスタマイズは設定を加えることで複数のリンクリストを表示することができます。
例えばドリコム RSS のリンクリストをさらに追加する場合、１項の id 属性名を変えたタグ

<div id="drecom"></div>

を作り、２項・３項の表示用スクリプトに下記の青色部分を追加します。id 属性名にご注意ください。

<div id="linklist"><script type="text/javascript" src="http://www.blogpeople.net/display/usr/0f0d42505b5dxxxx.js"></script></div>
<div id="linklist2"><script type="text/javascript" src="http://list.blog.rss.drecom.jp/yujiro/" charset="UTF-8"></script></div>
<script type="text/javascript">
if(document.getElementById('blogpeople')){
    document.getElementById('blogpeople').innerHTML = document.getElementById('linklist').innerHTML;
}
if(document.getElementById('drecom')){
    document.getElementById('drecom').innerHTML = document.getElementById('linklist2').innerHTML;
}
</script>
</body>

CSS は４項と同じもの（IDセレクタは #linklist2）を作ってください。3つ以上のリンクリストを表示する場合も同様の手順で追加します。

注：１項・２項の id 属性名はページ内で一意でなければいけません。

５．３ ローディング状態を表示

２項の設定に任意のテキスト文字、例えば、

<div id="blogpeople">Now loading...</div>

としておけば、リンクリスト表示までの間はローディング状態を表示することができます。ただしサーバからの応答がない場合は表示がずっと残ってしまいますのでご注意ください。

*1：全てのブラウザが同じ動作であるかについては未確認です。実際、Firefox／Opera ではストレスなく表示されます。
*2：IE以外での効果は未確認です。
*3：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

2008.11.01 Movable Type 4 向けのインストール手順「Movable Type（MT）のインストール」を公開しました。

Movable Type を始めるにあたっての最初の関門はインストール作業ですが、3.3 から簡単にインストールできる仕組みが導入されました。

これまでは、インストール前に mt-config.cgi-original を mt-config.cgi にリネームし、mt-config.cgi をご自身の環境に合わせて任意のエディタで編集し、アップロード。そしてブラウザから mt.cgi にアクセスという手順を踏んでいましたが、3.3 では公式サイトのマニュアルに記載されていない、対話式のウィザード機能（mt-wizard.cgi）が提供されており、これを用いれば前述の手順が不要になります。

ということで、このエントリーでは対話式ウィザードを用いた Movable Type の新規インストール手順をご紹介します。初心者の方でもトライできるよう、多少詳しく解説してみました。
注：アップグレードの場合、mt-wizard.cgi は利用できません。

記事中のスクリーンショットをクリックすると、画面内に実物大のスクリーンショットが表示されます。やや大きいサイズもあるのでブラウザをひろげてご覧ください。元の画面に戻るには、表示された画像右下にある「Close」をクリックします。

なおパッケージのダウンロードおよびについては省略しています。ダウンロードしたパッケージアーカイブを任意のフォルダで解凍した状態から説明を開始します。レンタルサーバへのファイル転送についてはFFFTPを用いて解説していますが、作業的にはどのファイル転送ツールでもたいして変わりはないと思います。

１．ファイルのアップロード

２．実行ファイルのパーミッション変更

３．データベース用フォルダの作成（SQLite/BerkeleyDB の場合のみ）

４．ウィザードによるインストールの前準備

ここではインストールを実施するために必要な構成ファイル（mt-config.cgi）の作成に入ります。バージョン3.2まではインストールのためのいわゆる「設定ファイル（mt-config.cgi）」を手作業で編集していましたが、3.3 より以降の手順で自動的にファイルを作成してくれます。

４．１ インストール条件の確認

４．２ データベースの選択と設定

４．３ メールサーバの選択と設定

４．４ 構成ファイルの修正（必要があれば）

５．インストール実施

６．管理画面へのログイン

mt-wizard.cgiを用いたインストールについては公式サイトでも公開されています。

Six Apart - 技術情報提供ブログ：mt-wizard.cgiでMovable Typeを簡単にインストール

ウィザードの改善要望等は随時受け付けられているようですので、Movable Type フィードバックフォームに送信されると良いでしょう。

Movable Type のコメントに対し、降順（大きい番号→小さい番号の順に並べる）に番号を付与するプラグインです。左スクリーンショットのコメント投稿者情報の一番左に表示されている番号がそうです。

エントリー・アーカイブで表示するコメント対して番号を付与するタグは MTCommentOrderNumber タグが用意されていますが、このタグを用いて、管理メニューの

[設定]-[表示に関する初期設定]

で、コメントの表示順序を「昇順」「降順」のいずれを選んでも、コメントが表示された順に

1、2、3、…

と番号が割り振られます。

降順・昇順に関わらず、一番古いコメントから「1、2、3、…」と割り振られるのが自然に思われますが、コメントを降順（新しいもの順）に並べて MTCommentOrderNumber タグを用いた場合、左のスクリーンショットのように、一番新しいコメントに「1」が付与されることになってしまいます。

このプラグインはコメント表示の降順・昇順に関わらず

…、3、2、1

と、降順に番号を割り振ります。
コメントを昇順に表示する場合は MTCommentOrderNumber タグ、降順に表示する場合は本プラグインを用いるとよいでしょう。いずれ トラックバック番号のMTタグも作ってみたいと思います。

以下、カスタマイズ方法です。

１．プラグインのダウンロード

下記のリンクよりプラグインアーカイブをダウンロードしてください。

CommentOrderNumberByDescend.zip
CommentOrderNumberByDescend.lzh

２．プラグインのアップロード

プラグインアーカイブを解凍して、中にある CommentOrderNumberByDescend.pl を plugins ディレクトリにアップロードしてください。
管理画面の

メイン・メニュー > システム・メニュー > プラグイン

で使用中のプラグイン一覧が表示されますので、その中に「CommentOrderNumberByDescend バージョンx.xx」と表示されていればOKです。

３．タグ

このプラグインが提供するMTタグは

<$MTCommentOrderNumberByDescend$>

です。
下記にエントリー・アーカイブ／コメント・プレビューで用いる場合のサンプルを掲載します。

デフォルトテンプレート

<p class="comment-footer">
   [<$MTCommentOrderNumberByDescend$>] 投稿者:
   <$MTCommentAuthorLink default_name="匿名"$> <$MTCommentAuthorIdentity$> |
   <a href="#comment-<$MTCommentID$>"><$MTCommentDate$></a>
</p>

公開テンプレート

<!-- コメント投稿者情報 -->
<p class="comment-footer">
   [<$MTCommentOrderNumberByDescend$>] Posted by:
   <$MTCommentAuthorLink default_name="Anonymous"$> <$MTCommentAuthorIdentity$> |
   <$MTCommentDate$>
</p>

"[]"で括っているのは個人的趣味ですので、ご自由にアレンジしてください。

４．属性

MTCommentOrderNumberByDescend は下記の属性を設定できます。

lastn="[MTComments の lastn属性値]"

MTComments タグに lastn 属性を付与している場合、必ず MTComments の lastn 属性値と同じ値の lastn 属性を付与してください。また MTComments タグに lastn 属性を付与していない場合はこの属性を設定しないでください。

start_max="1|0"

lastn 属性を付与した場合、start_max 属性を併用することで、MTCommentOrderNumberByDescend で表示する初期値を「コメント総数」あるいは「lastn値」のいずれかを選択することができます。"1" を設定するとコメント総数、"0" を指定すると「lastn値」になります。デフォルトは「lastn値」です。

例えばあるエントリーに対するコメントが10件あり、lastn="5" と設定している状態で、start_max="1" とすれば、MTCommentOrderNumberByDescend は "10、9、8、7、6" となり、start_max="0" または設定しなければ、MTCommentOrderNumberByDescend は "5、4、3、2、1" となります。

５．制限事項

プラグイン処理の都合上、複数エントリー・アーカイブで MTCommentOrderNumberByDescend を利用し、かつ lastn 属性値に "1" を設定している場合、正常な表示の保証はできません。

2006.10.28 追記
４項および５項を追加しました。

ブログツール「NHK時計」

昭和43年ごろから平成3年ごろまで使われており、午前7時、正午、午後7時などの正時少し前に、テレビ画面に登場していました。

現在も博物館に展示されているそうで、名称は「テレビ画面時計」。上記サイトから申し込むことで表示するためのスクリプトをゲットできますので、サイトのお好きな位置に貼り付けるだけです。
サイズは横幅 150px または 210px の2種類が用意されています。210px の方が鮮明です。

時報が鳴るとさらにいいかも。

Seesaa ブログの各エントリー下に表示されているカテゴリーを非表示にするカスタマイズです。

具体的には、

posted by yujiro at 00:00| Comment(0) | TrackBack(0) | 日記

という表示を

posted by yujiro at 00:00| Comment(0) | TrackBack(0)

と、カテゴリーを非表示にします。

カスタマイズ方法は、下記のスクリプト（青色）をHTMLの body の終了タグの直前におくだけです。

<script type="text/javascript">
var elements = document.getElementsByTagName('div');
for(i = 0; i < elements.length; i++){
  if(elements[i].getAttribute('className') == 'posted' ||
    elements[i].getAttribute('class') == 'posted') {
    var links = elements[i].getElementsByTagName('a');
    for(j = 0; j < links.length; j++){
      if(j > 2){
        links[j].style.display = 'none';
      }
    }
    var tmp = elements[i].innerHTML;
    elements[i].innerHTML = tmp.substring(0, tmp.lastIndexOf("|") - 1);
  }
}
</script>
</body>

これで保存・再構築し、ブラウザをリロードすればカテゴリーが非表示になると思います。

Movable Type ではカテゴリー表示用のタグを投稿者情報に設定しなければ簡単に非表示にできますが、いくつかのブログサービス（あるいはブログツール）では設定が簡単な代わりに表示内容が固定表示されるケースが少なくありません。
こういう場合は JavaScript で制御するのがいいでしょう。

昨日よりサイトの CSS を変更しました。

「YST（Yahoo! Search Technology）との戦い：その2」から Yahoo 検索からのアクセスが若干改善されたかのように思われましたが、相変わらず 4% 前後をうろうろしている状態です。

下は昨日の Google Analytics データです。

• 57.86%：google
• 9.12%：(direct)
• 3.99%：yahoo
• 1.99%：msn
• 1.65%：yujiro.dyndns.org
• 25.39%：(other)

ということで根本的な解消に至らないため、新たな策としてCSS変更を行いました。その理由は次の通りです。

変更前のHTML

変更前の3カラムリキッドレイアウトのHTMLページは、左のスクリーンショットで示す通り、「左カラム→右カラム→中央カラム」の順にレンダリング（描画）されます。つまり、HTMLマークアップ上、本文記事が一番下になってしまっています。

で、SEO関係の書籍によると、「YST はキーワードが body 要素から近いところにあった方が良い」ということが書かれてまして、今までのマークアップではサイドバーに流し込まれたリンク類の情報が優先されることになってしまい、SEO的に良くない構造ということになります。

今回の変更にあたっては固定レイアウトも選択肢にいれていたのですが、先日の「ウェブサイトの横幅について」をエントリーした後、

• 固定レイアウトは、ポータルサイトのトップページ等でレイアウトを崩したくない場合によく使われている
• 固定レイアウトは、SVGA を考慮してやや狭い幅にしているものが多い
• 大きなディスプレイを使っていてもブラウザの幅とは無関係

という傾向や見解もあることが分かり、リキッドレイアウトのまま中央カラムの情報をHTMLの先頭に移動してみることにしました。

変更後のHTML

参考にさせて頂いたCSSは、Strictly CSS：The only CSS layout you need(?) のひとつで、ネガティブマージンを利用したリキッドタイプの3カラムです。見た目はほぼ変わりませんが、HTMLマークアップは中央カラムが先頭にあり、ページはスクリーンショットのように「中央カラム→左カラム→右カラム」の順にレンダリングされます。
エレガントと言うにはかなり遠いCSSになってしまっていますが、HTMLの配置順序を優先するために見切り発車しています。

Windows2000/XP+IE6.0/Firefox1.5/Opera9.0 と browsershots.org を利用して、Max OS X+Safari 2.0 で大きく崩れていないところまでは確認済ですが、場合によっては固定レイアウトに変更する可能性もあります。

なお、ファイルサイズの大きなページでは、IEでややねばっこいスクロールになってしまうようです。また、中央カラム右寄りのテキストのマウスコピーで文字が反転しない事象が発生しています（配布元のサンプルは発生しないので継続調査）。
Mozilla系ブラウザは快適です。

2006年10月8日で Movable Type が5周年を迎えたそうです。まずはおめでとうございます。

【5周年記念】 あなたの「Movable Typeストーリー」を共有してください

本日10月8日は、Movable Typeが世に出てちょうど5年。記念すべき区切りの日になります?略?よちよち歩きのブログツールMovable Typeが、「ブログ製品のデファクトスタンダード」と呼んでいただけるまでに成長したのは、ひとえに使ってくださっているユーザーの方々の、多大なるご支援のおかげです。

そして

Movable Typeとの出会い、そしてMovable Typeが変えたものについて、ぜひご自身のブログを通じて、みなさんとシェアしていただき、トラックバックを送り合っていただきながら、Movable Typeの誕生祝いと、Movable Typeのさらなる成長祈願をしていただければと思います。
ぜひ「あなたとMovable Type」「Movable Typeが変えたもの」というテーマで、あなたの「Movable Typeストーリー」をシェアしてください！

ということで、タイトルのテーマに沿って少しだけ記したいと思います。

私がブログを始めたのは2004年5月。友人が「Movable Type」というツールを使ったブログを始めたのがきっかけでした。本文だけが掲載された、いわゆる「Web日記」のページレイアウトに慣れていたその頃の私の「ブログ」の印象は、「日記の横（サイドバー）になにやらごちゃごちゃと情報が載っているなぁ」というものでした。

ブログを始める前は「ジオシティーズ（現Yahooジオシティーズ）」でホームページを運営していましたが、後半は掲示板を日記代わりに使っていました。結局HTMLマークアップが面倒に感じていたのだろうと思います。ゆえにブログツールへの移行も自然な流れだったのかと。

最初にインストールした Movable Type のバージョンは 3.0D。Windows 自宅サーバで開始したのですが、インストールでいきなりつまづきました。その時みつけた「Windowsで Movable Typeを動かす」のページがなければ、多分 Movable Type は始めていなかったでしょう。
また開始当初、3.0D はリリースされたばかりだったようで、ウェブ上には 2.66 の情報しかなく、問題に突き当たる度に必死で検索したのを覚えています。

実際始めてみると、「トラックバックって何？」「"Syndicate this site"って何？」と分からないことだらけの連続。が、デザインが全てのページに即座に反映されるという画期的な仕組みが面白く、夢中になっていたのも事実です。特に伸び縮みするリキッドタイプのマルチカラムレイアウトは当時の私には衝撃でした。

ただ、気に入ったデザインの3カラムがネット上で見つからず（すいません）、そういう訳で知識が皆無だった CSS にも取り組み、ブログ開始1ヶ月目辺りで「どうせ誰も見ていないから」という軽い気持ちで 3 カラムテンプレートを公開。

ところが、Movable Type のご利益（パーマリンク・RSS・更新Ping）とビギナーズラックでアクセスが徐々に増え始め、やや遅れて書き始めたカスタマイズネタとともに発展していきました。
そして本ブログのメインカテゴリーである筈のダジャレを加えた3本立て＋αで現在に至ってます。

Movable Type を通して変わったことと言えば、端的には「ブログやウェブに関わる時間が大幅に増えた」ことです。そして、緩やかながら人のつながりができたこと、公開したテンプレートやカスタマイズが（多分）数えられないくらい広まったこと、始める前には想像もできなかった、サイトの書籍・雑誌等への掲載等々。これら全てが人生の数少ないサプライズと言えるでしょう。
また、XHTML・JavaScript・CSS・Perl のスキルが多少なりとも向上すると同時に、世の中には凄い人がたくさんいるということを改めて感じる今日この頃です。

ブログを始めてあっという間の2年半。Movable Type のカスタマイズネタはいつまで続くか分かりませんが、それはさておき、Six Apart の皆様、そして Movable Type の今後の益々のご発展をお祈り申し上げます。

「Ajax 月送りカレンダー」の横型版のカスタマイズを紹介します。

このカレンダーは、従来の月送りカレンダー（横型・iframe 利用）と比較して、下記のアドバンテージがあります。

• クロスブラウザで悩まない
• 月送りのリンクの履歴がブラウザの履歴に残らない

「クロスブラウザで悩まない」というのは、これまでの月送り版・横型カレンダーは、iframe の中に表示するカレンダーの垂直位置が IE系と Mozilla 系で微妙に異なったため、CSSハック等で表示位置の微調整を行っていました。今回の Ajax 版では iframe が不要なため、この問題で悩む必要が（多分）なくなります。

以下に簡単なサンプルを作りましたので動作をお試しください。

Ajax 月送りカレンダー（横型）サンプル

仕様

ここで紹介する月送りカレンダー（横型）の主な仕様です。

• Ajax を利用して横型カレンダーを月送りにします。Ajax 化されるのはページ表示時および月送り時のカレンダー取得です
• クッキーを利用して月送り状態を保持します
• カレンダーの取得に失敗した場合、カレンダー表示エリアには何もされません（カスタマイズ可能）

以下、カスタマイズ方法です。テンプレートの指定はありませんので、CSS を変更すればどのテンプレートでもお使いになれます。

１．スクリプトのダウンロード・アップロード

下記のスクリプトをダウンロードします。

• prototype.js（"Download the latest version" のリンクをクリック）
• ajaxCalendar.js
• dayChecker.js（「２．ダウンロード」にある dayChecker.js をクリック）

ダウンロードした ajaxCalendar.js と dayChecker.js はメインページと同じディレクトリにアップロードしてください。
また、prototype.js はダウンロードしたアーカイブを解凍して、dist フォルダの中にある prototype.js をメインページと同じディレクトリにアップロードしてください。

注：ここで配布している ajaxCalendar.js は横型カレンダー専用です。テーブルタイプのカレンダーで配布している ajaxCalendar.js はお使いになれません。

２．カレンダーテンプレート作成

注：ブログの文字コードが UTF-8 以外で運用されている場合は、２．１項のカスタマイズも併せて行ってください。

バージョンが 3.2-ja 以降の場合、管理メニューの「テンプレート」→「アーカイブ」→「テンプレートを新規作成」をクリック。3.1x-ja 以前の場合、管理メニューより「テンプレート」→「アーカイブに関連したテンプレート」で「新しいアーカイブテンプレートを作る」をクリック。
次画面で下記を設定してください。

• テンプレート名：カレンダー（名称は何でもOKです）
• このテンプレートにリンクするファイル：（設定不要）
• テンプレートの内容：下記

<div title="<$MTArchiveDate format="%Y/%m"$>">
<span class="calendarHead">
<MTArchivePrevious>
<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogURL$><MTArchiveDate format="calendar/%Y/%m/%i">');">&#65308;</a>
</MTArchivePrevious>
<$MTArchiveDate format="%B %Y" language="en"$>
<MTArchiveNext>
<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogURL$><MTArchiveDate format="calendar/%Y/%m/%i">');">&#65310;</a>
</MTArchiveNext> |
</span>
<MTCalendar month="this">
<MTCalendarIfEntries><span><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>" target="_top"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries><span><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank><MTElse></span></MTElse></MTCalendarIfBlank>
</MTCalendar>
</div> 

設定が終わったら「保存」をクリックしてください。

なお、アーカイブパス（3.2 以降であれば管理画面の「設定」→「公開」→「アーカイブの設定」）を設定している場合は、上記リストで2ヶ所出現する

<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogURL$><MTArchiveDate format="calendar/%Y/%m/index.html">');">＜</a>

の赤色部分を変更します。
例えば「archives」というパスを付与している場合は、

<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogURL$><MTArchiveDate format="archives/calendar/%Y/%m/index.html">');">＜</a>

とします。

２．１ ブログの文字コードがUTF-8以外の場合

Ajax（XMLHttpRequest）は UTF-8 で動作することを前提としています。他の文字コードでブログを運用している場合、本カスタマイズが正常に動作しない可能性があります。*1

ここではひとつの解決方法として Ogawa::memoranda さんの MT-I18N プラグインを利用する方法を紹介します。つまりブログの文字コードが UTF-8 以外の場合、プラグインを利用してカレンダーアーカイブの文字コードだけ UTF-8 で出力するという作戦です。

まず、MT-I18N Plugin.ja JP をダウンロードして、プラグイン mt-i18n.pl を plugins フォルダにアップロードします。

そして、２項で示したカレンダーテンプレート全体を下記の青色のタグで括ってください。

<MTEncodeText to="utf8">
　　　　　　：
　（カレンダーテンプレート）
　　　　　　：
</MTEncodeText>

本プラグインを利用し、EUC-JP、Shith_JIS で作成した Movable Type のサイトで、カレンダー動作と日本語表示の正常性は確認済です。ただし、.htaccess 等で文字コードを強制的に指定している場合は未確認です。

３．カレンダーテンプレートを月別アーカイブに関連付け

バージョンが 3.2-ja 以降の場合、管理メニューの「設定」→「公開」の「アーカイブ・マッピング」の項目の右側にある「マッピングを新規作成」をクリックして下記の設定を実施してください（バージョン 3.3 以降の場合、右上にある「詳細モードに切り替え」のリンクをクリックすることで「公開」というメニューが表示されます）。

バージョンが3.1x-ja 以前の場合は、管理メニューより「ウェブログの設定」→「アーカイブの設定」で「新しく、テンプレートとアーカイブを関連付ける」より下記の設定を実施してください。

• アーカイブの種類：月別
• テンプレート：カレンダー（←２項で設定した「テンプレート名」です）

「追加」をクリック後、その下の「アーカイブ」欄にある「月別」に、２項で付与した「テンプレート名（ここでは"カレンダー"）」が追加されていればOKです。
次に同じ「アーカイブ」欄の「月別」の「カレンダー」の右側にある「出力フォーマット（3.2-ja 以降）」または「アーカイブ・ファイルのテンプレート（3.1x 以前）」に下記を設定してください。

出力フォーマット（3.2-ja 以降）

calendar/%y/%m/%i

アーカイブ・ファイルのテンプレート（3.1x-ja 以前）

<$MTArchiveDate format="calendar/%Y/%m/index.html"$>

これがカレンダー用のディレクトリおよびファイル名となります。
設定後、ページ下にある「変更を保存」をクリックしてください。

またカレンダーを初めてご利用になる場合は、「アーカイブ種類」欄の「日別アーカイブ」をチェックして保存してください。このチェックがされていないと、再構築で下記のようなエラーが発生します。

日付アーカイブ「Monthlyxxxx」の再構築に失敗しました: テンプレート「カレンダー」の再構築に失敗しました: <MTCalendar>タグでエラーが発生しました: <MTCalendarIfEntries>タグでエラーが発生しました: <MTEntryLink>タグでエラーが発生しました:<$MTEntryLink$>タグを使って、Dailyアーカイブにリンクしようとしましたが、そのアーカイブ・タイプは公開されていません。

４．テンプレート修正

カレンダーを表示させたいテンプレートに下記の設定を行います。

４．１ 外部ファイルのインクルード

<head>～</head> の間に下記を追加します。

<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>ajaxCalendar.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>

４．２ カレンダー表示部分の設定

カレンダーを利用したいテンプレート（メインページ／カテゴリー・アーカイブ／日別アーカイブ／エントリーアーカイブ等）のバナータイトルの下に、下記のカレンダー表示用のタグ（青色部分）を追加してください。
リストは公開テンプレートの場合を例にしています。

<div id="banner">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<div id="banner-description"><$MTBlogDescription$></div>
</div>
 
<div id="calendar"></div>
<script type="text/javascript">
getCalendar("<$MTBlogArchiveURL$>", "<$MTBlogID$>", "<$MTBlogURL$><MTEntries lastn="1" sort_order="descend"><$MTEntryDate format="calendar/%Y/%m/" $></MTEntries>");
</script>

div は空要素ですが、Ajax によってこの部分にカレンダーが表示されます。

また、２項と同様、アーカイブパス（3.2 以降であれば管理画面の「設定」→「公開」→「アーカイブの設定」）を設定している場合は、上記リストの赤色部分を修正します。
例えば archives というアーカイブパスを設定している場合は、下記の青色のように修正てください。

getCalendar("<$MTBlogArchiveURL$>", "<$MTBlogID$>", "<$MTBlogURL$><MTEntries lastn="1" sort_order="descend"><$MTEntryDate format="archives/calendar/%Y/%m/" $></MTEntries>");

５．CSS修正

下記をスタイルシートに追加します。すでにカレンダー関係のスタイル設定が行われている場合は競合を避けるため、古い設定を削除（またはコメントアウト）してください。

#calendar {
    text-align: center;
    padding: 5px 0;
    border-bottom : 1px solid #666699;
    font-family: Verdana, Arial, sans-serif; 
    font-size: 10px; 
    color:#444444; 
}
#calendar a,
#calendar a:link,
#calendar a:visited {
    color: #006699;
}
#calendar a:hover {
    text-decoration: underline;
}
#calendar a:active {
    color: #006699;
}
#calendar .calendarHead { 
    color:#444444; 
    padding-right: 5px;
} 
#calendar .today { 
    border : 1px solid #444444; 
    padding: 0 2px;
} 
#calendar .holiday,
#calendar .holiday a:link,
#calendar .holiday a:visited {
    color: #e50003;
}
#calendar .saturday,
#calendar .saturday a:link,
#calendar .saturday a:visited {
    color: #0000ff;
}
#calendar .tholiday {
    border: 1px solid #444444;
    padding: 0 2px;
    color: #e50003;
}
#calendar .tholiday a:link,
#calendar .tholiday a:visited {
    color: #e50003;
}
#calendar .tsaturday {
    border: 1px solid #444444;
    padding: 0 2px;
    color: #0000ff;
}
#calendar .tsaturday a:link,
#calendar .tsaturday a:visited {
    color: #0000ff;
}

６．ページ表示時にローディング状態を表示する場合

インチキっぽいですが、４．２項で設定した

<div id="calendar"></div>

に、例えば青色の

<div id="calendar">loading ...</div>

を追加することで、ページ描画でカレンダーが表示されるまでローディング状態を示すことができます。img タグを設定すれば画像を表示することも可能です。

月送り時は挿入した文字は表示されません。またカレンダー取得失敗の場合は表示が消えます（これは７項の設定と関連します）。

７．カレンダー取得失敗時にメッセージ等を表示する

Ajax 月送りカレンダーは HTTP 非同期通信でカレンダーファイルを取得・表示しますが、何らかの原因で通信に失敗し、正常に取得できない可能性があります。当サイトで運用していた時も 503 エラーが多発すると取得に失敗するようです。

このカスタマイズではカレンダーの取得に失敗した場合、カレンダー表示エリアに正常に取得できなかったメッセージ

File Not Found

を表示するようにしています。このメッセージは ajaxCalendar.js の下記の青色部分が対応します。

function errorProcess() {
    $('calendar').innerHTML = 'File Not Found';
}

メッセージを変更したい場合はこの青色部分を修正してください。またこの1行を丸ごと削除すれば、HTTP 非同期通信に失敗した場合にカレンダー表示エリアの書き換えが行われなくなりますが、６項の表示がそのまま残りますのでご注意ください。

「失敗してもカレンダーを表示させたい」という場合は、上記メッセージ出力の1行を削除して、６項の「loading ...」というメッセージの代わりに、カレンダータグ（通常のカレンダータグ）を埋め込んでおくという手もあります。通信が成功すれば Ajax 月送りカレンダーに切り替わり、失敗すれば通常のカレンダーがそのまま表示されます。

８．トラブルシューティング

カレンダーが正常に表示されない場合、つまり上記のカスタマイズをそのまま行って、カレンダーが表示される位置に "File Not Found" が表示された場合、以下の問題が考えられます（全てではありませんが思いついたものを挙げておきます）。

• カレンダーアーカイブの再構築ができていない
• カレンダーアーカイブページへのパス設定が誤っている
• ajaxCalendar.js の修正誤り
• テンプレートに設定したカレンダーアーカイブページの拡張子が不一致
• カレンダーアーカイブが UTF-8 で出力されていない

ご質問の前に確認していただきたいのは、

1. ブラウザの[表示]-[ソース]（あるいは「ソースの表示」）で、カレンダーを設定しているページのソースを表示
2. 表示されたソースから下記のタグをみつけ、そこに記述されている URL（赤色）をブラウザに設定して実行

<div id="calendar"></div>
<script type="text/javascript">
getCalendar("http://user-domain/calendar/yyyy/mm/");
</script>

何も表示されない場合（404 Not Found）はカレンダーアーカイブへのパスの設定が誤っているか、アーカイブが生成されていない可能性があります。

逆に、カレンダーが表示されてブラウザにそのカレンダーが表示されない場合は、ブラウザの再起動や、ブラウザのキャッシュ・一時ファイルの削除等を行ってみてください。また UTF-8 以外で運用されている方は、カレンダーが表示されている状態で、ブラウザの[表示]-[エンコード]でカレンダーのページの文字コードが UTF-8 になっていることを確認してください。

クッキーを削除した直後のカレンダーは表示されるけれども、月送りのリンクをクリックすると File Not Found が表示されるという場合は、２項のテンプレートに埋め込んでいるカレンダーアーカイブへのパスが誤っている可能性があります。

９．その他

当サイトで運用している月送りカレンダーの Ajax ライブラリは、prototype.js ではなく、「入門 Ajax」のサポートページで紹介されている jslb_ajax.js を使っていますが、紹介するカスタマイズでは知名度の高い protptype.js を用いています。

2007.03.21 追記
Cookie に保持された場合にカレンダーが表示されなくなる不具合および、複数ブログで利用可能になるよう、ajaxCalendar.js および４．２項のMTタグを修正しました。

*1：文字コードの設定を行わずに Movable Type をインストールした場合の文字コードは UTF-8 です。

Ajax を利用した Movable Type 月送りカレンダーのカスタマイズです。リアルタイムカレンダー（本日の日付の装飾）および土・日・休日表示も盛り込まれています。
MT4をご利用の方は「Ajax 月送りカレンダー（MT4版）」を参照してください。

このカレンダーは、従来の月送りカレンダー（iframe 利用）と比較して、下記のアドバンテージがあります。

• 週数の変化によって高さが可変、つまりカレンダー下に表示されるアイテムとの間隔が常に一定
• 月送りのリンクの履歴がブラウザの履歴に残らない

すでにお気づきの方もいらっしゃると思いますが、当サイトでは数ヶ月前から月送りカレンダーを Ajax 化して試験運用してiいます。月送りのリンクをクリックして Ajax 化されたカレンダーを体感してみてください。

注：本カスタマイズでつまづいた場合、「８．トラブルシューティング」をご覧ください。

仕様

ここで紹介する月送りカレンダーの主な仕様です。

• Ajax を利用してテーブル型のカレンダーを月送りします。Ajax 化されるのはページ表示時および月送り時のカレンダー切り替え時です
• クッキーを利用して月送り状態を保持します
• カレンダーの取得に失敗した場合、カレンダー表示エリアにメッセージを表示します（表示内容・非表示のカスタマイズ可能）

以下、カスタマイズ方法です。ここではデフォルトテンプレートおよび公開テンプレートをサンプルにしていますが、Ajax の動作はテンプレートに依存するものではありませんので、CSS を変更すれば他のテンプレートでもお使いになれます。

１．スクリプトのダウンロード・アップロード

下記のスクリプトをダウンロードします。

• prototype.js（"Download the latest version" のリンクをクリック）
• ajaxCalendar.js
• dayChecker.js（「２．ダウンロード」にある dayChecker.js をクリック）

ダウンロードした ajaxCalendar.js と dayChecker.js はメインページと同じディレクトリにアップロードしてください。
また、prototype.js はダウンロードしたアーカイブを解凍して、dist フォルダの中にある prototype.js をメインページと同じディレクトリにアップロードしてください。

２．カレンダーテンプレート作成

注：ブログの文字コードが UTF-8 以外で運用されている場合は、２．１項のカスタマイズも併せて行ってください。

バージョンが 3.2-ja 以降の場合、管理メニューの「テンプレート」→「アーカイブ」→「テンプレートを新規作成」をクリック。3.1x-ja 以前の場合、管理メニューより「テンプレート」→「アーカイブに関連したテンプレート」で「新しいアーカイブテンプレートを作る」をクリック。
次画面で下記を設定してください。

• テンプレート名：カレンダー（名称は何でもOKです）
• このテンプレートにリンクするファイル：（設定不要）
• テンプレートの内容：下記のいずれか

デフォルトテンプレートの場合

<div class="module-calendar module">
<h2 class="module-header"><MTArchivePrevious><a href="javascript:void(0);" onclick="changeMonth('<$MTBlogArchiveURL$><MTArchiveDate format="calendar/%Y/%m/%i">');">&#65308;</a> </MTArchivePrevious><$MTArchiveDate format="%B %Y"$><MTArchiveNext> <a href="javascript:void(0);" onclick="changeMonth('<$MTBlogArchiveURL$><MTArchiveDate format="calendar/%Y/%m/%i">');" >&#65310;</a></MTArchiveNext></h2>
<div class="calendar">
<table summary="<MTArchiveDate format="%Y/%m">">
<tr height="15">
<th abbr="Sunday" class="sunday">Sun</th>
<th abbr="Monday">Mon</th>
<th abbr="Tuesday">Tue</th>
<th abbr="Wednesday">Wed</th>
<th abbr="Thursday">Thu</th>
<th abbr="Friday">Fri</th>
<th abbr="Saturday" class="saturday">Sat</th>
</tr>
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</div>

公開テンプレートの場合

<table summary="<MTArchiveDate format="%Y/%m">">
<caption class="calendarhead">
<MTArchivePrevious>
<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogArchiveURL$><MTArchiveDate format="calendar/%Y/%m/%i">');">&#65308;</a>
</MTArchivePrevious>
<$MTArchiveDate format="%B %Y"$> 
<MTArchiveNext>
<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogArchiveURL$><MTArchiveDate format="calendar/%Y/%m/%i">');" >&#65310;</a>
</MTArchiveNext>
</caption>
<tr height="15">
<th abbr="Sunday" class="sunday">Sun</th>
<th abbr="Monday">Mon</th>
<th abbr="Tuesday">Tue</th>
<th abbr="Wednesday">Wed</th>
<th abbr="Thursday">Thu</th>
<th abbr="Friday">Fri</th>
<th abbr="Saturday" class="saturday">Sat</th>
</tr>
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>

設定が終わったら「保存」をクリックしてください。

２．１ ブログの文字コードがUTF-8以外の場合

Ajax（XMLHttpRequest）は UTF-8 で動作することを前提としています。他の文字コードでブログを運用している場合、本カスタマイズが正常に動作しない可能性があります。*1

ここではひとつの解決方法として Ogawa::memoranda さんの MT-I18N プラグインを利用する方法を紹介します。つまりブログの文字コードが UTF-8 以外の場合、プラグインを利用してカレンダーアーカイブの文字コードだけ UTF-8 で出力するという作戦です。

まず、MT-I18N Plugin.ja JP をダウンロードして、プラグイン mt-i18n.pl を plugins フォルダにアップロードします。

そして、２項で示したカレンダーテンプレート全体を下記の青色のタグで括ってください。

<MTEncodeText to="utf8">
　　　　　　：
　（カレンダーテンプレート）
　　　　　　：
</MTEncodeText>

本プラグインを利用し、EUC-JP、Shith_JIS で作成した Movable Type のサイトで、カレンダー動作と日本語表示の正常性は確認済です。ただし、.htaccess 等で文字コードを強制的に指定している場合は未確認です。

３．カレンダーテンプレートを月別アーカイブに関連付け

バージョンが 3.2-ja 以降の場合、管理メニューの「設定」→「公開」の「アーカイブ・マッピング」の項目の右側にある「マッピングを新規作成」をクリックして下記の設定を実施してください（バージョン 3.3 以降の場合、右上にある「詳細モードに切り替え」のリンクをクリックすることで「公開」というメニューが表示されます）。

バージョンが3.1x-ja 以前の場合は、管理メニューより「ウェブログの設定」→「アーカイブの設定」で「新しく、テンプレートとアーカイブを関連付ける」より下記の設定を実施してください。

• アーカイブの種類：月別
• テンプレート：カレンダー（←２項で設定した「テンプレート名」です）

「追加」をクリック後、その下の「アーカイブ」欄にある「月別」に、２項で付与した「テンプレート名（ここでは"カレンダー"）」が追加されていればOKです。
次に同じ「アーカイブ」欄の「月別」の「カレンダー」の右側にある「出力フォーマット（3.2-ja 以降）」または「アーカイブ・ファイルのテンプレート（3.1x 以前）」に下記を設定してください。

出力フォーマット（3.2-ja 以降）

calendar/%y/%m/%i

アーカイブ・ファイルのテンプレート（3.1x-ja 以前）

<$MTArchiveDate format="calendar/%Y/%m/index.html"$>

これがカレンダー用のディレクトリおよびファイル名となります。
設定後、ページ下にある「変更を保存」をクリックしてください。

またカレンダーを初めてご利用になる場合は、「アーカイブ種類」欄の「日別アーカイブ」をチェックして保存してください。このチェックがされていないと、再構築で下記のようなエラーが発生します。

日付アーカイブ「Monthlyxxxx」の再構築に失敗しました: テンプレート「カレンダー」の再構築に失敗しました: <MTCalendar>タグでエラーが発生しました: <MTCalendarIfEntries>タグでエラーが発生しました: <MTEntryLink>タグでエラーが発生しました:<$MTEntryLink$>タグを使って、Dailyアーカイブにリンクしようとしましたが、そのアーカイブ・タイプは公開されていません。

４．テンプレート修正

カレンダーを表示させたいテンプレートに下記の設定を行います。

４．１ 外部ファイルのインクルード

<head>～</head> の間に下記を追加します。

<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>ajaxCalendar.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>

４．２ カレンダー表示部分の設定

カレンダーを表示させたい位置に下記を追加します。

<div id="calendar"></div>
<script type="text/javascript">
getCalendar("<$MTBlogArchiveURL$>", "<$MTBlogID$>", "<$MTBlogArchiveURL$><MTEntries lastn="1" sort_order="descend"><$MTEntryDate format="calendar/%Y/%m/" $></MTEntries>");
</script>

div は空要素ですが、Ajax によってこの部分にカレンダーが表示されます。

５．CSS修正

下記をスタイルシートに追加します。すでにカレンダー関係のスタイル設定が行われている場合は競合を避けるため、古い設定を削除（またはコメントアウト）してください。

デフォルトテンプレートの場合

.calendar {
    margin: 5px 0;
    text-align: center;
}
.calendarhead {
    padding-bottom: 5px;
    font-size: 9px;
    letter-spacing: 0.2em;
}
.calendar table {
    padding: 0;
    border-collapse: collapse;
}
.calendar th {
    padding-bottom: 3px;
    font-size: 9px;
    width: 23px;
}
.calendar td {
    padding: 2px 0;
    text-align: center;
    font-size: 10px;
    line-height: 120%;
}
.today {
    display: block;
    border: 1px solid #444444;
}
.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}

公開テンプレートの場合

#calendar {
    margin: 5px 0 10px;;
    color: #444444;
}
.calendarhead {
    padding-bottom: 5px;
    font-size: 9px;
    letter-spacing: 0.2em;
}
#calendar table {
    padding: 0;
    border-collapse: collapse;
}
#calendar th {
    padding-bottom: 3px;
    text-align: center;
    font-size: 9px;
    width: 23px;
}
#calendar td {
    padding: 2px 0;
    text-align: center;
    font-size: 10px;
    line-height: 120%;
}
.today {
    display: block;
    border: 1px solid #444444;
}
.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}

６．ページ表示時にローディング状態を表示する場合

インチキっぽいですが、４．２項で設定した

<div id="calendar"></div>

に、例えば青色の

<div id="calendar">loading ...</div>

を追加することで、ページ描画でカレンダーが表示されるまでローディング状態を示すことができます。img タグを設定すれば画像を表示することも可能です。

月送り時は挿入した文字は表示されません。またカレンダー取得失敗の場合は表示が消えます（これは７項の設定と関連します）。

７．カレンダー取得失敗時にメッセージ等を表示する

Ajax 月送りカレンダーは HTTP 非同期通信でカレンダーファイルを取得・表示しますが、何らかの原因で通信に失敗し、正常に取得できない可能性があります。当サイトで運用していた時も 503 エラーが多発すると取得に失敗するようです。

このカスタマイズではカレンダーの取得に失敗した場合、カレンダー表示エリアに正常に取得できなかったメッセージ

File Not Found

を表示するようにしています。このメッセージは ajaxCalendar.js の下記の青色部分が対応します。

function errorProcess() {
    $('calendar').innerHTML = 'File Not Found';
}

メッセージを変更したい場合はこの青色部分を修正してください。またこの1行を丸ごと削除すれば、HTTP 非同期通信に失敗した場合にカレンダー表示エリアの書き換えが行われなくなりますが、６項の表示がそのまま残りますのでご注意ください。

「失敗してもカレンダーを表示させたい」という場合は、上記メッセージ出力の1行を削除して、６項の「loading ...」というメッセージの代わりに、カレンダータグ（通常のカレンダータグ）を埋め込んでおくという手もあります。通信が成功すれば Ajax 月送りカレンダーに切り替わり、失敗すれば通常のカレンダーがそのまま表示されます。

８．トラブルシューティング

８．１ 一度も表示されない場合

カレンダーが正常に表示されない場合、つまり上記のカスタマイズをそのまま行って、カレンダーが表示される位置に "File Not Found" が表示された場合、以下の問題が考えられます（全てではありませんが思いついたものを挙げておきます）。

• カレンダーアーカイブの再構築ができていない
• カレンダーアーカイブページへのパス設定が誤っている
• テンプレートに設定したカレンダーアーカイブページの拡張子が不一致
• カレンダーアーカイブが UTF-8 で出力されていない

ご質問の前に確認していただきたいのは、

1. ブラウザの[表示]-[ソース]（あるいは「ソースの表示」）で、カレンダーを設定しているページのソースを表示
2. 表示されたソースから下記のタグをみつけ、getCalendar() の3番目のパラメータに設定されている URL（赤色）をブラウザに設定して実行

<div id="calendar"></div>
<script type="text/javascript">
getCalendar("http://user-domain/", "1", "http://user-domain/calendar/yyyy/mm/");
</script>

何も表示されない場合（404 Not Found）はカレンダーアーカイブへのパスの設定が誤っているか、アーカイブが生成されていない可能性があります。

逆に、カレンダーが表示されてブラウザにそのカレンダーが表示されない場合は、ブラウザの再起動や、ブラウザのキャッシュ・一時ファイルの削除等を行ってみてください。また UTF-8 以外で運用されている方は、カレンダーが表示されている状態で、ブラウザの[表示]-[エンコード]でカレンダーのページの文字コードが UTF-8 になっていることを確認してください。

８．２ 一度表示され、リロードすると表示されなくなる場合

クッキーを削除した直後のカレンダーは表示されるけれども、月送りのリンクをクリックすると File Not Found が表示されるという場合は、２項のテンプレートに埋め込んでいるアーカイブパスが誤っている可能性があります。よくあるのは次のように最後の"/"が抜けているケースです。

<div id="calendar"></div>
<script type="text/javascript">
getCalendar("http://user-domain/archives", "1", "http://user-domain/archives/calendar/yyyy/mm/");
</script>

これは、管理画面の [設定] - [公開] で「アーカイブの設定」にチェックをつけていて、 [アーカイブURL] の最後に "/" がない場合に発生します。

９．その他

当サイトで運用している月送りカレンダーの Ajax ライブラリは、prototype.js ではなく、「入門 Ajax」のサポートページで紹介されている jslb_ajax.js を使っていますが、紹介するカスタマイズでは知名度の高い protptype.js を用いています。

2006.12.26
タグの属性名が誤ってましたので修正しました。（sord_order → sort_order）

2007.03.20
Cookie に保持された場合にカレンダーが表示されなくなる不具合および、複数ブログで利用可能になるよう、ajaxCalendar.js および４．２項のMTタグを修正しました。
また、デフォルトテンプレート + IE6 で、カレンダー日付のスタイルが崩れる不具合を修正しました。

2007.10.20
アーカイブパスがサイトパス配下に存在しない場合に正常に動作しない不具合を修正しました。

*1：文字コードの設定を行わずに Movable Type をインストールした場合の文字コードは UTF-8 です。

新発売の「和風ミラノサンド」には、つくねが2つはいっていて、

服部祐民子 - Wikipedia

岩手県盛岡市出身。?略? 1993年、SME主催のオーディション「BREATH」でSD奨励賞を受賞。同オーディション出身者に平井堅、Puffyの大貫亜美などがいる。1994年、ソニーレコードより、シングル「愛してくれなかった人達へ」でデビュー。日常を描いた歌詞に定評がある。webデザイナー・クリエイターとしても活躍している。アーティストの友人に相沢友子、加藤いづみ、相馬裕子、甲斐名都等がいる。

ミュージシャンとWebクリエーター、どちらも職業とされているところがすごいなぁ、と。今年の9月でデビュー12年目ということで、ますますのご活躍を期待しています。

ブログの方は Movable Type で構築されており、2.661 からのご利用者。最近一気に 3.3 にアップグレードされて、今回、The blog of H.Fujimoto さんの Perl版ダイナミックパブリッシングプラグイン、Ogawa::memoranda さんのデータベース移行プラグイン（mt-db-convert.cgi）、そして当サイトで紹介している月送りカレンダーを導入くださいました。ありがとうございます。

余談ですが、ブログのカレンダーは一時期廃れそうになった時期があり、意に介さず関連記事をエントリーし続けました。本日枠表示や休日表示等は他のブログツールやブログサービスに展開しやすいということもあいまって、現在、当サイトのカスタマイズ記事数トップのカテゴリーになっています。

タカラトミーから「キューステア（Q-STEER）」というリモートコントロールできるチョロQが発売されました。

Qステア QSS09 ランサーエボリューションVIII スターターセット タカラトミー 2006-11-16 売り上げランキング : 1385 Amazonで詳しく見る by G-Tools

これは数年前（多分2001年）発売された、コナミの「MicroIR」という赤外線利用の遠隔操作システムが利用した「デジＱ」の事実上の後継機のようです。

デジQ-Rのサイト

デジＱは発売当初1台購入し、遊んでいました。ほどなくして姪に譲ったため残念ながら手元にはありません。

さて、デジQは独立して可動する後輪にモーターが1台ずつ搭載され、片方のモーターの回転数を変えることで左右に曲がる仕組みになっています。
したがって、デジQには普通の車のような、いわゆる「ステアリング（前輪の向きを変える）」という機構が存在しません。この仕組みの欠点は、左右のモーターの回転数が微妙に異なると正確に直進することができないことです。

しかし「キューステア」サイトの「FEATURE」のページ（の「各部詳細」）を見ると、ステアリングは存在しています。細かい話をすれば、ホイールアライメントの「トーイン」が設定されていればさらに直進走行性が改善されている可能性があります（後輪は1本のシャフトでつながっているためホイールアライメントは仕組み上不可能）。

COCKPIT：ホイールアライメント

またデジQ発売と時を同じくして、トミーから「ビットチャージー」というが発売されていました。この商品に関する参考サイトは下記です（公式サイトは消滅している模様）。

GAME Watch：超小型サイズの本格的ラジコン トミー「ビットチャーG」
GAME Watch：開発者に訊く「ビットチャージー」開発秘話と「ビットホビー」構想
BIT CHAR-G
ビットチャージー

ちなみにビットチャージーも購入しており、これまた姪に受け継がれました。

当時の記憶ではビットチャージーの動作はデジQと比較するとやや劣っていましたが、こちらはステアリング機構が搭載されています。

つまり「キューステア」は「デジQ」の単なる再登場ではなく、両者を合体させ、進化したモデルになっているという印象です。
気になるのは直進安定性とステアリングの微妙な操作性ですが、公式サイトの「本格的な旋回性・直進性」という謳い文句に期待しています。下に掲載している Amazonのレビューでも操作性について良い評価が書かれています。

ちなみに、「デジQ」は5000円弱、「ビットチャージー」は2980円だったのに対し、「キューステア」はスターターセットでも1280円という低価格。Amazon ではこのエントリー投稿時点で1150円? 1216円で販売されているものもあります。ラジコンを楽しむには充分お手軽な価格と言えるでしょう。

以下、現在の Amazon に掲載されているフルラインナップです。

2007.12.28 ラインナップ更新しました。

Qステア QSS04 FIAT500 トミー 2007-03-24 売り上げランキング : 234 おすすめ平均 Amazonで詳しく見る by G-Tools

Qステア QSS02 ハマーH2　（A/B） タカラ 2007-02-24 売り上げランキング : 360 おすすめ平均 Amazonで詳しく見る by G-Tools

Qステア QSS06 フェアレディZ432Z タカラ 2007-05-26 売り上げランキング : 323 おすすめ平均 Amazonで詳しく見る by G-Tools

Ｑステア ＴＳ０２ グラスホッパー タカラトミー 2007-11-30 売り上げランキング : 699 おすすめ平均 Amazonで詳しく見る by G-Tools

Ｑステア ＴＳ０３ ホーネット タカラトミー 2007-11-30 売り上げランキング : 564 おすすめ平均 Amazonで詳しく見る by G-Tools

Qステア QSP01 ライトニングマックィーン タカラトミー 2007-09-23 売り上げランキング : 278 Amazonで詳しく見る by G-Tools

Ｑステア ＴＳ０１ マイティフロッグ タカラトミー 2007-11-30 売り上げランキング : 1483 おすすめ平均 Amazonで詳しく見る by G-Tools

Qステア QSS14 RX－7 トミー 2007-01-27 売り上げランキング : 514 おすすめ平均 Amazonで詳しく見る by G-Tools

Qステア QSS12 スプリンタートレノ （AE86）　（C/D） トミー 2006-12-28 売り上げランキング : 2160 おすすめ平均 Amazonで詳しく見る by G-Tools

Qステア QSP02 ライトニングマックイーン DINOCOバージョン タカラトミー 2007-10-27 売り上げランキング : 998 Amazonで詳しく見る by G-Tools

Qステア QSH02 スカイラインGT－R　KPGC10 タカラトミー 2007-06-23 売り上げランキング : 3889 Amazonで詳しく見る by G-Tools

Qステア TS04 タミヤRCバギー ホットショット タカラトミー 2008-01-31 売り上げランキング : 542 Amazonで詳しく見る by G-Tools

Qステア QSH04 RX－7パトロールカー タカラトミー 2007-10-25 売り上げランキング : 5393 Amazonで詳しく見る by G-Tools

Qステア QSS09 コペン タカラトミー 2007-12-27 売り上げランキング : 414 おすすめ平均 Amazonで詳しく見る by G-Tools

Qステア QSH01 コルベット C3 タカラ 2007-04-28 売り上げランキング : 811 Amazonで詳しく見る by G-Tools

Qステア QSS10 ボンネットバス トミー 2007-07-29 売り上げランキング : 1480 Amazonで詳しく見る by G-Tools

Qステア QSH03 リーボックスカイラインGT－R（R32） トミー 2007-08-05 売り上げランキング : 3319 おすすめ平均 Amazonで詳しく見る by G-Tools

Qステア QSRS04 頭文字Dセット トミー 2007-03-24 売り上げランキング : 11007 Amazonで詳しく見る by G-Tools

Qステア QSS02B ハマーH2ブラック　（C/D） タカラトミー 2007-02-24 売り上げランキング : 7787 おすすめ平均 Amazonで詳しく見る by G-Tools

Qステア タミヤRCバギー カスタムツールBOX マイティフロッグ タカラトミー 2007-12-27 売り上げランキング : 1054 Amazonで詳しく見る by G-Tools

Qステア QSRS05 ワンマットサーキットセット カルソニックスカイラインGT－R （R34） トミー 2007-07-29 売り上げランキング : 10020 Amazonで詳しく見る by G-Tools

Qステア QSRS02 レーシングセット インプレッサ＆ランサーWRC編 タカラ 2006-11-23 売り上げランキング : 15859 おすすめ平均 Amazonで詳しく見る by G-Tools

Qステア QSRS01 レーシングセット スカイラインGT選手権編 タカラトミー 2006-11-23 売り上げランキング : 13855 おすすめ平均 Amazonで詳しく見る by G-Tools

Qステア QSS05 RX-8スターターセット タカラ 2006-09-30 売り上げランキング : 23 おすすめ平均 Amazonで詳しく見る by G-Tools

Qステア QSS01 スカイラインGT-R R-34 スターターセット タカラ 2006-09-30 売り上げランキング : 25 Amazonで詳しく見る by G-Tools

Qステア QSS04 スバル360スターターセット タカラ 2006-09-30 売り上げランキング : 26 おすすめ平均 Amazonで詳しく見る by G-Tools

Qステア QSS03 インプレッサWRXスターターセット タカラ 2006-09-30 売り上げランキング : 48 Amazonで詳しく見る by G-Tools

Qステア QSS02 bBスターターセット タカラ 2006-09-30 売り上げランキング : 123 Amazonで詳しく見る by G-Tools

Qステア QSS06 ステップワゴンスターターセット タカラ 2006-09-30 売り上げランキング : 388 Amazonで詳しく見る by G-Tools

Qステア QSS07 スカイライン GT-R R32スターターセット タカラ 2006-10-28 売り上げランキング : 753 Amazonで詳しく見る by G-Tools

Qステア QSS09 ランサーエボリューションVIII スターターセット タカラトミー 2006-11-16 売り上げランキング : 1385 Amazonで詳しく見る by G-Tools

Qステア QSS10 ワゴンR RR スターターセット　（C/D） タカラトミー 2006-11-23 売り上げランキング : 1214 Amazonで詳しく見る by G-Tools

Qステア QSS09 エスティマ スターターセット タカラ 2006-11-23 売り上げランキング : 1268 Amazonで詳しく見る by G-Tools

Qステア QSS13 スカイライン GT-R R34パトカー　（A/B） タカラトミー 2006-12-28 売り上げランキング : 1790 Amazonで詳しく見る by G-Tools

Qステア QSS11 フェアレディZ（Z33）　（C/D） タカラトミー 2006-12-28 売り上げランキング : 3499 Amazonで詳しく見る by G-Tools

Qステア QSRS03 緊急出動24時セット タカラトミー 2006-12-28 売り上げランキング : 3340 Amazonで詳しく見る by G-Tools

Qステア QS01 スカイラインGT-R R34 NISMOバージョン タカラ 2006-10-28 売り上げランキング : 271 Amazonで詳しく見る by G-Tools

Qステア QS05 RX-8 マツダスピードパージョン タカラ 2006-10-28 売り上げランキング : 665 Amazonで詳しく見る by G-Tools

Qステア QS04 スバル360 パトカー タカラ 2006-10-28 売り上げランキング : 764 Amazonで詳しく見る by G-Tools

Qステア QS02 bB ファイヤーパターン タカラ 2006-10-28 売り上げランキング : 1286 Amazonで詳しく見る by G-Tools

Qステア QS03 インプレッサWRX タカラ 2006-10-28 売り上げランキング : 1953 Amazonで詳しく見る by G-Tools

Qステア QS06 ステップワゴン 郵便車 タカラ 2006-10-28 売り上げランキング : 3040 おすすめ平均 Amazonで詳しく見る by G-Tools

Qステア QSH05 スプリンタートレノ （AE86）
ポケットモンスター ポケモンQステア ポッチャマ
ポケットモンスター ポケモンQステア ヒコザルカー
Qステア TS05 タミヤRCバギー アバンテ
Qステア タミヤRCバギー カスタムツールBOX アバンテ
Qステア QSS02B ハマーH2ブラック　（C/D）
Qステア QSS02 ハマーH2　（A/B）
Qステア QSS14 RX?7
Qステア QSRS01 レーシングセット スカイラインGT選手権編
Qステア QSRS02 レーシングセット インプレッサ＆ランサーWRC編

近いうちにサイトのデザイン（というよりレイアウト）を少しだけ変更しようと思っています。サイト開設からこれまで一貫してリキッドレイアウトで運用してきたのですが、

「固定カラムにする場合、横幅を何ピクセルにすれば良いのだろう？」

と思い、ちょっと調べてみました。
サイトデザイン（幅）で悩んでいる方には役に立つかもしれない内容です。

私が普段使っているディスプレイの解像度は SXGA（1280×1024）といわれるものです。横幅が 1280px に近いサイトはほとんど存在しないため、サイトの横幅というものをあまり気にしたことはなかったのですが、試しに画面のプロパティで解像度を、

• SVGA（800×600）
• XGA（1024×768）

にそれぞれ変更してみたところ、（当たり前かもしれませんが）この2つの解像度を考慮した横幅になっているサイト（サービス・ツール）があることに気がつきました。

個人的によく利用するサービス・ツールを上記2つの種類に分類した結果が下記の通りです。

SVGA

Blogger

BlogPeople

FeedBurner

mixi（メイン画面）

Movable Type 管理画面

Serene Bach 管理画面

Research Artisan(メイン画面)

Yahoo!（メイン画面）

XGA

Google Analytics

mixi（ログイン後）

Research Artisan(ログイン後)

YouTube

Vox

Web Artisan Search

ここに含まれていないサービスは、

• リキッドレイアウト
• どちらにも属さない（解像度に合わせていない固定幅）

のいずれか（または私が利用していない）で、「リキッドレイアウト」派が意外に多かったことに気がつきました。「どちらにも属さない」サービスは少数派です。

参考までに、ディスプレイの解像度には以下のような種類があります。

また、当サイトの閲覧者が利用しているディスプレイの解像度ベスト30です。データは Google Analytics の直近1週間の値にもとづいています。

XGA・SXGA で 73% を占めており、3位以降も横幅が広い解像度が続き、10位までで 96% 近くの方が XGA 以上（うち横幅が SXGA 以上が 57%）のディスプレイを利用されています。

また、SVGA が 12位、割合も 0.51% と、かなり利用者が減少していることがお分かりになると思います。だからといって「無視していい」ということにはならないのですが、興味深いデータと言えるでしょう。

本題と関係ありませんが、このエントリーで用いているテーブルは下記の記事を参考にさせて頂きました。ありがとうございました。

Lucky bag::blog：tableの見栄えをCSSで整える

１．テンプレートの設定

１．１ livedoor Blog（無料版）の場合

トップページ／個別記事ページ／カテゴリアーカイブ／月別アーカイブの各テンプレートの </body> の前に下記のリストを貼り付けます。

<script type="text/javascript">
var currentYear;
var currentMonth;
var currentDay;
function setCurrentDate() {
  data = new Date();
  currentYear = data.getYear();
  currentYear = (currentYear < 2000) ? currentYear + 1900 : currentYear;
  currentMonth = data.getMonth() + 1;
  currentDay = data.getDate();
}
function isToday(year, month, day) {
  if (year == currentYear && parseInt(month,10) == currentMonth && day == currentDay) {return true;}
  return false;
}
function isSaturday(year, month, day) {
  var week = new Date(year, month - 1, day).getDay();
  if (week == 6) {return true;}
  return false;
}
function isHoliday(year, month, day) {
  var week = new Date(year, month - 1, day).getDay();
  if (week == 0) {return true;}
  switch(parseInt(month,10)) {
  case 1:
  if (day == 1) {return true;}
  if (day == 2 && isSunday(year, month, 1)) {return true;}
  if (day == (getFirstMonday(year, month) + 7)) {return true;}
  break;
  case 2:
  if (day == 11) {return true;}
  if (day == 12 && isSunday(year, month, 11)) {return true;}
  break;
  case 3:
  if(year > 1979 && year < 2100) {
    if (day == parseInt(20.8431 + 0.242194 * (year - 1980) - parseInt((year - 1980) / 4))) {
      return true;
    }
  }
  break;
  case 4:
  if (day == 29) {return true;}
  if (day == 30 && isSunday(year, month, 29)) {return true;}
  break;
  case 5:
  if (day == 3 || day == 4 || day == 5) {return true;}
  if (day == 6 && (isSunday(year, month, 3) ||
    isSunday(year, month, 4) ||
    isSunday(year, month, 5))) {
    return true;
  }
  break;
  case 7:
  if (day == (getFirstMonday(year, month) + 14)) {return true;}
  break;
  case 9:
  if (day == (getFirstMonday(year, month) + 14)) {return true;}
  if(year > 1979 && year < 2100) {
    if (day == parseInt(23.2488 + 0.242194 * (year - 1980) - parseInt((year - 1980) / 4))) {
      return true;
    }
  }
  break;
  case 10:
  if (day == (getFirstMonday(year, month) + 7)) {return true;}
  break;
  case 11:
  if (day == 3 || day == 23) {return true;}
  if (day == 4 && isSunday(year, month, 3)) {return true;}
  if (day == 24 && isSunday(year, month, 23)) {return true;}
  break;
  case 12:
  if (day == 23) {return true;}
  if (day == 24 && isSunday(year, month, 23)) {return true;}
  break;
  }
  return false;
}
function isSunday(year, month, day) {
  var week = new Date(year, month - 1, day).getDay();
  if (week == 0) {return true;}
  return false;
}
function getFirstMonday(year, month) {
  var monday;
  for(monday = 1; monday < 8; monday++) {
    if(new Date(year, month - 1, monday).getDay() == 1) {break;}
  }
  return monday;
}
function setWeekendAndHoliday() {
  var year = 0;
  var month = 0;
  var elements = document.getElementsByTagName("div");
  for (i = 0; i < elements.length; i++) {
    if(elements[i].getAttribute("className") == 'calendarhead' ||
      elements[i].getAttribute("class") == 'calendarhead') {
      var href = elements[i].childNodes[0].getAttribute('href');
      year = href.replace(/^.*(\d\d\d\d)-\d\d.html$/gi, "\$1");
      month = href.replace(/^.*\d\d\d\d-(\d\d).html$/gi, "\$1");
      month = parseInt(month,10) + 1;
      if (month == 13) {
        year = parseInt(year,10) + 1;
        month = 1;
      }
    }
  }
  if (!(year && month)) {return;}
  var table = document.getElementsByTagName('table');
  var element;
  for (i = 0; i < table.length; i++) {
  if(table[i].getAttribute("className") == 'caltbl calendartable' ||
    table[i].getAttribute("class") == 'caltbl calendartable'){
    element = table[i];
    var spans = element.getElementsByTagName("span");
    var day;
    for (i = 0; i < spans.length; i++) {
      if (spans[i].parentNode.nodeName == "TD") {
        if(spans[i].innerHTML.indexOf("href") != -1){
          day = spans[i].getElementsByTagName("a")[0].innerHTML;
        } else {day = spans[i].innerHTML;}
        if (isHoliday(year, month, day)) {
          spans[i].setAttribute('class', 'holiday');
          spans[i].setAttribute('className', 'holiday');
        } else if(isSaturday(year, month, day)) {
          spans[i].setAttribute('class', 'saturday');
          spans[i].setAttribute('className', 'saturday');
        }
        if (isToday(year, month, day)) {
          spans[i].parentNode.setAttribute('class', 'today');
          spans[i].parentNode.setAttribute('className', 'today');
        }
      }
    }
  }
  }
}
setCurrentDate();
setWeekendAndHoliday();
</script>

１．２ livedoor Blog PRO / livedoor Blog BUSINESS の場合

上記リストから script 要素の開始・終了タグと

setCurrentDate();
setWeekendAndHoliday();

を削除したものを外部ファイル「dayChecker.js」という名称で保存・アップロードしてください。

また、トップページ／個別記事ページ／カテゴリアーカイブ／月別アーカイブの各テンプレートの <head>～</head> の間に下記のタグを貼り付けます。

<script type="text/javascript" src="[アップロードしたURL]/dayChecker.js"></script>

さらに、

<script type="text/javascript">
setCurrentDate();
setWeekendAndHoliday();
</script>

を、トップページ／個別記事ページ／カテゴリアーカイブ／月別アーカイブの各テンプレートの </body> の前に設定します。

２．CSS修正

下記のセレクタをスタイルシートに追加してください。

２．１ 公開テンプレートの場合

下記のセレクタ（青色）を追加してください。

.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}

２．２ 他のデザインの場合

.today {
    display: block;
    border: 1px solid #444444;
}
.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}

2006.01.08 追記
1月分のカレンダー表示が正常に行えないバグがありましたのでスクリプトを修正しました。

blockquote 要素を使用した Movable Type のエントリーを、Another lint HTML Gateway でチェックすると、

9: line xx: <blockquote> を xx行目の <p>～</p> 内に書くことはできません。<blockquote>～</blockquote> 内に <p> を書くことはできます。 → 解説 43

というエラーが出る場合があります。本エントリーではその原因と対処方法について記します。

以前、このエラー発生についてのご質問を頂き、回答するお約束をしておりましたが、エントリーすることをすっかり失念しておりました。申し訳ありません。この場をお借りしてお詫び申し上げます。
また記事中に誤った認識がある場合、適宜ご指摘頂ければ幸いです。

１．blockquote 要素の仕様

XHTML文書では、blockquote 要素を p 要素の中に記述することはできません。
例えば、下記のようなマークアップは誤りです。*1 *2

<p>
<blockquote>引用</blockquote>
</p>

ちなみに blockquote が記述できる親要素は XHTMLのバージョンによって異なります。利用可能な要素を調べるには下記のページが参考になるでしょう。

Another HTML-lint：タグ一覧

２．問題点

Movable Type のエントリー編集画面下にある「改行設定」で「改行を変換する」を選択している場合、下記のような文書構造

段落１
 
段落２
 
段落３

を書くと、空行ではさまれた段落は自動的に p 要素で括られ、

<p>段落１</p>
 
<p>段落２</p>
 
<p>段落３</p>

となります。

ただし、空行の直後（あるいはエントリー開始行）が blockquote 等 *3 で開始（または終了）する場合、「p 要素で括る」という変換は行われません。

例えば、

段落１
 
<blockquote>引用</blockquote>
 
段落２

と書けば、

<p>段落１</p>
 
<blockquote>引用</blockquote>
 
<p>段落２</p>

と変換されるので、「blockquote 要素が p 要素で括られてしまう」という問題は発生しません。

問題となるのは blockquote 要素の前に空行がない場合です。

段落１
<blockquote>引用</blockquote>
段落２

という文書では、

<p>段落１
<blockquote>引用</blockquote>
段落２</p>

と、全体がひとつの段落としてみなされ、p 要素で括られてしまい、blockquote 要素に対し予期しないマークアップがされてしまうことになります。
これが冒頭に申し上げた問題です。

３．問題を回避するための対処

以下に対処方法を提示します。

３．１ blockquote 要素の開始タグの前と終了タグの後に空行を設ける

２項の説明からお分かりの通り、「改行設定」で「改行を変換する」を選択している場合、blockquote 要素の開始タグの前と終了タグの後に空行を挿入します。ただし blockquote がエントリーの先頭であれば開始タグ前の空行は不要です。

終了タグの後ろに空行を挿入する理由は、その後に続く段落に p 要素を付与するためです（p 要素が付与されないと、その箇所だけ他と異なるマークアップになる可能性があります）。
次の段落がブロックレベル要素のタグで開始するのであれば空行は不要ですが、「ブロックレベル要素の前後は空行」というお作法で統一しておいた方が良いでしょう。

３．２ 手動でマークアップする

「改行設定」で「改行を変換する」を選択せずに、ご自身でマークアップをすれば想定外のマークアップをされる心配はありません。が、個人的には改行変換機能を利用して少し気をつけてエントリーを記述した方が効率的であると考えます。

４．その他の注意点

４．１ blockquote 要素で括られた文書の途中に空行を作らない

改行変換機能には「空行をみつけて p 要素を挿入するという規則があるので、blockquote 要素で括られた文書の途中に空行が存在すると、Movable Type の処理上、そこが段落の開始とみなされ、次の空行までを p 要素で括られてしまい、誤ったマークアップになります。

例えば、

段落１
 
<blockquote>引用
 
引用</blockquote>
 
段落２

と書くと、

<p>段落１</p>
 
<blockquote>引用
 
<p>引用</blockquote></p>
 
<p>段落２</p>

と、予期しない p 要素のマークアップが行われ、結果的に誤った XHTML になってしまいます。

どうしても blockquote 要素の中で空行を挿入したい場合は、

• 空行となる部分に半角空白を挿入する
• 改行変換機能を使わない

のいずれかを選択してください。
補足すると、前者は半角空白文字を本来の目的と異なった用途で使用するため、後者の方法が本来ですが、私自身は前者を用いております（ダブルスタンダードであることは認識しています。予めご容赦ください）。

４．２ blockquote 要素に改行を挿入するように修正する

blockquote 要素の前に空行を挿入することによる弊害は、blockquote 要素内の改行に br 要素が付与されなくなる、つまり blockquote 要素内で改行変換機能が効かなくなることです。

これを解消する方法については、「エントリーにpタグとbrタグが入る仕組み（その2：blockquoteにbrタグを挿入）」を参照ください。

*1：例えば、XHTML1.0 Strict では、blockquote 要素の子要素として記述できるのは、ブロックレベル要素（address / blockquote / div / dl / fieldset / form / h1 / h2 / h3 / h4 / h5 / h6 / hr / ol / p / pre /table / ul） と del 要素、ins 要素、noscript 要素、script 要素です。つまり、インライン要素や #PCDATA （意味はばけらの HTML リファレンス(未完成)：構文解析対象文字データ」参照）を直接記述することはできませんが、ここでは複雑になるのを避けるため説明を省略しています。

*2：blockquote 要素には cite 属性（引用元URL）を記述することができますが、この記事の主旨から外れるので説明は省略しています。また cite 要素を記述することについても同様の理由で言及しておりません（それらを使用することが適切であることは認識しています）。

*3：h1 / h2 / h3 / h4 / h5 / h6 / table / ol / dl / ul / menu / dir / p / pre / center / form / fieldset / select / blockquote / address / div / hr

Movable Type 3.3 および MovableType Enterprise 1.0 に対応した「Movable Type公式タグリファレンス 第2版」が発売されました。

Movable Type公式タグリファレンス 第2版 シックス・アパート株式会社 シックス・アパート株式会社 編著 RBB PRESS 2006-09-26 売り上げランキング : 6385 Amazonで詳しく見る by G-Tools

この本は、1年半ほど前に発売された 3.1 対応の「Movable Type公式タグリファレンス」を大幅に改訂したもので、各タグの使用例と表示イメージ・関連アトリビュート・バージョン毎の対応等が分かりやすく記されています。
付録として「バージョンの違いとプラグインタグ一覧」も掲載されています。

• はじめに
• 本書の読み方
• chapter 1 ウェブログ全般タグ
• chapter 2 エントリー関連タグ
• chapter 3 コメント関連タグ
• chapter 4 アーカイブ関連タグ
• chapter 5 カテゴリー関連タグ
• chapter 6 エントリータグ関連タグ
• chapter 7 カレンダー関連タグ
• chapter 8 トラックバック関連タグ
• chapter 9 検索機能関連タグ
• chapter 10 システム関連タグ
• chapter 11 TypeKey関連タグ
• chapter 12 その他のタグ
• chapter 13 グローバル・タグ・アトリビュート
• chapter 14 日付時刻関係アトリビュート
• 付録 バージョンの違いとプラグインタグ一覧

3.3 対応のタグリファレンスが掲載されている書籍はこれまで「Movable Typeで今日から始めるカスタムブログ―3.3完全対応」のみでしたが、タグリファレンスに特化したシックス・アパート編の公式版が出版されたことで、用途に応じた購入の選択肢が広がったと言えるでしょう。

カスタマイズ記事で、これまで作ってきたサンプルをひとつのページにまとめてみました。

サンプルのページ

各記事および、記事中で紹介しているサンプルへのリンクを掲載しています。

は、「ニュー・シネマ・パラダイスのテーマ」の作曲者で有名ですが、幼少時代、彼の母がエンニオにこう言ったそうです。