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

本サイトのサイドバー折りたたみ方式を変更しました。具体的には display: block によるリンクに変更しています。本当はカスタマイズ方法を今日公開する予定でしたが不具合が残っていることが発覚しましたので、すいませんがお披露目だけに留めさせてください。

デバグが完了次第、カスタマイズ方法を公開致しますのでしばしお待ちください。

IE5.x（Netscape4.xも）やIE6の後方互換モードではCSSの width, padding, border の解釈にバグがあるというのは巷で有名みたいで、ブログでCSSに関わりだした私は

今日の覚え書き：width解釈の違いへの対応策

の記事で初めてこの事実を知りました。それ以来随分と気になってましたが、関連の話題をエントリーします。

この問題について気になりながら放置していたのは、そもそも確認する IE5.x のブラウザがないのでモチベーションが上がらないという状態でした（IE6後方互換モードでやれば？というのはおいといて）。が最近になって昔使っていた（というか今も時々使っている）古いノートPCに Windows Update を全くやったことがないIEが搭載されているのを思い出し、即着手。Windows Update をしたことがない理由は、そのPCをメインに使っている当時、ブラウザはNetscape4.7しか使っていなかったためです。まさに「灯台下暗し」で、全く素の状態のIE5.0が目の前に転がってました。セキュリティの問題はありますがそこはそれということで。 で、私のサイトに固定3カラムのスタイルシートを入れてIE5で表示させてみました。画像のようにサイドバーの width と padding で表示が崩れているのがお分かりになると思います。

以下、Ie5.xでボックス表示を変更させる方法を紹介します。できる！CSSさんのWin IE5xだけ別のCSS 2経由で

CSS Examples：Mid Pass Filter

と呼ばれるものを発見。具体的な方法は下記の記述を加えて外部スタイルシートを読み込むというものです。中に記述されtている hogehoge.css はIE5.x系しか読み込まないので、ここでIE5.x用の記述をして上書きをするという仕組みです。

@media tty {
 i{content:"\";/*" "*/}} @import 'hogehoge.css'; /*";}
}/* */

コードの意味はともかく、上記サイトのサンプルを見てもどこにどう書けばよく分からなかったのですが、下のようにHTMLのhead部分に記述することでOKとなりました（上記サイトのページソースがこのようになっていました）。

<link rel="stylesheet" href="styles-site.css" type="text/css" title="Default" />
　　　　　　　　　　　　：
<style type="text/css"/>/*<![CDATA[*/
@media tty {
 i{content:"\";/*" "*/}} @import 'hogehoge.css'; /*";}
}/* */
/*]]>*/</style/>

このように記述することで、最初に link タグの外部CSS（styles-site.css）を読み込み、その後でIE5.x用のスタイルシート（hogehoge.css）が読み込まれます。全体をCDATAセクションで括っているのはおそらく xml として Valid にするための対処と推測されます（間違ってたらお許しを）。

この設定を追加したところ、画像のようにIE5でも正常に表示されるようになりました。

追記
このサンプルページでIE5.x用に用意した外部スタイルシートの内容は、

/* 右カラム */
#links-right{
    float: left;
    color: #ffffff;
    width : 185px ;
    padding-top : 15px;
    padding-left : 15px;
    padding-right : 15px;
}
 
/* 左カラム */
#links-left{
    float: left;
    color: #ffffff;
    width : 185px ;
    padding-top : 15px;
    padding-left : 15px;
    padding-right : 15px;
}

としています。変更したのは width で、元々 155px だったものを、左右 padding 分の 30px を足して 185px にしています。width 以外は元スタイルシートの設定と重複しているので不要かも知れません。

最近投エントリーした「月送りカレンダー（横型・リアルタイム版）」は固定カラムしか考慮しておりませんでした（というのは喜怒哀楽さんより頂いたコメントで判明）。可変3カラムの場合は左右カラムの上部開始位置が絶対値指定のため、これも制御する必要があります。
ということで可変3カラムにも対応できるように修正しました（この方法が妥当かどうかは別として）。詳細は下記のエントリーを参照ください。

月送りカレンダー（横型・リアルタイム版）

併せて util.js もバージョンアップしました。

PCのマウスはボール式マウスを使ってます。最近カーソルの動きがやや悪くなってきたので掃除しました。すでに皆さんご存知と思いますが日記ということで。

まずボールを押さえている裏蓋を手で回して開けます。ボールをコロンと取り出すと、中にローラーと呼ばれるものが計3ヶ所あります（図中矢印）。ボール自体は結構綺麗なのですが、このローラーの方にゴミがこびりついておりまして、これがカーソルの動きを悪くしている原因のひとつです。

