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

月送りカレンダーにリアルタイムカレンダーを適用する場合の修正手順です。月送りカレンダーを使われている方がリアルタイムカレンダーを導入した時に「うまく表示されない」という質問を以前から時々受けておりましたので、改めてまとめてみました。

ポイントは次の2点です。

• 「アーカイブ・ファイルのテンプレート」修正
  拡張子が .html になっている月送りカレンダー用ファイルの拡張子を .php に変更します。
• テンプレートの修正
  月送りカレンダー用ファイルを呼び出している各テンプレートの、iframe タグに記述されている月送りカレンダー用ファイル名を変更します。

なおリアルタイムカレンダーに変更する手順は本来のエントリーをご覧ください（この記事は前準備のみ記しています）。

１．「アーカイブ・ファイルのテンプレート」修正
月送りカレンダーの２項にある「ファイルの関連付け（管理ページの「ウェブログの設定」→「アーカイブの設定」）」では、「アーカイブ・ファイルのテンプレート」を

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

と設定していますが、ご覧の通り拡張子が .html で出力するようになっています。これを

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

に変更します。変更が終わったら保存・再構築してください。

２．テンプレートの修正
月送りカレンダーの３項にある「カレンダーの設置」では、 iframe タグの内容は下記のようになっていると思います。

<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.html" width="150" height="115" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>

これが各テンプレート（メインページ／カテゴリーアーカイブ／月別アーカイブ／個別エントリーアーカイブ等）から実際にカレンダーを呼び出して表示する部分ですが、呼び出すファイルの拡張子が .html となっているため（赤色部分）、この状態では xxxxx.html というファイルしか呼び出せません。
ということで .html を .php に修正します（青色部分）。

<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.php" width="150" height="115" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>

Movable Type のサブカテゴリーリストで、親カテゴリーのエントリー数に、サブカテゴリーのエントリー数を合計して表示するカスタマイズです。SubCatCount プラグインを利用します。当サイトでは右側にあるカテゴリーリストの ( ) 部分に、サブカテゴリーとのエントリー数の合計を表示しています。

１．プラグインのダウンロード
下記のサイトの本文下の方にある「download」のリンクからアーカイブをダウンロードします。

Don't Back Down：Sub-Category Counting

２．プラグインファイルのアップロード
ダウンロードしたアーカイブを解凍して、その中にある SubCatCount.pl を plugins ディレクトリにアップロードします。

３．テンプレート修正
各テンプレートのサブカテゴリーリストを表示しているタグを下記のように修正します。

３．１ デフォルトテンプレートに追加：常にサブカテゴリーとの合計を表示
デフォルトテンプレートではカテゴリー数を表示する状態になっていませんので、単純に MTSubCatCount タグを追加します（青色部分）。この場合、サブカテゴリーをもつ親カテゴリーは常にサブカテゴリーのエントリー数の合計を表示します。

<div id="categories">
<h2>カテゴリー</h2>
 
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTSubCatCount$>]
<MTElse>
<li><MTCategoryLabel> [<$MTSubCatCount$>]
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>

３．２ デフォルトテンプレートに追加：親カテゴリーは自カテゴリーと合計の両方を表示
こちらはサブカテゴリーをもつ親カテゴリーに対して、自カテゴリーのエントリー数とサブカテゴリーのエントリー数の合計を両方表示する場合です。青色部分を追加します。

<div id="categories">
<h2>カテゴリー</h2>
 
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]<MTHasSubCategories>(<$MTSubCatCount$>)</MTHasSubCategories>
<MTElse>
<li><MTCategoryLabel><MTHasSubCategories> (<$MTSubCatCount$>)</MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>

３．３ 公開テンプレートに追加：常にサブカテゴリーとの合計を表示
公開テンプレートではカテゴリー数を表示する状態になっているので、MTCategoryCount を MTSubCatCount タグに置き換え（赤色部分を削除し、青色部分を追加）、カテゴリーのエントリーがない条件タグには新たに追加します（青色部分）。表示内容は３．１と同様です。

<div class="side">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$><$MTSubCatCount$>]
<MTElse>
<li><MTCategoryLabel> [<$MTSubCatCount$>]
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div>

３．４ 公開テンプレートに追加：親カテゴリーは自カテゴリーと合計の両方を表示
サブカテゴリーをもつ親カテゴリーに対して、自カテゴリーのエントリー数とサブカテゴリーのエントリー数の合計を両方表示する場合です。青色部分を追加します。

<div class="side">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]<MTHasSubCategories>(<$MTSubCatCount$>)</MTHasSubCategories>
<MTElse>
<li><MTCategoryLabel> (<$MTSubCatCount$>)
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div>

３．５ サブカテゴリーリストの折りたたみを利用：常にサブカテゴリーとの合計を表示
サブカテゴリーリストの折りたたみを利用している場合の修正方法です。赤色部分を削除し、青色部分を追加します。内容は３．１と同様です。

<div class="side">
<div id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$><$MTSubCatCount$>] <MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> [<$MTSubCatCount$>]<MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>

３．６ サブカテゴリーリストの折りたたみを利用：親カテゴリーは自カテゴリーと合計の両方を表示
サブカテゴリーリストの折りたたみを利用している場合で、サブカテゴリーをもつ親カテゴリーに対して、自カテゴリーのエントリー数とサブカテゴリーのエントリー数の合計を両方表示する場合です。青色部分を追加します。

<div class="side">
<div id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]<MTHasSubCategories>(<$MTSubCatCount$>)</div></MTHasSubCategories>
<MTElse>
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> (<$MTSubCatCount$>)<MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>

買って帰ると

ウェブスタンダードなエントリーを書くための基礎知識です。タイトルについて、他に詳しく書かれたサイトが色々ありますが、当サイトでもまとめて記しておきたいと思います。

HTML要素の構造

HTML文書は一つのhtml要素からなります。さらに html要素は head 要素と body 要素からなります。そして、body 要素の中で使える要素（タグ）は大きく「ブロックレベル要素」と「インライン要素」の二つに分類することができます。

ブロックレベル要素

「ブロックレベル要素」とは、見出し（h1?h6）・段落（p）・リスト（ul/ol ）・テーブル（table）など、文書の基本的な構造を示すものです。その名の通り「ブロック（矩形）」として、要素の前後に改行を伴った表示がされます。
ブロックレベル要素の主なタグは次の通りです。

p / h1?h6 / ul / ol / dir / pre / dl / div / noscript / blockquote / form / hr / table /fieldset / adress

インライン要素

「インライン要素」は強調文字（strong）・リンク（a）といったテキストに装飾をしたり機能をもたせる、あるいは改行（br）のようにテキスト内のある部分に対して何らかの意味づけをしたりする機能を持たせるものです。インライン要素の前後には改行は含まれません。*1
インライン要素の主なタグは次の通りです。

i / b / u / s / em / strong / code / a / img / object / font / br / span / iframe / input / select / textarea / label / button / layer

なお単なるテキストもインライン要素に含まれます。

ブロックレベル要素とインライン要素の関係

ブロックレベル要素とインライン要素を記述するにあたって、次のような関係（制約）があります。エントリーの記述にあたって気をつけなければならないものを挙げておきます。