このこびりついたゴミを爪楊枝等の細い棒を使って取り除きます。私はギターを弾くために右手の爪を伸ばしているので、ローラーを少しずつ回しながら中心部分を爪で引っ掻くといい具合にとれてくれます。マウスの上部を下にして作業するとゴミが中に落ちてしまうので、ボール面をやや下向きにすると良いでしょう。

こびりついたゴミがあらかた取れたら、ティッシュか指（笑）でローラーをごしごしと回しながら拭きます。ボールを元に戻し、フタを閉めて作業完了。滑らかな動きが蘇ってスッキリです。
こういうのって他の方が掃除しているのを見たことがないのですが皆さんどうやって掃除されているのでしょうか。

JR総武線・西船橋駅で久しぶりに下車してみると、噂に聞いていたショッピングモール「Dila西船橋」が完成していました。
以前はゴミゴミした感じの駅がイメージを一新する佇まいで、相当垢抜けました。Webで調べたところ1月にオープン、昨日残りの9店舗がオープンしたばかりのようで、お祝いのスタンド花が立ち並び、駅員さん達もお客さんのご案内等で対応されたりと、かなりの賑わいをみせていました。

ということでちょっと散策。改札口のある2Fの一角にはスイーツやフードのお店が15店舗ほど。そこからエスカレーターで3Fに上がると、書店・ドラッグストア・リラクゼーションサービス等。個人的にはこの階にある「西船珈琲研究所」という、ベタながらかなり気になるネーミングのカフェに入ってみたかったです（満員でした）。改札を出た1Fは食品スーパーがあります。

他の駅でも似たようなショッピングモールがありますが、ここの特徴はほとんどのお店が改札内にあること。ホームと直結している空間にこれだけの店舗が充実しているのは珍しいかもしれません。西船橋駅はJR総武線、JR武蔵野線、JR京葉線、東京メトロ東西線、東葉高速鉄道の5路線が乗り入れているので、改札を出なくて良い構造にして利便性を高めているのではないかと推測します。個人的にはそのうち駅の中に百貨店ができるのではないかと思ってまして、本当にそういう時代がくるかもしれません。

駅が変わると街自体も変わったような気がするので不思議です。そういうわけで近辺の方は一度お立ち寄りください。

異動の季節でしょうか。
でも呑気な人は関係ないかも。

デフォルトテンプレートや公開テンプレートのサイドバーメニューにある「最近のコメント」は、MTEntries タグや MTComments タグ等を用いて、表示するエントリー数と各エントリーに表示するコメント数を制御しています。この方法はスタンダードながら過去のコメントが含まれてしまうケースが少なくありません。

と、偉そうに書きましたが、実は Ogawa::Memoranda さんの最近のトラックバックをエントリごとにまとめて表示にあった MTCollate タグを「最近のコメント」用に修正しただけです。すいません。
以下カスタマイズ方法です。

１．MTCollate のダウンロード
MT Extensions より MTCollate をダウンロード（ページの最初の方にある「Download」をクリック）してください。

２．プラグインの配置
ダウンロードしたアーカイブを解凍して、その中の MTCollate.pl を plugins フォルダに配置またはアップロードします。

３．「最近のコメント」のMTタグを変更
公開テンプレートを例に挙げると、本カスタマイズを利用したいテンプレートに設定されている

<div class="sidetitle">
Recent Comments
</div>
 
<div class="side">
<MTEntries recently_commented_on="5">
<a href="<$MTEntryLink$>"><MTEntryTitle></a>
<br/>
<MTComments lastn="5">
└ <a href="<$MTEntryLink$>#c<$MTCommentID$>">
<MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$><br />
</MTComments>
</MTEntries>
</div>

をばっさり削除して、下のタグに置き換えてください。ここでは2つのパターンを挙げておきますのでいずれかお好きな方をお選びください。３．１は貼り付けるだけ（再構築は必要）ですぐ使えます。３．２はスタイルシートで ul タグと li タグの設定が必要です。ツリー化スクリプトを利用される場合は３．２をお使いください。

３．１ br タグと "└" で表示

<MTCollateCollect>
<MTComments lastn="10">
<MTCollateRecord>
<MTCollateSetField name="comment_id"><$MTCommentID$></MTCollateSetField>
<MTCollateSetField name="comment_author"><$MTCommentAuthor encode_html="1" default="Anonymous"$></MTCollateSetField>
<MTCollateSetField name="comment_date"><$MTCommentDate format="%m/%d"$></MTCollateSetField>
<MTCommentEntry>
<MTCollateSetField name="entry_key"><MTComments lastn="1"><$MTCommentDate format="%y%m%d%H%M%S"$></MTComments></MTCollateSetField>
<MTCollateSetField name="entry_link"><$MTEntryPermalink$></MTCollateSetField>
<MTCollateSetField name="entry_title"><$MTEntryTitle encode_html="1"$></MTCollateSetField>
</MTCommentEntry>
</MTCollateRecord>
</MTComments>
</MTCollateCollect>
 
<div class="sidetitle">
Recent Comments
</div>
 
<div class="side">
<MTCollateList sort="entry_key:#:- comment_id:#:+">
<MTCollateIfHeader name="entry_key">
<a href="<$MTCollateField name="entry_link"$>" title="<$MTCollateField name="entry_title" encode_html="1"$>"><$MTCollateField name="entry_title"$></a><br /></MTCollateIfHeader>
└ <a href="<$MTCollateField name="entry_link"$>#<$MTCollateField name="comment_id"$>" encode_html="1"><$MTCollateField name="comment_author"$></a> <$MTCollateField name="comment_date"$><br />
</MTCollateList>
</div>

３．２ ul タグと li タグで表示

<MTCollateCollect>
<MTComments lastn="10">
<MTCollateRecord>
<MTCollateSetField name="comment_id"><$MTCommentID$></MTCollateSetField>
<MTCollateSetField name="comment_author"><$MTCommentAuthor encode_html="1" default="Anonymous"$> </MTCollateSetField>
<MTCollateSetField name="comment_date"><$MTCommentDate format="%m/%d"$></MTCollateSetField>
<MTCommentEntry>
<MTCollateSetField name="entry_key"><MTComments lastn="1"><$MTCommentDate format="%y%m%d%H%M%S"$></MTComments></MTCollateSetField>
<MTCollateSetField name="entry_link"><$MTEntryPermalink$></MTCollateSetField>
<MTCollateSetField name="entry_title"><$MTEntryTitle encode_html="1"$></MTCollateSetField>
</MTCommentEntry>
</MTCollateRecord>
</MTComments>
</MTCollateCollect>
 
<div class="sidetitle">
Recent Comments
</div>
 
<div class="side">
<MTCollateList sort="entry_key:#:- comment_id:#:+">
<MTCollateIfHeader name="entry_key">
<a href="<$MTCollateField name="entry_link"$>" title="<$MTCollateField name="entry_title" encode_html="1"$>"><$MTCollateField name="entry_title"$></a><ul></MTCollateIfHeader>
<li><a href="<$MTCollateField name="entry_link"$>#<$MTCollateField name="comment_id"$>" encode_html="1"><$MTCollateField name="comment_author"$></a> <$MTCollateField name="comment_date"$></li>
<MTCollateIfFooter name="entry_key"></ul></MTCollateIfFooter>
</MTCollateList>
</div>

設定が終わったら保存・再構築してください。

４．さらにカスタマイズ
表示したいコメント件数を変更するには、リスト中に赤字で示した数字を変更してください。デフォルトは10件表示するようにしています。

<MTComments lastn="10">

またデフォルトでは、エントリー表示順序は新しいものを上に、エントリー内のコメントは古いものを上に表示する設定にしています。
エントリーの表示順を、古いものを上にする場合は以下のように変更してください。

<MTCollateList sort="entry_key:#:+ comment_id:#:+">

エントリー内のコメントの表示順を、新しいものを上にする場合は以下のように変更してください。

<MTCollateList sort="entry_key:#:- comment_id:#:-">

またエントリーの表示順序は最新コメントを受け取った順番で表示するようにしています。

2006.11.13
リストに encode_html 属性を追加しました。

2007.05.28
投稿者名が無記名の時に「Anonymous」を表示するよう変更しました。

大変長らくお待たせ致しました。タイトルの通り「ダジャレ・トラックバック・ピープル」を開始致しました。

トラックバック・ピープルの仕組みを一応説明しておきますと、予め作成した特定の話題（ここではダジャレ）のトラックバック用URLに対して記事をトラックバックすると、予めサイト内に設定したスクリプトを通じて新着10件が表示されるというものです。私のサイトはとりあえずトップページ右カラムに「Trackback People」というタイトルでスクリプトを設定してみました。
以下、スクリプトの取得方法です（ご存知の方は読み飛ばしてください）。スクリプト取得はBlogPeopleの会員であることが前提です。