• ブロックレベル要素の内容に、他のブロック要素やインライン要素を含むことができます（例外あり）
• インライン要素の中にブロックレベル要素を含むことはできません
• p 要素はブロックレベル要素ですが、子要素としてインライン要素しかもつことができません
• div 要素・blockquote 要素は子要素としてブロックレベル要素しかもつことができません

その他

• ul / ol / dl / hr / table の各要素の内容モデルは決まっています（例えば ul は li ）
• HTML4.0/XHTML1.0 Strict の場合、body要素の直接の子要素としてインライン要素を記述することはできません（Transitional はOK）
• li / dt / dd / td / tr 等は「内容モデル（ある要素の子要素になることができる要素）」として扱われるだけで、どちらの要素にも該当しません *誤解がありましたらご指摘ください

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

• NEXTindex：HTML 文書とはなんだろうか
• The Web KANZAKI：ブロックレベル要素とインライン要素
• ぴよぴよ実験室：HTMLメモ（for 自分）
• とほほのWWW入門：HTMLのタグと要素

以上です。この続編として、Movable Type でウェブスタンダードなエントリーを書くためのカスタマイズ方法について記していきたいと思います。

*1：CSSの display プロパティでブロックレベル要素として表示することも可能です

東洋経済新聞社の週間東洋経済・7月30日号に「ブログ資本主義」というタイトルでブログの特集がされています（計16ページ）。表紙は「はてな」の近藤敦也社長です。

前半はU30（アンダー30）によって立ち上げられた著名なカンパニーと「韓流ブログ」サイ・ワールドの台頭が取り上げられ、その間に「ブログ知識12選」として、基本的なブログの知識から「ブログで稼ぐ方法」「ブログが検索エンジンの上位に来るって本当？」「『ブログ作法』のススメ」等、常識的な観点でのワンポイントが記されています。
後半は「ビジネスブログ11の事例研究」と題して各企業や自治体・大学での導入事例が紹介されています。個人的には企業ブログとの関わりはないのですが、現在の普及ぶりを目の当たりにすることができ、企業レベルでも今後さらに浸透していく気配を感じさせます。

紹介されているブログを直接訪れても記事に書かれているような実感はわかないと思います。そういう意味でこういったブログ界を俯瞰し動向を把握できる記事に時々お目にかかれるというのはありがたいことです。
PC系雑誌のやや似通ってきたブログ特集（失言）に食傷気味の方にはお勧めです。まだ発売中と思いますので気になる方は本屋に行きましょう。東洋経済新聞社のサイトから単品購入もできるようです。

個別エントリーアーカイブ／コメント・プレビュー／コメント・エラーの各コメント欄を整形しました。コメント欄にあるTypekeyバナーの配置は、以前から気に入っていた Ogawa::Memoranda さんのコメント欄のアイデアを勝手ながらそのまま拝借させて頂きました。ありがとうございます。

またTypeKeyサイン・イン後の日本語ニックネームが文字化けする件が残っていましたので、TypeKeyでサイン・インしても表示が変わらない問題を対処を参考に対処しました。

整形に伴って、TypeKeyサイン･イン前後のメッセージをそれぞれ

TypeKey ID を使ってサイン・インしてください。
　　　　　　↓
TypeKeyサイン・イン

サイン・インを確認しました、hogehogeさん。コメントしてください。 (サイン・アウト)
　　　　　　↓
hogehogeさんのサイン・インを確認しました(サイン・アウト)

に変更してみました（青色はリンクを示しています）。

ということで、ここではTypeKeyサイン・インのメッセージのカスタマイズ方法を載せましたので参考になれば幸いです。なおこのカスタマイズはTypekeyの設定が有効かつ、サイン・インしなくてもコメントが可能になっている状態が前提です。

個別エントリーアーカイブ

個別エントリーアーカイブにあるメッセージを変更する場合、個別エントリーアーカイブの赤色部分を青色に修正します。修正前の状態はデフォルトテンプレートと公開テンプレートの2種類について掲載しておきます（若干違ってましたらお許しを）。

デフォルトテンプレート（抜粋：変更前）

<MTIfRegistrationAllowed>
<script type="text/javascript" src="<MTCGIPath><MTCommentScript>?__mode=cmtr_name_js"></script>
<script language="javascript" type="text/javascript">
<!--
if (commenter_name) {
    document.write('サイン・インを確認しました、', commenter_name, 'さんのサイン・インを確認しました (<a href="<$MTRemoteSignOutLink static="1"$>">サイン・アウト</a>)');
} else {
    document.write('TypeKey ID を使って <a href="<$MTRemoteSignInLink static="1"$>"> TypeKey サイン・インする</a> ');
}
// -->
</script>
</MTIfRegistrationAllowed>

公開テンプレート（抜粋：変更前）

<MTIfRegistrationAllowed>
<script type="text/javascript" src="<MTCGIPath><MTCommentScript>?__mode=cmtr_name_js"></script>
<script language="javascript" type="text/javascript">
<!--
if (commenter_name) {
    document.write('サイン・インを確認しました、', commenter_name, 'さん。コメントしてください。 (<a href="<$MTRemoteSignOutLink static="1"$>">サイン・アウト</a>)');
} else {
    document.write('TypeKey ID を使って <a href="<$MTRemoteSignInLink static="1"$>"> サイン・イン</a> してください。');
}
// -->
</script>
</MTIfRegistrationAllowed>

変更後

<MTIfRegistrationAllowed>
<script type="text/javascript" src="<MTCGIPath><MTCommentScript>?__mode=cmtr_name_js"></script>
<script language="javascript" type="text/javascript">
<!--
if (commenter_name) {
    document.write(commenter_name, 'さんのサイン・インを確認しました(<a href="<$MTRemoteSignOutLink static="1" encode_html="1"$>">サイン・アウト</a>)');
} else {
    document.write('<a href="<$MTRemoteSignInLink static="1" encode_html="1"$>">TypeKey サイン・イン</a>');
}
// -->
</script>
</MTIfRegistrationAllowed>

コメント・プレビュー／コメント・エラー

個別エントリーアーカイブはテンプレートの変更だけで可能ですが、コメント・プレビュー／コメント・エラーにあるメッセージを変更する場合、プログラム（context.pm）と言語変換用のファイル（ja.pm）を修正する必要があります。カスタマイズ前にファイルのバックアップをとるか、エディタで履歴を戻せるようにしておいてください。