1. BlogPeopleトップページより「新着トラックバック・ピープル」の最後にある「トラックバック・ピープル トップへ」をクリック
2. トラックバック・ピープル内話題検索のテキストボックスに「ダジャレ」を設定して「検索」をクリック
3. TB URLの「JS/RSS」という赤いバナーをクリック（要ログイン）
4. ページ下にある3つのバナーより表示したいもののラジオボタンを選択し、その下の「生成」をクリック
5. スクリプトが表示されるのでコピーして表示したいテンプレートにペースト

または

1. BlogPeopleの会員ページの左メニュー「その他サービス/ツール」をクリック
2. 「3.トラックバック・ピープル」の「（詳細へ）」をクリック
3. 「トラックバックする話題を探す」欄の「IDを指定」のテキストボックスに"2155"を指定して「Go」をクリック

で先の4項にジャンプします。
トラックバックURLは

http://member.blogpeople.net/tback/02155

です（上記手順の途中でも表示されます）。ネタの内容にかかわらずダジャレ記事を書いたら上記のURLにトラックバックを飛ばしてやってください。

また以前より募集しておりました「ダジャレ・トラックバックピープル用バナー」を適当に締め切りまして、Stupid Excuseさん（上）および我楽さん（中）のバナーを採用させて頂きました。運用開始が大変遅くなりましたことお詫びするとともに応募くださったことに感謝致します。本当にありがとうございました。 でトラックバックピープル紹介ページに表示されるバナーをどちらにしようかと3日ほど悩みましたが決められなかったので、自分で作った（下）のを設定しました（おいおい…）。という訳で計3つをローテーションで使いたいと思います。

自宅サーバはOS：Windows2000/CPU：Pen? 2.8GHz/メモリ：512MB/ハードディスク40GBという、まあまあのスペックですが、諸事情でカスタマイズ用の作業マシンは5年ほど前に購入したCompaq Presario 3st224（CPU：Celeron 663MHz/メモリ256MB等）というものを使っておりました。ウェブサイト閲覧くらいなら問題ないにしても、Movable Type の再構築時間等を行うとレスポンスが悪く、結構ストレスかかります。ポップアップもサクッと開かなかったり。

その話とは別に、「BTX」という規格を昨年末辺りに某雑誌で知り、かなり気になっていました。
BTX（Balanced Technology eXtended）とは、Intel社が2003年秋に発表したPC/AT互換機用のマザーボードのフォームファクタで、現在の主流であるATXの後継規格と言われています。
BTXの大きな特徴は、パーツの配置変更による効率的な冷却、つまり発熱対策です。ATXでは発熱の多い個々のパーツにファンを装着する必要があったのですが、BTXでは部品全体が平行に並ぶようにCPUや拡張スロット等の配置を変更しています。これでケース前後に大型のファンを装着するだけでケース内の空気の流れがスムーズになるという訳です。

で「次にPCを購入するならこの規格かな」と思っていたら、Gateway よりBTX規格のデスクトップが早々に登場しました。最初 705JP が登場、その後ドライブがDVDスーパーマルチになった 707JP が1万円高で登場。先に述べた精神衛生上良くない環境も後押ししてくれて、無駄遣いと思いつつ購入しました。

Gateway 707JP posted with amazlet at 05.03.21 Gateway (2005/01/25) 在庫切れ おすすめ度の平均: Gateway 707JP Amazon.co.jp で詳細を見る

スペックは CPU：Pen4 550（3.4GHz）/メモリ：1024MB DDR/ハードディスク：250GB/ドライブ：スーパーマルチDVD±R/RW/OS：Windows XPと、目的から考えると過剰スペックですが、他機種と比較したところコストパフォーマンス的にもかなり優れているようです。また気になるBTX効果については「PCのファンは通常より40パーセント遅い速度で回転するので放熱性と静音性に優れている」とのこと。ちなみに立ち上げたところ最初だけファンが唸りますが、すぐに回転数が落ちて静かに回ってくれてます。

一度日本から撤退した実績のある Gateway なのでサポートがやや心配なところですが、ひとまず快適なPC環境を得られたといったところです。ちなみに購入したのは2月ですがエントリーがのびのびになってしまいました。
このマシンで数年耐えてくれることを期待しています。

本サイトにコメント用のポップアップウィンドウを数ヶ月ぶりに復活させました。ポップアップのリンクは、メインページ本文下にあるコメント数を表示している部分と、個別エントリーアーカイブの本文下です。メインページのリンク位置は直感的ではありませんが、Permalink のコメント欄リンクを残しておきたい＆横幅がこれ以上長くなるのを避けたい、の2つの理由からここに配置しました。暫定的な意味も含んでます。
ポップアップは、エントリーや頂いたコメントを確認しながら入力する時に便利なので以前より使いたいと思ってました（「コメントは表示順を逆にすればいいのでは？」というツッコミはなしで）。これでコメント入力の利便性が向上することを期待しています。

それに伴い、ポップアップしない場合のコメント・プレビュー／コメント・エラー画面のサイドバー表示をなくしました（3カラムは残してます）。また軽微な修正として、個別エントリーアーカイブの本文下にあった投稿月日が、タイトル上の投稿月日と重複していたので削除しました（投稿時間のみ表示）。

ポップアップ化に関しては下記のエントリーで公開しておりますので、興味のある方はご覧ください。

• ポップアップ画面を用いたコメント投稿（その1：基本動作）
• ポップアップ画面を用いたコメント投稿（その2：カスタマイズ）
• ポップアップ画面を用いたコメント投稿（その3：公開テンプレート修正方法）
• ポップアップ画面を用いたコメント投稿（その4：コメントフォームのカスタマイズ）
• ポップアップ画面を用いたコメント投稿（その5：その4の補足）

連敗しても

この「男前豆腐」、ブログを始めた昨年の6?7月頃にとあるサイトで見かけて以来、一度食べてみようと思っていたのですが購買意欲にいまひとつ勢いがつかず、そのまま時間だけが流れていきました。
今日、スーパーで買い物をしている時、たまたま一つだけ残っているのを発見。「そういえば食べてなかったな…」と思い出したように衝動買い。苦節9ヶ月（笑）、ようやく購入に漕ぎ着けました。

陳列されている状態では派手な上部のデザインにしか目がいかないのですが、手にとってみるとパッケージの下は上げ底ならぬ「下げ底」のようなスペースが設けられており、ここに豆腐に含まれている余分な水分が溜まる仕組みになっています。これが豆腐の味をさらに良くする工夫のようです。
手で簡単に開くパッケージを開けると、不敷布のようなもので中身がすっぽりと包まれており、布を広げると手作りの雰囲気溢れる美味しそうな豆腐が姿を現します。

とりあえず何もつけずに試食（というか本食）。買った時は「ちょっと大きいか？」と思いましたが、豆腐本来の旨みがあり、そのままでいくらでも食べられました。途中で「食べ飽きる」ということがありません。
味が良いのはもちろんですが、驚いたのは箸をつけた時のその滑らかな感触。いつも食べる豆腐に箸をいれると「切る」「割る」という感じであるのに対し、この豆腐は「箸が豆腐に優しく包み込まれる」という印象です。程よい弾力がお箸に心地よく伝わってきて、それだけでもこの豆腐の質の良さを実感することができるでしょう。

購入したのは「男前豆腐ミニ」。300gで約200円。また機会があれば購入したいと思います。

月送りカレンダーの横型・リアルタイム版です（画像は完成イメージ）。これまでにエントリーしたタイプと設定内容が若干異なるのため別エントリーにしました。 PHPが利用できることが前提です。スタイルは公開テンプレート（2カラム）のデザインに合わせています。3カラム版等、他のテンプレートをお使いの方はテンプレート・スタイルシートのサイズに関する設定を適宜変更してください。なお今回のデザインは体験手記レポート部さんのサイトを参考にさせて頂きました。ありがとうございました。 以下設定方法です。

• 休日表示付きリアルタイムカレンダー（月送り・横型） for Movable Type

０．カレンダー用ディレクトリ設定

Movable Type のバージョンが 3.2-ja 以降の場合、管理メニューの「設定」→「公開」の「アーカイブの設定」にチェックをいれて、その下に表示されたフォームに下記の内容を設定します。

アーカイブURL：http://ブログURL/archives/

アーカイブパス：アーカイブURLまでのパス

例えば当サイトであれば

アーカイブURL：http://www.koikikukan.com/archives/

アーカイブパス：/home/koikikukan/public_html/archives

という具合になります。

バージョンが 3.1x-ja 以前の場合は、管理メニューの「ウェブログの設定」→「基本設定」の「ローカル・アーカイブ・パス」と「アーカイブのURL」に、上記と同様、

ローカル・アーカイブ・パス：アーカイブURLまでのパス

アーカイブのURL：http://ブログURL/archives/

を設定します。

１．カレンダー用アーカイブテンプレートの設定

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

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

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

２．カレンダー用スタイルシートの設定

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

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

設定が終わったら「保存」をクリックし、次の画面で「このテンプレートを再構築する」をクリックしてください。

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

バージョンが 3.2-ja 以降の場合、予め、管理メニューの「設定」→「公開」の「アーカイブ・マッピング」の項目の右側にある「マッピングを新規作成 」をクリックして下記の設定を実施してください。 バージョンが3.1x-ja 以前の場合は、管理メニューより「ウェブログの設定」→「アーカイブの設定」で「新しく、テンプレートとアーカイブを関連付ける」より下記の設定を実施してください。