まず lib/MT/Template/Context.pm の1335行目辺り（3.171-ja の場合）にある下記のスクリプトの赤色部分を削除します。

        if ($rem_auth_token && $registration_allowed) {
            $result .= $javascript;
            $result .= MT->translate_templatized(<<HTML);
<script language="javascript" type="text/javascript">
<!--
if (getCookie("commenter_name")) {
    document.write('<MT_TRANS phrase="Thanks for signing in,"> ', '$commenter_name', '<MT_TRANS phrase=". Now you can comment."> (<a href="$path$comment_script?__mode=handle_sign_in&$static_arg&entry_id=$entry_id&logout=1"><MT_TRANS phrase="sign out"></a>)');
} else {
    document.write('<MT_TRANS phrase="If you have a TypeKey identity, you can " escape="singlequotes"><a href="$signon_url$lang$needs_email&t=$rem_auth_token&v=$tk_version&_return=$path$comment_script%3f__mode=handle_sign_in%26$static_arg%26entry_id=$entry_id"> <MT_TRANS phrase="sign in" escape="singlequotes"></a> <MT_TRANS phrase="to use it here." escape="singlequotes">');
}
// -->
</script>
HTML

削除したら一旦サイトからコメントの確認を実行してエラーが出ないことを確認してください。もしエラーが出てコメント・プレビュー画面が正常に表示されなくなった場合は削除部分を一旦元に戻します（一番最初の状態に戻せばきちんと表示されます）。そして削除箇所に誤りがないか確認して再度行ってください（「'」の有無に気をつけてください）。

正常に動作するようになったら、次に lib/MT/L10N/ja.pm を編集します。その前に日本語変換の仕組みについて説明します。
例えば「?さん。コメントしてください。」というメッセージは、上のスクリプトの青色

<MT_TRANS phrase=". Now you can comment.">

の部分にあたります。"MT_TRANS" は言語変換用のタグです。このタグの phrase 属性に記述された 「. Now you can comment.」をキーにして、ja.pm に記述された

'. Now you can comment.' => 'さん。コメントしてください。',

という行を探し、「. Now you can comment.」を「さん。コメントしてください。」に変換し、画面に表示します。
なお Context.pm には日本語を直接記述しないでください（文字化けします）。

さて、Context.pm の編集で最初のメッセージから下記の赤色部分が削除されました。

TypeKey ID を使ってサインインしてください。
 
サイン・インを確認しました、hogehogeさん。コメントしてください。 (サイン・アウト)

後はサイン・イン後のメッセージ「さん。コメントしてください。」を「さんのサイン・インを確認しました」に変更するだけです。これは ja.pm にある

'. Now you can comment.' => 'さん。コメントしてください。',

を

'. Now you can comment.' => 'さんのサイン・インを確認しました',

に変更すればOKです。なお同じキーが何ヶ所かありますが、変更する文字列の少し上に

## lib/MT/Template/Context.pm

と書かれてありますのでその下にある一番近い該当の文字列を変更してみてください。もし変換されないようでしたら他の箇所も検索して変更してみてください。

以上です。なお、MT_TRANS タグの phrase 属性値、つまりキーとなる英文のメッセージを新しく作ることも可能です。つまり、それに対応する日本語が追加できます。あと ja.pm は行の前にTAB文字が入っていますが、TABがなくても問題ありません。
またコメント・プレビュー／コメント・エラーのコメント欄付近は Context.pm の内容を変更することでレイアウトをやメッセージの追加・変更が可能です。腕に自信のある方はチャレンジしてみてください。変更箇所のポイントは

sub _hdlr_comment_fields {
　　　　　　　：
}

の中に

　　：
return MT->translate_templatized(<<HTML);
　　　：
　（タグ）
　　　：
HTML
 
$result .= MT->translate_templatized(<<HTML);
　　　：
　（タグ）
　　　：
HTML
　　　：
　（略）

と、「<<HTML」と「HTML」で括られた部分に、実際に表示されるタグ等が記述されていますので、ここにHTMLタグやメッセージ変換用タグを記述することができます。括られていない他の部分はプログラムですのでご注意ください。

BlogPeople の「List Me!」を XHTML valid にするカスタマイズです。

BlogPeople のサービスのひとつに、他のブログピープル会員が簡単にあなたのサイト情報をリンクリストに追加することができる「List Me!（私を登録）」があります。当サイトでは下記のような形式のリンクになっています。

<a href="javascript:void(bloppop=window.open('http://www.blogpeople.net/addlink.jsp?n=1&u=http%3A%2F%2Fwww.koikikukan.com%2F&ti='+escape('<$MTBlogName encode_html="1"$>'),'blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes'));">List Me!</a>

が、これをページに貼り付けるとThe W3C Markup Validation Serviceで以下のようなエラーと、これと似たようなメッセージが計12個表示されます。つまり「List Me!」を表示することで valid でなくなってしまいます。

Line xxx, column xx: cannot generate system identifier for general entity "u"
 
...//www.blogpeople.net/addlink.jsp?n=1&u=http%3A%2F%2Fwww.koikikukan.com%2F&ti=

これを回避するため、最初に考えたのは、リンクから一旦空のウィンドウを開き、そこから BlogPeople の JavaScript を起動するという案です（=メインページでエラーにならなければ良い）。

最初のリンクを下記のように書き換えてウィンドウ（ここでは bp.html）を開く
<a href="javascript:void(bloppop=window.open('http://www.koikikukan.com/bp.html','blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes'));">List Me!</a>
 
　　　　　　　　　　↓
 
新しいインデックステンプレート（bp.html）を作り、この中で自動的に JavaScript を実行するように記述
<body onload="window.location.href = 'http://www.blogpeople.net/addlink.jsp?n=1&u=http%3A%2F%2Fwww.koikikukan.com%2F&ti='+escape('<$MTBlogName encode_html="1"$>');">

こういったテクニックを用いれば valid かつ正常に表示されるようですが、やや面倒です。

さて、The W3C Markup Validation Service のエラーをよくみると、後方に

Line xxx, column xx: entity was defined here
 
...://www.blogpeople.net/addlink.jsp?n=1&u=http%3A%2F%2Fwww.koikikukan.com%2F&ti

とあります。これが本来のエラーで、XHTMLではページ内の "&" を "&amp;" と記述する必要があります。URLでも同様です（HTML 2.0の時からこの点も明記されていましたが、ブラウザは "&" のままでもきちんと処理するように求められていたこともあり、これでも機能していました *1）。

つまり「List Me!」のリンクは下記のように "&" の後ろに青色の "amp;" を追加するだけで valid になります。リンクをクリックした時のページ内容が元の設定の時と同じことも確認しています。

<a href="javascript:void(bloppop=window.open('http://www.blogpeople.net/addlink.jsp?n=1&amp;u=http%3A%2F%2Fwww.koikikukan.com%2F&amp;ti='+escape('<$MTBlogName encode_html="1"$>'),'blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes'));">List Me!</a>

2005.07.25 追記
コメントでお分かりの通り、Ogawa::Memoranda さんよりアドバイス頂きまして、valid かつ JavaSript がOFFでも使えるスクリプトを提供して頂きました。この場をお借りして改めてお礼申し上げます。

元のスクリプトの代わりに下記のタグを表示したい位置に設定します（「List Me!」の文言以外は教えていただいたものをそのまま掲載させて頂いてます）。nofollow も付与されているというきめ細かさ。

<script type="text/javascript">
function popup_blop(url) {
    var c = url.indexOf('ti=');
    url = url.substr(0,c+3)+escape(decodeURIComponent(url.substring(c+3,url.length)));
    window.open(url,'blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes');
}
</script>
 
<a title="List Me!" href="http://member.blogpeople.net/addlink.jsp?n=1&amp;u=<$MTBlogURL encode_url="1"$>&amp;ti=<$MTBlogName encode_url="1"$>" onclick="popup_blop(this.href);return false;" onkeypress="popup_blog(this.href);return false;" rel="nofollow">List Me!</a>

*1：The Web KANZAKI：XHTMLの書き方と留意点より引用

The W3C Markup Validation Serviceが配布している「XHTML 1.0 Transitional」であることを示すバナーを右下に表示しました。valid であることを確認できているのは今のところトップページのみですので予めご了承ください。

先日買った Designing with Web Standards をようやく読破しまして、ウェブスタンダードなサイトを作ることの重要性を改めて認識致しました（CSSはハックを利用しているので valid ではありませんが）。ウェブスタンダードのスキルがほとんどない状態から1年余りでそれなりに身につけられたのはラッキーだったと思います。
ダジャレMovable Type のテンプレートやカスタマイズを中心に運営しているサイトですので、今後はできるだけウェブスタンダードに準拠する内容にできればと考えています。またこれまでに公開してきたエントリーでウェブスタンダードに準拠していない（またはそうであることを示唆していない）内容については適宜訂正していきたいと思います。

なお BlogPeople の List Me!! が Validation Service にひっかかっていたのですが、カスタマイズによってクリアできました。これについては追ってエントリーしたいと思います。

本日、BlogPeopleのURLを変更しました。こちらで変更する前にURLを手動で変更くださっていたサイトさんがかなり増えてきたのを発見して（ありがとうございます）、あわてて変えました。

さて、BlogPeopleのURLは、メニューにある「サイト情報の設定/変更」で簡単に変更できるのですが、これを行うとこれまでの被リンク情報が消滅してしまいます。被リンク数を維持したままURLを変更するには、メニューの「各種申請」をクリックした次のページにある「サイトURLの変更・追加申請」から申請します。
参考サイトは以下です。ありがとうございました。

• Modern Syntax：BlogPeopleに機能追加
• caramel*vanilla：BlogPeopleのリンクについて

昨晩申請して、本日の午前中には作業完了のメールを頂きました。この作業は人手を介して行われているようですが、迅速に対応くださりありがとうございます。

あとは重複リンクを整理したいところです（600より下回らない程度に）。

中継君はBlogPeopleリンクリスト等の表示の遅延を避けるため、キャッシュに一旦保存したものを表示するためのツールです。便利そうだと思っていましたが動作や設定方法がいまひとつ分からなかったので（バカ）、BlogPeople を例に Javascript の基本動作から中継君の設定方法まで説明します。
Windows自宅サーバでの利用ですのでパーミッションの設定等もれてましたらお許しください。

2006.10.24 追記：簡単な設定で中継君とほぼ同様の機能を実現する「BlogPeople 等のリンクリストによる表示の遅延を解消する（その1：JavaScript編）」を公開しています。

JavaScript の基本的な動作
BlogPeople のリンクリストを取得するタグは、

<script language="javascript" type="text/javascript" src="http://www.blogpeople.net/display/usr/xxx.js"></script>

となっています。当サイトで折りたたみやツリー化等のカスタマイズをされている方には馴染みのあるこの書き方は、<head> ? </head> に挿入している JavaScript 外部ファイルのインクルードと同じで、src 属性に記述されたURLを実行し、その結果を type 属性（MIMEタイプ）に準じた形式で出力します。ここでは "text/javascript" なのでJavaScriptとして認識されます。
つまり、このタグが埋め込まれたページをブラウザで実行すると、

http://www.blogpeople.net/display/usr/xxx.js

が実行され、結果としてリンクリストを表示するためのJavaScript文

document.write('<div class=\'blogpeople-main\'>');
document.write('<a href=\'http://www.blogpeople.net/cgi-bin/click.cgi?u=http%3A%2F%2Fxxx\' target=\'_blank\' title=\'更新日:05年07月21日(Thu) 12時28分 \' >hogehoge1blog</a><br />');
document.write('<a href=\'http://www.blogpeople.net/cgi-bin/click.cgi?u=http%3A%2F%2Fxxx\' target=\'_blank\' title=\'更新日:05年07月21日(Thu) 12時31分 \' >hogehoge2blog</a><br />');
　　　　　　　　　　　　　　　　　　　　：

を取得・表示します（?）。
このタグを実行して BlogPeople リンクリストとして表示するまでの時間は、ほとんど

http://www.blogpeople.net/display/usr/xxx.js

の応答時間に依存します。皆さんのページに埋め込まれた同じようなURLを、ブラウザのアドレスに直接入力して実行すれば、応答時間を体感できると思います。

中継君の役割
中継君は CGIスクリプトで、あるURLの実行結果をキャッシュ（一時的なファイル）に保存して、それを表示するという機能をもっています。
中継君を起動するURLのイメージは下記のようになります。

http://domain/path/to/jc.cgi?<これまでに起動していたURL>

このURLを表示したいページの任意の場所に埋め込みます。
例えば、先の BlogPeople リンクリストの JavaScript のタグであれば、

<script language="javascript" type="text/javascript" src="http://www.blogpeople.net/display/usr/xxx.js"></script>

を

<script language="javascript" type="text/javascript" src="http://domain/path/to/jc.cgi?http://www.blogpeople.net/display/usr/xxx.js"></script>

と、中継君のCGIスクリプトを実行するURL（青色）を挿入します（他に事前設定がありますがそれは別途）。この設定により、ブラウザがこの行を表示する時、まず

http://domain/path/to/jc.cgi?http://www.blogpeople.net/display/usr/xxx.js

というURL（=CGI）を実行します。これまで設定されていたURLは "?" の後ろに設定された形になっていまして、中継君のプログラムにパラメータ（query）として渡され、内部で起動されます。

内部起動して取得したデータ（?）をキャッシュに一旦保存し、さらにそれををブラウザに表示します。2回目以降（厳密には指定した周期になるまで）はこのキャッシュにあるデータをブラウザに表示するので、httpアクセスによる表示の遅延を削減することができます

中継君は分単位でキャッシュの取得周期を設定できます。例えば10分に設定していれば、最初にキャッシュを取得してから約10分間はキャッシュのデータを使用しますが、10分後には正規のURLにアクセスして新しいデータを取得し、キャッシュに保存します。なお旧バージョンではキャッシュが複数生成されたようですが、現在はひとつのURLに対して1つしか生成されないようになっています（=常に上書き）。

先の記述で「遅延0」ではなく「遅延を削減」としているのは、次の周期には正規のURLでデータを再び取得するため、たまたまその回に当たると表示が遅くなる時があるためです。

設置方法

１．アーカイブのダウンロード
中継君のページより、最新記事の下にある「ダウンロード」をクリック。次のページで「中継君 Ver.1.4.2（この記事の投稿時点）」のリンクをクリックしてダウンロード。ダウンロードしたらアーカイブを解凍します。下記のファイルがあることを確認してください。

jc.cgi

ttl_sample.txt

２．ファイルの修正

Perlのパス
jc.cgi を任意のエディタで開いて、使用しているブログがMovable Type の場合は、1行目の

#!/usr/local/bin/perl -w

を

#!/usr/bin/perl -w

に変更します。ここを修正せずに実行すると結果が何も返却されません（ブラウザから直接実行すると500 エラーになります）。

ホスト制限
特定のホストからアクセスされた場合だけ中継君を起動したい場合は、次の行の右辺に該当のホストを追加します（追加方法はファイルに記載されています）。

my @url =  ("");

どこからアクセスされても常に起動する場合はデフォルトの状態でOKです。
この機能の動作は、ここに設定されたデータと HTTP_REFERER と比較して、完全一致または部分一致した場合、フィルタリングします。フィルタ対象のホストであれば何も（キャッシュのデータも）返却せずに処理を終了します。

キャッシュ周期
データがキャッシュされてから次にキャッシュするまでの周期を変更したい場合は次の行の右辺を変更します。

my $cache_ttl = 2 * 60;

デフォルトは120分（2*60）でキャッシュを更新する設定になっています。このデータは、キャッシュに対してファイルテスト演算子（-M オプション）を実行し、キャッシュが更新されてからどれだけの時間が経過しているかを調べることで実現しています。

アクセスするURL別に周期を設定したい場合は ttl.txt というファイルを用います。例えば BlogPeople リンクリストと MyBlogList の周期をそれぞれ 3時間・1時間に設定する場合は、ttl.txt に

www.blogpeople.net/display/usr/ 180
list.myblog.jp/list 60

と記述します。このファイルの設定は先の $cache_ttl の設定より優先されます。一律同じ周期でよければ ttl.txt の設定は不要です（ファイル自体不要）。
BlogPeople については ttl_sample.txt にデフォルトで設定されていますので、このファイル名を ttl.txt に変更するだけで使えるようになります。

３．ファイルのアップロード
jc.cgi と、必要に応じて ttl.txt を CGI が実行できるパスにアップロードします。ttl.txt は jc.cgi と同じディレクトリにアップロードしてください。jc.cgi のパーミッションは他の CGIファイルと同じように変更してください（755 とか 777 等）。

４．cache ディレクトリの作成
ファイルをアップロードしたディレクトリの直下に cache というディレクトリを作成します。このディレクトリは中継君が最初に起動された時に自動的に作ってくれますが、パーミッションが誤っていると作成されないので予め作っておいた方が無難です（強制している訳ではありません）。
このディレクトリ配下にキャッシュを自動的に作りますので、cache ディレクトリのパーミッションを 755 や 777 等に変更しておきます（中継君による自動生成では 755 にしているようです）。

５．テンプレートの変更
再掲になりますが、各テンプレートにある BlogPeople リンクリスト等を起動するタグに、中継君のURLを挿入します。

<script language="javascript" type="text/javascript" src="http://www.blogpeople.net/display/usr/xxx.js"></script>

を

<script language="javascript" type="text/javascript" src="http://domain/path/to/jc.cgi?http://www.blogpeople.net/display/usr/xxx.js"></script>

とします。jc.cgi が mt.cgi や mt-comments.cgi と同じディレクトリにあれば、

<script language="javascript" type="text/javascript" src="<$MTCGIPath$>jc.cgi?http://www.blogpeople.net/display/usr/xxx.js"></script>

とするのが良いでしょう。
挿入したら、保存・再構築します。

６．中継君の実行
挿入したページをブラウザで表示させます。初回はキャッシュがありませんので、キャッシュを作るために正規のURLにアクセスします。正常に動作すれば設定前と同様にリンクリスト等が表示されます。
心配であれば、URLをブラウザに直接入力して実行してみてください（URLに正規のURLを "?" で付けることもお忘れなく）。

http://domain/path/to/jc.cgi?http://www.blogpeople.net/display/usr/xxx.js

正常に動作すればリンクリスト等の結果が表示されます。2回目以降はサクッと表示される筈です。

以上です。なお中継君の実行には Perlモジュールの LWP が必要です（多分主要なレンタルサーバでは大丈夫と思います）。

リンクのページに移動した BlogPeople のリンクリストを各ページに表示するようにしました。巷で有名な中継君を使っていますが、手を加えてもう少し軽く表示するようにしています。

なおリストの更新は正常にできていない状態ですので、予めご容赦ください（リンクのページのリンクリストは適正に更新されます）。MyBlogListも可能であれば追って追加します。

リニューアルで Mozzila 系のブラウザに中央カラムのコンテンツ折りたたみを導入しなかった理由です。

Netscape または Firefox で、サイドバー（左右どちらでも良い）の表示が中央カラムより長い状態で、中央カラムの記事の折りたたみ（閉じる→開く）を行うと、開いた分の長さをサイドバーの余白として継承してしまいます。つまり記事を開いた途端にページ全体が下にのびてしまいます。中央カラムがサイドバーより長い状態であれば発生しません。

言葉で説明するのは難しいのでもぬけのからの個別エントリーアーカイブで試して頂けると一目瞭然です。このページでどちらかのサイドバーの長さを中央カラムより長い状態にして「続きを読む」をクリックすると、長いほうのサイドバーの下に余白が生じます。この余白は中央カラムを開いた分の長さと等しくなります。
またその後でサイドバーを折りたたんでも高さは変わりません。

かなり試してみましたが、今のところ解決策はみつかっておりません。そういう訳で継続調査中です。もし解決策をご存知の方がいらっしゃいましたらご教示頂ければ幸いです。

サイトリニューアルしました。以下主な変更内容です。ブラウザは WindowsXP+IE6.0/Netscape8.0/Firefox1.0/Opera8.0で確認しています。Mac 環境では確認できておりませんので予めご容赦ください。以下、主な変更内容です。

• 3カラムスタイルはこれまで通りですが、絶対値指定ではなく float 指定によって可変3カラムを実現しています（IEでは幅を狭くし過ぎると中央のカラムがおちることがありますのでご注意ください）。また左右にマージンをつけ、下部にフッタを与えてコンテンツ全体を括るようにしてみました。随分前からこのスタイルにしてみたかったのですが、スキル不足でできませんでした。そういう意味では目標達成というところです。
• 中央カラムのコンテンツを折りたためるようにしました。タイトルまたは概要後方にあるリンクをクリックすることで切り替えられます。折りたたみ状態も保持します。また折りたたみによって過度なスクロールを避けられるので、カテゴリーアーカイブと月別アーカイブはページ分割をなくしてみました。メインページは逆にページ分割を導入して1ページ毎の件数を減らしてスクロール量をさらに絞ってみました。
  なおこの機能はIEのみで、Mozzila系は不具合（またはスキル不足）のため折りたたみできない設定にしています（詳細は別途エントリーします）。
• ページ内の空白を増やしたので左右のサイドバーを折りたためるようにして、コンテンツの情報量を確保できるようにしました。ナビゲーションバーの「«」「»」で切り替わります。これにより3カラムおよび仮想的な2カラム/1カラムを実現しています。状態も保持します。
  本当は折りたたんだ場合に反対のカラムへメニューを表示する予定でしたがIE系のブラウザで正常に動作しないことと、ページを切り替えた際に状態を保持する実装が面倒なため、とりあえず隠すだけにしました。
• タイトルバナー下にナビゲーションバーを追加しました。ナビゲーションからのジャンプ時はロールオーバー状態を保持してユーザビリティを向上させています。右サイドバーの「menu」をクリックすると折りたたむこともできます（お遊びレベル）。
• 各アーカイブページにパンくずリスト（らしきもの）を追加して現在位置を把握できるようにしました。
• スタイルシート切り替えにより公開テンプレートのデザインを表示できるようにしています。右サイドバーの「Stylesheets」の "Original" で選択できます。
• トップページは XHTML1.0 valid にしました。ただしコメントやトラックバックについてはスコープ外ですのでご容赦ください。また過去のエントリーは文法違反のコンテンツが満載なため、これからボチボチ修正していきます。
• BlogPeople/MyBlogList等のリンクは独立したページに移動しました。これは float による3カラムの場合、中央カラムを最後に表示しなければならないため、リンクリストの影響で中央カラムの表示を遅延させないための考慮です。2005.07.23 追記：中継君を使って表示しています。

リンク誤りがありましたらお知らせください。それでは今後ともどうぞよろしくお願い致します。

追記：
リニューアル中に不具合があり、コメント・トラックバック受信を一時停止していました。7/19 2:10頃回復しています。

2005.07.19 追記
不具合の対処後、文法エラーが多発していましたので修正しました。またトップページは valid XML1.0 になりましたので記述の一部を削除しました。

出遅れましたが14日、Movable Type 3.17-ja がリリースされました。

Movable Type：Movable Type 3.171日本語版の提供を開始

search_templateで翻訳されていなかった箇所が修正されているようです。他にもいくつか修正されています。

3.17-ja との差分ファイルは下記の通りです。3.17-ja をご利用の方で正規の手順でのアップグレードが面倒な方はファイルの差し替え＆再構築のみで大丈夫と思います。

docs/known-issues.html

docs/mtchanges.html

lib/MT.pm

lib/MT/Mail.pm

lib/MT/Util.pm

lib/MT/App/CMS.pm

lib/MT/App/Search.pm

lib/MT/L10N/ja.pm

php/mt.php

動作を保証するものではありませんが、以前もこれでうまくできました。

3日経っているとさすがに先を越されてました（比較ツールは実行しています）。

greenplastic.net：MT 3.2b1とMT 3.171-ja

突然ですが、本テンプレートご利用サイト「++Open My Heart++」さんのご紹介です。mixi 「小粋なユーザコミュニティ」のイベントの一環です。

管理者のお名前は ralu さん。昨年の10月よりテンプレートを使っていただいておりまして、すっきりとした印象のデザインにバナーのイラストがさわやかな印象です。私は phptpshop や Illustrator を持っている割に全く駆使できておらず、こういう素敵なイラストを描くことができりませんので羨ましい限りです。

記事の方ですが、最初に目に止まったのは数日前の「ThinkPad R31 (ファン･アセンブリー&ヒートシンク編)」です。
ノートPCのファンから異音が聞こえて部品を注文、自力で取替えられています。「R31」は2年半程前のモデルでしょうか。交換はもちろん、分解前に交換部品を特定されていたりするので、PCにかなり明るい方のようです。修理もそうですが、この際自作PCにも一度チャレンジされてみてはいかがでしょうか。私は機会があれば一度作ってみたいと思ってます（今のところ必要性はないのですが）。
なにはともあれ無事に直って良かったです。次は何編か楽しみです。（笑）

もうひとつ取り上げさせて頂いた記事は、昨年のエントリーより「ほぼ日手帳2005注文?」。
ほぼ日手帳は他のサイトでも記事をいくつか見かけてまして、手ごろな値段と豊富な機能がなかなか好評のようです。

私は数年前までバイブルサイズの手帳（filofax）を好んで使っていたのですが、年末にリフィルを買いそびれたとか、携帯にスケジュールが入れられるようになった等の理由で、ある年からぱったり使わなくなりました。が、どうもこの作戦ではスケジュールがきちんと把握できないみたいで、やはりきちんとした手帳が必要かなと思う今日この頃です（一番の問題は書いたスケジュールを確認しないことなんですが…）。

ちなみに以前は1週間1ページのリフィルを使ってました（毎日それほど書くこともないので）。そういう訳で来年はハードウェアに戻ってみてもいいかなと感じました。ネタがないようでしたら使用感想記を書いていただけると、2006年版を注文する判断材料になるかもしれません。（笑）

話題に乗り遅れて「言及リンク」について一言。「言及リンク、つまり『受信したトラックバックの記事にトラックバック先のリンク』がないと Google の PageRank が下がる」という情報については「問題なし」ということで既に収拾がついているようですので、ここではトラックバック先の情報が元記事に記載されていないトラックバックについての考えを述べたいと思います。

現状は、明らかに記事と無関係な内容のトラックバックスパムはプラグインでフィルタリングしていますが、トラックバック先の記事に当サイトの内容が記載されていないトラックバックやアフィリエイト系のトラックバックはそのままにしています。
残している深い理由は特にありません。そのままにしていても問題ないから、という程度です。その状態を、ここに訪れる方の大半が酷く不愉快に感じ、さらにそれが一定期間継続する、あるいはセキュリティ上の問題が発生するのであれば削除することも選択肢のひとつとして考えられますが、今のところその対象は英語でやってくるトラックバックスパムのみという認識です。

トラックバックスパムは特定の文字列でフィルタリングするようにしていますが、先日本当に普通の英文トラックバックを受信しました。Typekey関連のカスタマイズでお役にたてたようです。

GOODHYUN.COM：Even after Typekey authentication, MT requires sign-in again...

もし半角のみのトラックバックを一律フィルタしていたらこの方のサイトがカスタマイズを利用されたことを知ることはなかったと思います。
スパムは色々な単語でやってくるので、相変わらずイタチごっごの日々ですが、（半角のみのトラックバックを）受信できる状態にしておく価値はあるな、と感じた一件でした。

PageRank については意識していません。随分前にペナルティにひっかかったのかひっかかってないのか不明ですが、Google で1?2ページ目に表示されていた検索結果がかなり後方になってしまっているのがその原因かもしれません。それでも何故か毎日結構なPVをいただき、どこから（Yahoo？）か探し当ててテンプレートを取りにこられる方々がいらっしゃるのは本当に嬉しい限りです。

自サイトにとって送信して欲しい（？）トラックバックだけを受信しようと思っても現実的にそううまくはいきません。結局「…削除します」といったサイトルールを設けて運用対処されるケースが少なくないのですが、MT-Moderate プラグインでトラックバックを承認形式するという手もあります。やや面倒であれば言及リンクの話題で利用数が増えた Movable Type で言及リンクのない TrackBack ping を弾くプラグインがお手軽と思います。いずれにしても「受信したトラックバックを表示するのに送信サイトに言及リンクがない」という不公平感からは解消されると思いますし、機械任せである分、精神的な負担も減少するのではないでしょうか。

まとまりのない文章ですいません。まとめると、普通のトラックバックを頂いている方には心の中で感謝していますし、言及リンクのないトラックバックについてはこの新しいインタフェースを活用されているんだな、という気持ちで今後もスルーします。スパム以外で明らかに問題のあると思われるトラックバックは削除致しますが今のところはありません。

当サイトで公開している3カラムテンプレートは可変と固定の2種類がありますが、これをスタイルシート切替を用いて瞬時に切り替えるカスタマイズです。どちらのタイプにするか悩まれている方はこれで解消されるのではないかと思います。
とりあえず私のサイトの右にある「Stylesheets」で可変（Default）⇔固定（Fixed3Column）を切り替えられるようにしていますので、お試しください。全てのブラウザでの正常な動作は保証しておりませんので予めご了承ください。

以下、3カラム可変を使っている状態から3カラム固定のスタイルシートを追加する手順を説明します。3カラム固定から3カラム可変のスタイルを追加する場合は「固定」と「可変」を読み替えて、６項をスキップしてください。

１．3カラム固定スタイルシート用インデックス・テンプレートの作成
管理メニューの「テンプレート」→「インデックス・テンプレート」の「新しいインデックス・テンプレートを作る」をクリック。次のページで下記を設定します。

テンプレートの名前：スタイルシート（3カラム固定） *任意の名称でOKです

出力ファイル名：styles-site2.css

テンプレートの中身：テンプレートのページより3カラム固定のエントリーにジャンプしてスタイルシートをコピー＆ペースト

設定が完了したら保存・再構築します。

２．テンプレート修正
メインページ／カテゴリー・アーカイブ／日付アーカイブ／個別エントリーアーカイブ／コメント・プレビュー／コメント・エラーの各テンプレートのヘッダに設定されているCSSファイルの設定（赤色）を、下記のように変更します（青色）。

<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" title="Default" />
<link rel="alternate stylesheet" href="<$MTBlogURL$>styles-site2.css" type="text/css" title="Fixed" />

一番上に書かれたスタイルシートが起動時に使われ、新しいスタイルシートをその下に設定しています。href 属性に作成したスタイルシートのファイル名（styles-site2.css）、title 属性に任意の名称（Fixed）を設定します。この名称は次項のスクリプトで起動される際のキー情報になります。
設定が完了したら保存します。

使用するテンプレートでこの設定がもれているとスタイルを切り替えた状態でページを切り替えた際にスタイルがなくなることがありますのでご注意ください。なおその際はトップページ等に戻ってスタイル切替のメニューをクリックすれば元に戻りますので、スタイルが崩れても慌てないようにしましょう。

３．styleswitcher.js のダウンロード・アップロード
下記の公式サイトに styleswitcher.js があります。

A List Apart：Alternative Style: Working With Alternate Style Sheets

記事の下の方に「download」または「Download styleswitcher.js」というリンクがありますので、クリックして styleswitcher.js をダウンロードしてください。そしてダウンロードした styleswitcher.js をそのままローカル・サイト・パス（index.html と同じディレクトリ）にアップロードします。

４．テンプレートに styleswitcher.js の設定
２項で設定した各テンプレートについて <head>～</head> の間に下記を追加します。

<script type="text/javascript" src="<$MTBlogURL$>styleswitcher.js"></script>

設定が完了したら保存します。

５．切り替えメニューの設定
２項で設定した各テンプレートのサイドメニューに以下のタグを追加します。例は公開テンプレートの形式にあわせています。

<div class="sidetitle">
Stylesheet
</div>
 
<div class="side">
<a href="#" onclick="setActiveStyleSheet('Default'); return false;" onkeypress="setActiveStyleSheet('Default'); return false;">Default</a><br />
<a href="#" onclick="setActiveStyleSheet('Fixed'); return false;" onkeypress="setActiveStyleSheet('Fixed'); return false;">Fixed</a>
</div>

setActiveStyleSheet の後方にあるパラメータは、２項で設定した title 属性の名称（Default/Fixed）と一致するように設定します。
設定が完了したら保存・再構築します。

６．テンプレート修正
3カラム固定のスタイルシートはボックスモデルのCSSバグに対処するため、サイドバーの div タグを余分に付与しています。ここでは3カラム可変のテンプレートを元としているので２項で編集した各テンプレートに対し、下記のように青色部分を追加してください。

<!-- 左サイドバー開始 -->
<div id="links-left-box">
<div id="links-left">
　　　　　　：
</div>
</div>
<!-- 左サイドバー終了 -->
 
<!-- 中央コンテンツ開始 -->
　　　　　　：
<!-- 中央コンテンツ終了 -->
 
<!-- 右サイドバー開始 -->
<div id="links-right-box">
<div id="links-right">
　　　　　　：
</div>
</div>
<!-- 右サイドバー終了 -->

設定が完了したら保存・再構築します。

以上です。3カラム可変から固定に切り替えた場合、カラムずれが発生する場合がありますので、テンプレートのページのFAQにて類似した問題をご確認ください。またスタイルシートがキャッシュに残って変更が反映されない場合があるようですので、IEであれば更新ボタンをクリックしてみてください。

突然ですが、本テンプレートご利用サイト「MetLog」さんのご紹介です。mixi 「小粋なユーザコミュニティ」のイベントの一環です。

管理者のお名前は metro さん。プロフィールを拝見すると本業は企画／デザイン系の仕事をされているようで、ご利用のテンプレートもしっかりとご自身の色にカスタマイズされています。 何気に月別アーカイブの並びがデフォルトではなく、新鮮です。

さて、気になる記事の方で目に止まったのは「370km/hの8輪電気自動車」です。
元々車は好きなのですが、この近未来的な外観とトラックのように並んだタイヤはなかなか興味をそそられます。ナンバープレートもさりげなく「370」だったりします。
ガソリン車よりも燃費がよく加速がいいというのが信じられません。もしかしたら近い将来、モータースポーツも電気自動車になるのかもしれません。やけに静かなレースになりそうですが。
2008年から受注生産されるとのことでかなりそそられるのですが、車が収まる駐車場がないのが残念。

もうひとつ気になったのは「希薄な人間関係の有用性」。これはCNET Japan：ソーシャルネットワークと人間関係の希薄化からの引用で、役に立つコネや情報提供は「友人、親戚、長いつきあいのある同僚」といった強いつながりよりもソーシャルネットワークによって生まれた「弱いつながり」の人達からもたらされる、というものです。metro さんは「弱いつながりだからこその良い点もある」と述べられていますが、ブログに携わって1年余り、たしかに「弱いつながり」の方々によってもたらされた情報によって成り立っている気がします。そしてそういった関係も「強いつながり」の方々と同様、大事にしていきたいと思います。

余談ですが、元記事では締めくくりの言葉として

人と人とのつながりの真の強さは、そのつながりの中身と、そして両者が信頼関係を深めるために行った努力によって決まる?（中略）?最初のきっかけがどのようなツールによってもたらさたのかは重要ではない

と述べられています。物事の本質を見失わない、ということですね。

本サイトのドメインはDynDNSを利用させて頂いておりますが、このたび独自ドメインを取得致しました。新しいドメインは

www.koikikukan.com

です。これまでのドメインからもアクセスできます（Apacheの設定でとりあえず同じパスを参照するようにしています）。
先日のExpireされた件とは全く関係ありません。

Movable Type のデフォルト管理画面でのコメント・トラックバック表示数は 5・25・75・125 と間隔が広く、丁度いい具合の件数を表示させることができません。
ということで表示数を選択するプルダウンメニューに他の表示数を追加（または変更）するカスタマイズです。

変更するファイルはそれぞれ下記の通りです。

コメント用：tmpl/cms/list_comment.tmpl トラックバック用：tmpl/cms/list_ping.tmpl

例えばプルダウンメニューに10件を表示するメニューを追加する場合は、下記の青色部分を追加します。

<option value="5"<TMPL_IF NAME=LIMIT_5> selected="selected"</TMPL_IF>><MT_TRANS phrase="[quant,_1,comment,comments]" params="5"></option>
<option value="10"<TMPL_IF NAME=LIMIT_10> selected="selected"</TMPL_IF>><MT_TRANS phrase="[quant,_1,comment,comments]" params="10"></option>
<option value="20"<TMPL_IF NAME=LIMIT_20> selected="selected"</TMPL_IF>><MT_TRANS phrase="[quant,_1,comment,comments]" params="20"></option>

追加した行の数字（10）を全て一致させるのがポイントです。追加方法はコメント・トラックバックいずれも同じです。サンプルでは1行のみ追加していますが複数行設定することも可能です。

ダイナミックDNSサービスのDynDNSより本サイトのドメインがExpireされていました。本日午後より12時間ほど接続できない状態が続いてしまい、大変ご迷惑をおかけ致しました。この場をお借りしてお詫び申しあげます。

原因はIPアドレスが30日間アップデートされなかったためで、そのようなホストは静的IPアドレスであり、「本来ダイナミックDNSの対象外ではない」とみなされてしまったようです。現在使っているインターネット接続サービスは固定IPではないので、1ヶ月も同じIPだったとは思いもよりませんでした。
また5日ほど前にメールで警告がきていたのですが、元々英語のメールはほとんどSPAMメールなのでタイトルすら目を通していない状態でした。反省。

Expireされるのを防ぐためには、DynDNSのサイトにログインして該当のホスト情報を強制的に更新するしか手がないようです（以下警告メールより抜粋）。

You can "touch" your hostname and prevent it from being deleted simply by performing a manual, or forced, update.

有料サービス（$9.95/年）に登録すればExpire対象から外してくれるそうです。

ということで同じドメインを再取得しました。DynDNSをご利用の皆様、どうぞお気をつけください。

今日は私が作る

今日はネタを書く暇がなかったので、前のエントリーの追記にしようと思った内容を別エントリーにしました。お許しください。

で、「600被リンク用のバナー（左上）が存在する」ということで、この存在に全く気がついていませんでした（100被リンクのバナーと思い込んでたという噂も...）。ひとつ前のエントリーで教えて頂きました。もそさん、BlogPeople 主催者の nagasawa さん、ありがとうございました。

本家のサイトで Movable Type 3.2 の情報が提供されていました。

Movable Type：Movable Type 3.2 is coming

新機能のひとつである System Overview の邦訳が下記のサイトでエントリーされています

greenplastic.net：New in Movable Type 3.2: A home for administrators

System Overview は複数のウェブログを一括管理できる機能です。
順番にひとつずつ訳されている気配ですので、気になる方はウォッチしましょう。

アクセスカウンタをテンプレートに設置する方法です。
ここでは「夢カウンタ」の設置例を紹介します。

KENT WEB：Dream Counter

設置方法の説明は上記ページにありますのでここでは Movable Type の場合について説明します。
なおフリーのカウンタは他にも色々なものが出回ってます。このエントリーで紹介しているものより簡単なものもあると思いますので、ご自身で良いものを探してみてください。

１．カウンタ用スクリプトのダウンロード
Dream Counterのページより　dream.lzh または dream.zip をダウンロードします。ダウンロード後、解凍すると下記のファイルが表示されます。

dream.cgi

drinit.cgi

drmgr.cgi

gifcat.pl

index.dat

２．カウンタ素材のダウンロード
このカウンタには表示するためのカウンタ素材（0～9までの画像ファイル）が添付されていませんので、
素材をダウンロードする必要があります。
やり方が分からない方はとりあえず下記のカウンタ画像をお使いください。

下の couter.zip に上記のカウンタ画像が入っていますのでクリックしてダウンロードし、解凍してください。

counter.zip

３．設定ファイルの修正
dream.cgi および drmgr.cgi を任意のエディタで開いて、1行目の

#!/usr/local/bin/perl

を

#!/usr/bin/perl

に変更します。言い換えると mt.cgi の 1行目と同じ内容にします（といっても -w を付与する必要はありません）。
また drinit.cgi で下記の設定をしておくと良いでしょう。

$ip_chk = 1;

これは同一IPアドレスからのアクセスを重複カウントしない設定です。
その他の設定については公式サイトの説明を参照ください。

４．ファイルのアップロード
１項と２項のファイルをアップロードします。アップロードするディレクトリは CGIPath/count としています。各ファイルの配置とアクセス権は下記のようにしてください（上記サイトからの引用）。

CGIPath/count/dream.cgi  [705]
CGIPath/count/drmgr.cgi  [705]
CGIPath/count/drinit.cgi [604]
CGIPath/count/gifcat.pl  [604]
CGIPath/count/data [707] /index.dat [606] ← カウンタ値を保存するファイル
CGIPath/count/lock [707] /
CGIPath/count/gif1/0.gif … 9.gif ← カウンタ画像

gif1 および lock ディレクトリの名称は変更しないでください。lock ディレクトリは作成のみです。

５．テンプレートの設定
テンプレートに下記のタグを追加します。

<img src="<$MTCGIPath$>count/dream.cgi?id=index" alt="カウンタ" />

公開テンプレートであれば下記の部分を変更します。

<div class="sidetitle">
Counter
</div>
<div class="side-counter">
<img src="" alt="カウンタイメージ" />
<img src="<$MTCGIPath$>count/dream.cgi?id=index" alt="カウンタ" />
</div>

追加したら保存・再構築してください。これで正常に表示されればOKです。

６．カウンタ値の修正等
最初に立ち上げた時、カウンタの値は0から開始されます。これまでのカウンタ値を反映させたい場合は、

CGIPath/count/data/index.dat

にカウンタ値が設定されていますので、エディタで開いて任意の値に変更してください。

以上です。カウンタ自体の動作については Movable Type に依存するものではありませんので、不具合等につきましては公開サイトの情報より確認してください（当方の説明誤りについては速やかに修正致します）。

画像等を半透明にして表示する方法です。

通常の表示

半透明の表示

半透明にしたい画像のスタイルに次の指定を追加します。クラスセレクタは任意の名称をつけてください

.hogehoge {
    filter: Alpha(opacity=50); /* IE系 */
    opacity:0.5; /* Mozzila系 */
}

img 要素は下記です。

<img src="画像のURL" class="hogehoge" />

opacity はそれぞれ不透明にする割合を指定します。
なお上記の設定で確認できているのは Windows・IE6.0/Netscape7.1/Firefox1.0 です。Opera では有効にならないようです。