アーカイブの種類：月別

テンプレート：カレンダー（←１項で設定した「テンプレート名」です）

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

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

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

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

calendar/%y/%m/index.php

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

４．各テンプレートの修正

カレンダーを利用するテンプレート（メインページ・カテゴリーアーカイブ・日別アーカイブ・個別エントリーアーカイブ等）のタイトル設定の下に下記のタグ（青色部分）を追加してください。テンプレートの拡張子は .html のままで問題ありません。

<!-- タイトル開始 -->
<div id="banner">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2><$MTBlogDescription$></h2>
</div>
<!-- タイトル終了 -->
 
<div id="globalnavi">
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.php" width="698" height="20" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>
</div>

またサイドバーに設定されているカレンダータグ（赤字部分）を削除してください。コメントアウトをされても構いませんが、その場合でも再構築の対象になります（つまりその分再構築時間がかかります）ので、削除されることをお勧めします。

<div class="side">
<div class="calendar">
<table border="0" cellspacing="4" cellpadding="0" align="center" summary="投稿した日にリンクする月別のカレンダー">
　　　　　　：
　　　　（省略）
　　　　　　：
</span></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</div>

５．スタイルシート設定

スタイルシート（styles-site.css）に、カレンダー外側のスタイルを示す設定（青色部分）を追加してください。リストは .description の下に追加した例です。

/* サイト説明文 */
.description {
    color: #999999;
    font-size: 12px;
}
 
#globalnavi {
    text-align: center;
    padding-bottom: 5px;
    border-bottom : 1px solid #666699;
} 

ここまでの設定が終わったらすべてを再構築して、カレンダーがタイトル下に表示されることを確認してください。

ここまでの設定で一応表示されるようになりますが、Mozilla系ブラウザでは iframe のサイズ認識がIE系ブラウザより若干狭くなるため、カレンダーの表示が欠けてしまいます。HTMLタグまたはスタイルシートの設定で回避できれば良いのですが、現状はその方法が不明ですので、JavaScriptを使用して回避することにします。その方法を６?８項で説明します。なお、iframe の幅（４項の height 属性）をやや大きい値で設定しておけばこの設定は不要です。

６．util.jsのダウンロード

下記の download をクリックして「スクリプトのページ」にジャンプし、一番下にある util.js のリンクをクリックして、ローカル・サイト・パスにアップロードしてください。なお今回のカスタマイズには 1.011.02 以上が必要ですのでご注意ください。

download

７．スクリプト設定

JavaScriptを起動することによってブラウザによる表示の違いを吸収します。固定3カラムの場合は７．１のみ、可変3カラムの場合は７．１と７．２を実施してください。

７．１ iframe幅を調整するスクリプトを追加

iframeタグの幅を調整します。４項で設定したMTタグのすぐ下に下記の設定（青字部分）を追加してください。

<div id="globalnavi">
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.php" width="698" height="19" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>
</div>
 
<script type="text/javascript">
<!--
setAttributeByTagNameAndAttribute(1, 'iframe', 0, 'height', '27');
-->
</script>

setAttributeByTagNameAndAttribute 関数は指定したタグの属性値を変更するためのものです。タグ名で指定するため、複数のタグが取得されるケースを考慮して何番目のタグかを指定できます。
赤字に示したパラメータでタグ等を指定します。左から、

• ブラウザ種別（0：IE系／1：Mozzila系）
• タグ名（iframe タグ）
• タグの出現順（ページの中で最初に出現する場合は"0"）
• 属性名（height 属性）
• 属性値（27）

です。リストはMozilla系のブラウザに対して設定を有効にする例です。IE系のブラウザに対して設定を有効にしたい場合は、最初のパラメータに "0" を指定してください。他の ifame タグ（広告等）が今回設定したタグの位置より前に出現する場合は、例で設定している "0" を "出現順 - 1" に変更してください。例えばカレンダーの iframe タグが2番目に出現するのであれば設定値は "1" になります。

７．２ top からの表示開始位置を調整するスクリプトを追加

可変3カラムの左右サイドバーの開始位置（縦方向）は絶対値指定です。つまりブラウザによってカレンダーの表示幅が変化することで左右カラムの開始位置がずれたように見えてしまうため、このずれを調整します。
左カラム終了および右カラム終了タグの後ろにそれぞれ下記の設定（青字部分）を追加してください。

　　　　：
</div>
<!-- 左サイドバー終了 -->
 
<script type="text/javascript">
<!--
setStyleById(1, 'links-left', 'top', '125px');
-->
</script>
　　　　：
　　　　：
</div>
<!-- 右サイドバー終了 -->
 
<script type="text/javascript">
<!--
setStyleById(1, 'links-right', 'top', '125px');
-->
</script>
　　　　：

setStyleById 関数は指定した id 属性のスタイルを変更するためのものです。赤字に示したパラメータでスタイルおよび値を指定します。左から、

• ブラウザ種別
• id 属性名（links-left/links-right タグ）
• スタイル（top）
• 値（125px）

です。リストはMozilla系のブラウザに対して設定を有効にする例です。IE系のブラウザに対して設定を有効にしたい場合は、最初のパラメータに "0" を指定してください。

８．JavaScriptのインクルード

４項で修正したテンプレートの <head>～</head> の間に下記を追加してください。

<script type="text/javascript" src="<$MTBlogURL$>util.js" charset="utf-8"></script>

９．注意事項

毎月1日、カレンダーが存在しない状態でブラウザの更新を行ったりコメント投稿があると正常に表示されなくなります（File Not Found になります）のでご注意ください。なおカレンダーを生成するにはエントリーの投稿が必要です（一旦公開投稿すればエントリーを後で削除してもカレンダーは残ります）。 この不具合を解消する場合は、月送りカレンダー・毎月1日に表示されない不具合を改善を参照してください。

2005.03.20 追記
カレンダーテンプレートの </span> の制御に修正もれがありましたので修正しました。Luna's*PaPaさん、ご指摘ありがとうございました。

2005.03.28 追記
可変3カラム使用時の説明を追加しました。またスタイルシートの #globalnavi に text-align: center; を追加しました。

2005.04.03 追記
月跨り時の動作について注意事項を追記しました。

2005.06.05 追記
月跨り時の不具合を改善する記事へのリンクを追記しました。

2005.06.23 追記
記事の内容についての不備等を見直しました。

2005.06.27 追記
日付の枠が右寄りになる不具合を修正しました。

2005.08.23 追記
calendar.css について再構築を行うことを追記しました。

2005.10.31 追記
3.2-ja 用の記述を追加しました。

creative commons japan blogged の記事より、Creative Commons のライセンスが更新されたようです。

日本法準拠版ライセンスが2.0から2.1に更新されました。こちらからライセンスを選択すると自動的に2.1になります。バージョン・アップの内容は、表記ミスの修正のみで、大枠に変更はありません。

Magic White さんが早々に記事をあげられていました。

Creative Commons Licenseが2.0→2.1へ

また書籍も出版されたようです。

クリエイティブ・コモンズ―デジタル時代の知的財産権 posted with amazlet at 05.03.15 ローレンス・レッシグ 林 紘一郎 椙山 敬士 若槻 絵美 上村 圭介 土屋 大洋 クリエイティブ・コモンズ・ジャパン NTT出版 (2005/03) 売り上げランキング: 5,678 通常4日間以内に発送 Amazon.co.jp で詳細を見る

Movable Type 3.1x用の2カラムテンプレートで、サイズ固定の右メニュー版です（左メニュー版はこちらからどうぞ）。日本語版での動作確認バージョンは、3.151-ja/3.17-ja/3.171-jaです。ご利用の前にテンプレートのページをご覧くださいますよう、お願い致します。

画像の通り、デフォルトテンプレートと同じようにカラムの両脇および下に背景が存在します（画像をクリックすると原寸大の画面がポップアップします）。
サイドメニューのカテゴリーリストはデフォルトテンプレートではツリー表示になっていますが、本テンプレートでは一覧表示する設定に変更しています（カテゴリーのページにジャンプした時に該当カテゴリー配下しか表示されないため）。なおツリー表示の設定もカスタマイズした状態でコメントアウトしていますので適宜入れ替えてください。

テンプレートご利用時、下記に示すスタイルシート1行目の文字コード（青色部分）をウェブログの文字コード（mt.cfgのPublishCharsetに指定された文字コード）に合わせてください。初期値は Movable Type デフォルトの"UTF-8"に設定しています。他の文字コードを設定されている場合は"euc-jp"または"Shift_JIS"に変更してください。

@charset "utf-8"; /* 文字コード */

カレンダーは日別アーカイブにリンクさせていますので、テンプレート入れ替え後（前でもいいです）に管理メニュー左下の「ウェブログの設定」をクリック→次ページ右上の「アーカイブの設定」をクリック→次ページの真中あたりの「アーカイブ」欄の「日別」にチェックを入れて再構築してください。

カラム幅を変更する場合はスタイルシートの下記の部分を適宜変更してください。

#box {
    width: 700px; ←2カラム全体の幅
}
 
#content {
    width: 514px; ←中央カラムの幅（右border分の1px差し引く）
}
 
 
#links-left{
    width : 155px ; ←右カラムのテキスト幅
}

値は、

全体の幅 = (中央カラム幅 + 1) + (右カラムのテキスト幅 + (15*2))

となるように設定してください。右カラムの15*2はメニューカラム全体とテキストとのパディングです。右辺が左辺の値を超えるとカラムがずれますのでご注意ください。

個別エントリーアーカイブ等を1カラムにされる場合やポップアップを利用される場合は下記のエントリーにあるテンプレートを抜粋してご利用ください。

Movable Type 3.0x/3.1x 3カラム テンプレート（サイズ固定）

不明な点または不具合等ございましたらご連絡ください。なお本テンプレートはスタティックページでのみ確認しています（ダイナミックページ動作環境が構築できておりません）。ダイナミックページに関する問題については他のサイトにてご確認ください。

スタイルシート
@charset "utf-8"; /* 文字コード */ /* * File : styles-site.css * Version : 1.01 * Update : * 1.00 2005.03.13: 2カラム固定サイズ・右メニュー用初版 * 1.01 2005.08.11: IE6・後方互換モードでの不具合対処 * * Copyright (C) 2005 koikikukan. All rights reserved. */ /* ページ全体の基本的な設定と背景色 */ body { margin: 0px 0px 20px 0px; background:#8FABBE; /* 背景色 */ } /* リンク文字設定 */ a { color: #8FABBE; text-decoration: underline; } a:link { color: #8FABBE; background: none; } a:visited { color: #8FABBE; background: none; } a:active { color: #8FABBE; background: none; } a:hover { color: #006699; background: none; } /* h1h2h3 */ h1{ margin: 0px; padding: 0px; } h2{ margin: 0px; padding: 0px; } h3 { margin: 0px; padding: 0px; } /* 3カラム全体 */ #box { margin-right: auto; margin-left: auto; text-align: left; padding: 0px; padding-bottom: 20px; width: 700px; border-bottom: 1px solid #666699; border-left: 1px solid #666699; border-right: 1px solid #666699; background-color: #FFFFFF; } /* タイトル名 */ #banner { position: relative; z-index: 1; color:#999999; background:#ffffe0; background-position:right top; background-repeat:repeat-y; background-repeat:no-repeat; background-image: url("画像を置くURl/ファイル名.gif"); padding-left:15px; padding-top:15px; padding-bottom:15px; text-align: left; border-bottom: 1px solid #666699; } /* タイトル名の文字のリンク色 */ #banner a { font-weight:normal; font-size: 32px; font-family: "ＭＳゴシック",sans-serif; text-decoration: none; } #banner a:link{ color: #999999; background: none; } #banner a:visited{ font-size: 32px; color: #999999; background: none; } #banner a:active, #banner a:hover { font-size: 32px; color: #999999; background: none; } #banner h2 { color: #999999; font-family: Verdana, Arial, sans-serif; font-weight: normal; font-size: 12px; } /* サイト説明文 */ .description { color: #999999; font-size: 12px; } /* エントリーのある大段落（3カラム） */ #content { float: left; width: 514px; border-bottom: 1px solid #666699; /* border-left: 1px solid #666699;*/ border-right: 1px solid #666699; margin-top : 0px ; margin-bottom : 10px ; } /* エントリーのある大段落（1カラム） */ #container { margin-top : 0px ; margin-bottom : 10px ; } /* エントリー別の段落 */ .blog { padding:10px; font-size:small; font-weight:normal; color: #336699; background: none; } /* 各エントリー */ .blogbody { background:#ffffff; background-position:right; background-repeat:repeat-y; background-image: url("画像を置くURl/ファイル名.gif"); color:#666666; font-family: Verdana, Arial, sans-serif; font-size: 12px; padding-top:5px; padding-left:8px; padding-right:8px; line-height:150%; width : auto ; margin-bottom:15px; word-break: break-all; /* 半角文字折り返し対処 2004.10.15追加*/ } /* タイトルと本文の行間を狭くする対処 */ .blogbody p { margin-top: 5px; margin-bottom: 5px; } /* 各エントリーの文字のリンク色 */ .blogbody a { color: #8FABBE; text-decoration: underline; } .blogbody a:link { color: #8FABBE; background: none; } .blogbody a:visited { color: #8FABBE; background: none; } .blogbody a:active { color: #8FABBE; background: none; } .blogbody a:hover { color: #006699; background: none; } /* エントリーの画像（左に配置した時の文