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

巷では Movable Type 3.3 の話題で賑わっているようですが、当サイトのコメントスパムで重大な問題が発生していることが発覚しました。情報展開ということでお知らせします。

まず、下記のエントリーのコメントをご覧ください。

blog設定

このエントリーがブログを始めた記念すべき最初のエントリーということはおいといて、本エントリーに表示されているコメントスパムを1週間ほど前から数件/日のペースで受信していたため、セキュリティコード入力によりフィルタリングを実施しました。

ところがコメントスパムは止みませんでした。「このスパマーは手動で投稿しているのか？」と思い、次にこのコメンターの名前「100?」でフィルタリングをする設定を施しました。

しかし変化はなく、スパムコメントは投稿されてしまっていました。最後の手段として、このエントリーのコメントをクローズしたのですが、それでもスパムコメントは投稿され続けています。それが先程ご覧になったコメントです。

原因は mt4i からのコメントスパムでした。下記の内容は誤りです。

これらの対処が有効にならず、さすがに空恐ろしくなりました。
おそらく（というか間違いなく）、mt-config.cgi あるいは cookie 情報を盗まれています。そしてすべての防御をかいくぐってスパムコメントを投稿できる理由は、スパマーが自身の所有する Movable Type のようなシステムから（私のDB情報を設定して）遠隔でDBにアクセスして投稿しているのではないかと推測されます。
そう考えると、URLが大量に記述されているにもかかわらず SpamLookup - Link にひっかからない理由も納得できます。

ということで、こまめなログアウトの実施と、mt.cgi のディレクトリに下記の .htaccess を配置することを推奨します。

<Files mt-config.cgi>
  deny from all
</Files>

Movable Type のエントリー・アーカイブで同一カテゴリーのトラックバックだけを表示するカスタマイズです。ご質問を頂きましたので本エントリーにて紹介致します。

基礎知識として、エントリー・アーカイブで MTPings タグを普通に利用するだけでは、該当エントリーのトラックバックしか表示されません（アーカイブページに「最近のコメント」「最近のトラックバック」を表示する参照）。そういう訳でプラグインをいくつか試してみましたが、そのまま使うことで表示を満足するものはありませんでした（あったらすいません）。

で、自分でプラグインを作成するスキルもないので、勝手ながら Ogawa::memoranda さんの Recently pinged on Plugin を下記の通り改変させて頂き、表示させることができました。

プラグイン：Recently pinged on Plugin
改変内容：エントリー・アーカイブで同一カテゴリーのトラックバックだけを表示する

プラグインのダウンロード、インストール等につきましては配布元の記事を参照ください。

１．プラグインの修正

recently-pinged-on.pl に下記のパッチをあててください。パッチ適用前にファイルのタブ文字を半角空白8文字に変換してください。

--- recently-pinged-on.pl.bak   Tue May 30 01:14:15 2006
+++ recently-pinged-on.pl       Tue May 30 01:16:35 2006
@@ -41,7 +41,7 @@
     my $blog_id = $ctx->stash('blog_id');
     my ($start, $end) = ($ctx->{current_timestamp},
                          $ctx->{current_timestamp_end});
-    my $cat = $ctx->stash('archive_category');
+    my $cat = $ctx->{current_archive_type} eq 'Individual' ? $ctx->stash('entry')->category : $ctx->stash('archive_category');
 
     require MT::TBPing;
     my $iter = MT::TBPing->load_iter({ blog_id => $blog_id },
@@ -63,6 +63,7 @@
         my $entry = MT::Entry->load($entry_id) or next;
 
         next if $entry->status != MT::Entry::RELEASE();
+        next if !$cat && $ctx->{current_archive_type} eq 'Individual';
         next if $cat && !$entry->is_in_category($cat);
         next if $start && $end && ($entry->created_on < $start || $entry->created_on > $end);

パッチの利用方法が分からない方は、下記の recently-pinged-on.pl の抜粋を参考に、赤色部分を削除して青色の行を追加してください。*1

 　　　　　　　　　：
my $blog_id = $ctx->stash('blog_id');
my ($start, $end) = ($ctx->{current_timestamp},
                     $ctx->{current_timestamp_end});
my $cat = $ctx->stash('archive_category');
my $cat = $ctx->{current_archive_type} eq 'Individual' ? $ctx->stash('entry')->category : $ctx->stash('archive_category');
 　　　　　　　　　：
　　　　　　　　（中略） 
 　　　　　　　　　：
    require MT::Entry;
    my $entry = MT::Entry->load($entry_id) or next;
 
    next if $entry->status != MT::Entry::RELEASE();
    next if !$cat && $ctx->{current_archive_type} eq 'Individual';
    next if $cat && !$entry->is_in_category($cat);
    next if $start && $end && ($entry->created_on < $start || $entry->created_on > $end);
 　　　　　　　　　：

一応確認したつもりですが、改変内容に不備（他のアーカイブで仕様通りに動作しない等）がございましたらご指摘ください。

２．テンプレートの設定

エントリー・アーカイブのサイドバーの任意の位置に「最近のトラックバック」を表示する下記のタグを設定します。これまで表示していた「最近のトラックバック」のタグは削除してください。
あまり差異はありませんが、デフォルトテンプレートと公開テンプレートの2種類を挙げておきます。

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

<div class="module-archives module">
<h2 class="module-header">Entries of this Category</h2>
<div class="module-content">
<MTEntries recently_pinged_on="5">
<a href="<$MTEntryLink$>"><$MTEntryTitle$></a>
<ul>
<MTPings lastn="5">
<li><a href="<$MTPingURL$>" rel="nofollow"><$MTPingTitle$></a><br />
[<$MTPingBlogName$>] <$MTPingDate format="%m/%d %X"$></li>
</MTPings>
</ul>
</MTEntries>
</div>
</div>

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

<div class="sidetitle">
Recent Comments
</div>
<div class="side">
<MTEntries recently_pinged_on="5">
<a href="<$MTEntryLink$>"><$MTEntryTitle$></a>
<ul>
<MTPings lastn="5">
<li><a href="<$MTPingURL$>" rel="nofollow"><$MTPingTitle$></a><br />
[<$MTPingBlogName$>] <$MTPingDate format="%m/%d %X"$></li>
</MTPings>
</ul>
</MTEntries>
</div>

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

Movable Type のエントリー・アーカイブで同一カテゴリーのコメントだけを表示するカスタマイズです。ここでは MTTagInvoke プラグインを利用した方法を紹介します。

１．プラグインのインストール

下記のサイトより MTTagInvoke プラグインをダウンロードします。ダウンロードしたアーカイブを解凍して、0.9 の場合は MTTagInvoke.pl を plugins フォルダに配置（またはアップロード）、1.0の場合は MTTagInvoke フォルダごと plugins フォルダに配置（またはアップロード） します。

MT Extensions：MTTagInvoke

アップロード後、Movable Type 管理画面の

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

でプラグインの一覧が表示されますので、その中に「MTTagInvoke」が表示されていればOKです。

MTTagInvoke の機能については、配布サイトや個別エントリーアーカイブに同一カテゴリーのエントリーを表示の後半にある説明を参照ください。

２．テンプレートの設定

エントリー・アーカイブのサイドバーの任意の位置に「最近のコメント」を表示する下記のタグを設定します。これまで表示していた「最近のコメント」のタグは削除してください。
あまり差異はありませんが、デフォルトテンプレートと公開テンプレートの2種類を挙げておきます。

注：MTTagInvoke プラグインは2006年9月7日、Movable Type 3.3 対応のため、1.0 にバージョンアップされました。これによりプラグインで使用されているMTタグの名称が下記のように変更されています。サンプルリストは 1.0 に合わせた内容に変更しましたので、もし 0.9 を使っている場合は、記事のサンプルリストをご利用になる際、適宜読み替えてください。

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

<div class="module-archives module">
<h2 class="module-header">Entries of this Category</h2>
<div class="module-content">
<MTTagInvoke tag_name="MTEntries"> 
<MTTagInvokeAttribute name="category"><$MTEntryCategory$></MTTagInvokeAttribute>
<MTTagInvokeContent>
<MTIfNonZero tag="MTEntryCommentCount">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
<MTComments lastn="5">
└ <a href="<$MTEntryLink$>#<$MTCommentID$>"><MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$><br />
</MTComments>
</MTIfNonZero>
</MTTagInvokeContent>
</MTTagInvoke>
</div>
</div>

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

<div class="sidetitle">
Recent Comments
</div>
<div class="side">
<MTTagInvoke tag_name="MTEntries"> 
<MTTagInvokeAttribute name="category"><$MTEntryCategory$></MTTagInvokeAttribute>
<MTTagInvokeContent>
<MTIfNonZero tag="MTEntryCommentCount">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
<MTComments lastn="5">
└ <a href="<$MTEntryLink$>#<$MTCommentID$>"><MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$><br />
</MTComments>
</MTIfNonZero>
</MTTagInvokeContent>
</MTTagInvoke>
</div>

2006.10.02 追記
MTTagInvoke 1.0 の記述を追加しました。

2006.11.23 追記
サンプルリストを MTTagInvoke 1.0 にあわせました。

NHK趣味悠々という大人のための趣味番組で「中高年のためのパソコン講座・プログに挑戦してみよう！」が6月から放映されます。
それに伴って番組テキストも発売されています。

中高年のためのパソコン講座プログに挑戦してみよう! 日本放送協会 日本放送出版協会 日本放送出版協会 2006-05 売り上げランキング : 9879 Amazonで詳しく見る by G-Tools

ここを訪れる方にとっては簡単な内容かもしれませんが、抜粋すると、ブログの基礎知識からホームページとの違いに始まり、ブログサービスへの登録方法／ブログのマナーとルール／コメント・トラックバックや画像の掲載／デザイン・レイアウトの変更／携帯からの利用方法等が全9回の放映で紹介されます。

放映期間は6月6日（火）?8月1日（火）の毎週火曜日22:00?22:25。再放送は翌週火曜日0:30?0:55。またBS2は毎週土曜日5:30?5:55の予定です。詳しくは他の番組案内をご覧ください。

これまで民放がブログ関連の番組いくつか放映してきましたが、NHKのブログ入門によってさらに世間に認知される機会が増えることでしょう。
余談ですが、日本放送協会（NHK）は、番組ごとのブログ作成に、シックス・アパートのブログ・ソフトウエア「Movable Type（ムーバブル・タイプ）」を採用しています（関連記事）。

発言に

１．テンプレートの修正

Movable Type の公開テンプレートではエントリータイトルを下記のように設定しています（分かりやすくするために一部省略しています）。

<h3 class="entry-header">●<$MTEntryTitle$></h3>

<$MTEntryTitle$> が実際にはエントリータイトルに変換されます。「●」は私が勝手につけたもので、エントリータイトルの先頭に付与されます。
この「●」を削除して、

<h3 class="entry-header"><$MTEntryTitle$></h3>

としてください。テンプレートの修正はこれだけです。他のテンプレートをお使いの方は、エントリータイトルを囲むタグに

class="entry-header"

が設定されていればOKです。

この entry-header を利用して次項でスタイルを設定しますが、補足しておくと entry-header という class 属性は不要で、

<h3><$MTEntryTitle$></h3>

として、hx（ここでは h3）タグに直接スタイルを設定することも可能です。ここでは h3 を h2 や h1 に変更する時の利便性を考慮してこのような設定にしていますが、hx タグにスタイルを設定する手法が本来的と思われます（同じ hx に異なるスタイルを設定する場合は class 属性を与えます）。

２．CSSの修正

スタイルシートで、エントリータイトル部分のスタイルを指定する entry-header に青色のプロパティを追加します。公開テンプレートを誤使用でない方も、青色部分のプロパティ設定は同じです。

/* エントリータイトル */
.entry-header {
    margin: 15px 0 0;
    color: #444444;
    font-size: 12px;
    font-weight: bold;
    padding-left: 17px;
    background: url(http://hogehoge/images/image.gif) no-repeat 0px 0.2em;
}

padding-left プロパティはテキストタイトルの左側に余白を作り、そこに画像を表示させるために設定します。
background プロパティで画像を表示させます。後続の設定の意味は下記の通りです。

url(?)

表示させたい画像のURL（background-image）

no-repeat

画像を繰り返さない（指定しないと繰り返し表示されます）（background-repeat）

0px

画像の左端からの表示位置（background-position）
*単に"0"でもOKですが値を設定する場合を考慮して単位を付与しています

0.2em

画像の上端からの表示位置（background-position）

カッコ内はプロパティを別々に設定した時に対応する名称です。
テキストタイトルのパディングと画像の表示位置は画像サイズによって変動するため、適宜調整してください。"17px" および "0.2em" という値を変えることで微調整できます。

またここでは説明を割愛しますが、画像をエントリーのテキスト全体に背景として表示させることも可能です。

３．非推奨

画像を表示する場合、img タグをテンプレートに設定して

<h3 class="entry-header"><img src="http://hogehoge/images/image.gif"><$MTEntryTitle$></h3>

とする手もありますが、ウェブスタンダード的には

• 文書構造とデザインの混在
• 転送バイト数の増加

の点からお勧めではありません。

具体的には、画像を他の画像に変更したい場合、HTMLに img タグを直接記述していると文書構造を表すHTMLを変更しなければなりません。また、エントリータイトルが同一ページに複数存在する場合、img タグがエントリー数分必要となるため転送バイト数が増加し、僅かですが表示速度のパフォーマンスに影響します。

ウェブ進化論が予想以上に面白かったのですが、グーグル―Google 既存のビジネスを破壊するもなかなか楽しめます（乗り遅れてますが）。

グーグル―Google 既存のビジネスを破壊する 文春新書 (501) 佐々木 俊尚 文藝春秋 2006-04 売り上げランキング : Amazonで詳しく見る by G-Tools

タイトルの通り、Google にターゲットを絞った内容です。私が特に面白いと感じたのは、キーワード広告である「アドワーズ」を利用した小さな駐車場とメッキ工場が窮地から救われるという、「プロジェクトXのような（書籍より引用）」2つのドキュメンタリーです。

これらはビジネスモデルの変革を示した事例として取り上げられており、その章を読んでキーワード広告に対する認識が少し変わりました。
今まではサイト運営者として広告を捉えていましたが、広告主の立場も含めて考えるようになりました。端的に言えば、広告主であれば「できるだけ効果的な位置に表示して欲しい」と考える筈であり、そういう視点が加わりました。

広告を利用している企業の全てが、この本に書かれているような逼迫した状況ではないにしても、Google の検索結果であれブログであれ、キーワード広告が閲覧者の目にとまる機会が多いほど、広告主としてはビジネスチャンスが増え、やや大袈裟に言えば、広告を掲載しているサイトは広告主のビジネスに少なからず参加・貢献していることになります。

つまり、単なるクリック云々ではなく、キーワード広告を利用することで「ユーザーの参加」や「ロングテール」というWeb2.0的の定義に従ってビジネスモデル変革の一助を担っている、と考えてみるのも面白いのではないでしょうか。

Movable Type のエントリー・アーカイブからのコメント確認およびコメント投稿で、下記のような「エントリーIDが見つかりません」というエラーが表示されるケースがあります。

エントリーIDが見つかりません

この問題は、mt-config.cgi の CGIPathと、管理画面で設定する「サイトURL」のドメインが異なっている場合にこの現象が発生する可能性があり、XREAでの運用で独自ドメインを取得した後、「サイトURL」だけに独自ドメインを設定をしたケースが該当します。

この場合、CGIPath はXREAドメインのままです。この状態でコメント投稿を実行すると、コメント投稿用CGI mt-comments.cgi のURLには CGIPath、つまりXREAドメインが使用され、その後XREAドメインから独自ドメインへのリダイレクトが発生します。このリダイレクトで mt-comments.cgi の query として付与されたエントリーIDが欠落してしまい、実際に Movable Type で処理される時には「エントリーIDが見つからない」という状態になってしまうようです（後述の参考サイトより一部引用）。

「エントリーIDが見つかりません」で google 検索しても情報は少ないようですが、バージョン 3.2 以前は「No entry_id」というエラーが表示されており、下記のサイトに情報がありました。

• Movable Type 4989：MovableType 3.2 日本語版 StyleCatcher plugin のインストール方法のコメント欄
• XREA SUPPORT BOARD：Movable Typeの設置についての質問
• MovableType設定変更履歴：XREAで後から独自ドメインにする場合の注意

実は、昨日エントリーした検索結果画面で検索文字列が文字化けする不具合を解消すると全く同じ原因で、CGIPath のドメインを、サイトURLのドメイン、つまり取得した独自ドメインと一致させることで解消します。
具体的には、mt-config.cgi の CGIPath に記述しているURLのドメインを、管理メニューの「設定」→「公開」→「サイトURL」に記述されているドメインに修正します。ただし mt.cgi と index.html が異なるディレクトリの場合、mt.cgi までのパスをドメインの後ろに設定する必要がありますのでご注意ください。

修正が完了したら mt-config.cgi を元のディレクトリにアップロードし、エントリー・アーカイブを再構築してください。再構築しないとエントリー・アーカイブに記述されているコメント投稿用CGI mt-comments.cgi のURL が新しい URL に書き変わりません。

余談ですが、検索結果画面で検索文字列が文字化けする不具合を解消するで質問を頂いた当初、原因が全く分からず、情報に至りそうな検索文字列を片っ端から google に打ち込んでも1件もヒットしませんでした（笑）。
そんな訳で半ば諦めていたのですが、ふとその方のサイトでコメントを投稿（確認）してみると「エントリーIDが見つかりません」というエラーが発生しました。それをきっかけに上記の情報にたどり着き、検索実行用URL（これも CGIPath を使用しています）のドメインを独自ドメインに書き換えて実行したところ正常に表示され、無事解決に至ったという訳です。

つまり、本エントリーの不具合を解消することで検索結果画面の不具合も解消してしまうため、検索結果画面の問題がネットで話題にあがることがなかったのではないかと推測します。

2006.07.01 追記
mt-config.cgi 修正後のエントリー・アーカイブの再構築について追記しました。

Movable Type で「検索フォームに日本語を入力して検索すると、入力した文字が文字化けして表示される」というご質問を頂きました。確認したところ、例えば「コンピュータ」という文字列を入力すると、検索結果画面はスクリーンショットのような表示になりました（画像をクリックすると拡大表示します）。

お分かりの通り、入力した検索文字列がURLエンコードされたままの状態で処理・表示されてしまうため、エントリーに含まれる検索文字列であっても正常に検索することができず、「ページはみつかりません」という結果になってしまいます。

この問題は CGIPath のドメインを、サイトURLのドメインと一致させることで解消するようです。具体的には、mt-config.cgi の CGIPath に記述しているURLのドメインを、管理メニューの「設定」→「公開」→サイトURLに記述されているドメインに修正します。ただし mt.cgi と index.html が異なるディレクトリの場合、mt.cgi までのパスをドメインの後ろに設定する必要がありますのでご注意ください。

なお試験サイトで CGIPath とサイトURLで異なるドメインを設定してみましたが、正常に動作しました。したがって、CGIPath のドメインからサイトURLのドメインへリダイレクトを設定しているような条件の下でのみ、この問題が発生する（可能性がある）のではないかと考えます。

サイト構築のためのトータルデザイン誌「Web Designing（ウェブデザイニング）」の2006年6月号に、Web2.0関係の特集で「Web2.0 系、話題のサービス活用術」が掲載されています。

最近のWeb2.0サービスを利用されている方にとっては既にご存知のサービスがほとんどと思われますが、各サービスの基本的な操作方法やワンポイントアドバイスが掲載されていますので、「改めて体感してみたい」という方にはお勧めです。

Web Designing (ウェブデザイニング) 2006年 06月号 [雑誌] 毎日コミュニケーションズ 2006-05-18 売り上げランキング : Amazonで詳しく見るby G-Tools

記事の中で解説（または紹介）されているサービスは下記の通りです。

ソーシャルブックマーク

del.icio.us

wink

オンラインカレンダー

Google Calendar

kiko

30boxes

プロジェクト管理

Backpack

Basecamp

check*pad

動画共有

YouTube

Google Video

音楽共有

Pandora

Last.fm

写真共有

flickr

Picasa

アクセス解析

Google Analytics

Measure Map

RSSリーダー

Headline-Reader Lite

Bloglines

Safari（Mac OS）

Fresh Reader

NetNewsWire

Google Reader

RSSリーダー応用サービス

Technorati JAPAN

はてなブックマーク

FeedBurner

GMail

fresh feed

simple tracking

track feed

ブログパーツやブログペットで Flash を利用されている方は多いと思いますが、Flash のコードには embed 要素が含まれており、この要素が含まれているページは XHTML valid となりません。

Another HTML-lint gateway でチェックすると下記のようなエラーになります。

7: line xx: <embed> は Mozilla、MSIE または doti 用のタグです。 → 解説 55
7: line xx: </embed> は Mozilla または MSIE 用のタグです。 → 解説 55

この問題についてご質問を頂いたので、ネットを調べていたところ、下記の記事がありました。

Hotwired Japan：ウェブ標準のフラッシュ・オブジェクト自在術：embedタグとobjectタグ／救世主JavaScript参上

要するに JavaScript を用いて Flash のコードを表示させればよい、ということです。

上記の記事に書かれている方法が分かりにくい場合、次のようにすると良いでしょう。ここでは Kinarie&May さんの Flash カレンダーを例に変更方法を説明します。

この Flash カレンダーは、配色やURL等の必要な情報を入力して Flash のコードを生成した後、下記のコードを Movable Type のテンプレートに直接貼り付けます。

修正前

<OBJECT classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0' WIDTH='130' HEIGHT='130' id='calender' ALIGN=''> <PARAM NAME=movie VALUE='http://n_calendar200.swf?xmlURL=http://hogehoge.com&katachi=1&monthMoveColor=ff6600&entryDayColor=ffff99&todayColor=ff9900&title_d=1'> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#ffffff> <EMBED src='http://n_calendar200.swf?xmlURL=http://hogehoge.com&katachi=1&monthMoveColor=ff6600&entryDayColor=ffff99&todayColor=ff9900&title_d=1' quality=high bgcolor=#ffffff  WIDTH='130' HEIGHT='130' NAME='calender' ALIGN='' TYPE='application/x-shockwave-flash' PLUGINSPAGE='http://www.macromedia.com/go/getflashplayer'></EMBED></OBJECT>

このコードをテンプレートにそのまま貼り付けると XHTML valid とならないため、下記のような修正を加えます。

修正後（青色を追加）*1

<script type="text/javascript">
<!--
document.write('<OBJECT classid=¥'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000¥' codebase=¥'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0¥' WIDTH=¥'130¥' HEIGHT=¥'130¥' id=¥'calender¥' ALIGN=¥'¥'> <PARAM NAME=movie VALUE=¥'http://n_calendar200.swf?xmlURL=http://hogehoge.com&katachi=1&monthMoveColor=ff6600&entryDayColor=ffff99&todayColor=ff9900&title_d=1¥'> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#ffffff> <EMBED src=¥'http://n_calendar200.swf?xmlURL=http://hogehoge.com&katachi=1&monthMoveColor=ff6600&entryDayColor=ffff99&todayColor=ff9900&title_d=1¥' quality=high bgcolor=#ffffff  WIDTH=¥'130¥' HEIGHT=¥'130¥' NAME=¥'calender¥' ALIGN=¥'¥' TYPE=¥'application/x-shockwave-flash¥' PLUGINSPAGE=¥'http://www.macromedia.com/go/getflashplayer¥'></EMBED></OBJECT>');
//-->
</script>

ご覧の通り、Flash のコード全てを、JavaScript の document.write('?') という「?」に収めます。Flash のコードに含まれる全てのシングルクォート（'）はエスケープ（¥ またはバックスラッシュを付与）してください。これは document.write で使用されるシングルクォートでないことを示すためです。

上記の修正を実施して正常に表示されるところまでは確認できました。表示されない場合はエスケープがきちんとできていない可能性があります。Firefoxの[ツール]-[JavaScriptコンソール]でエラーが発生していないか確認しましょう。

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

• エントリー：903（約1エントリー/日）
• コメント：6983
• トラックバック：2520
• アクセス数：約6500PV/日・約19万PV/月（Google Analytics）

2周年記念ということで、最近めっきりみかけなくなった「TB企画」を行いたいと思います。「TB企画」とは、あるお題でエントリーを書き、それをTB企画者のエントリーへトラックバックするというものです。昨年のTB企画の模様は下記の通りです。

• ブログ開設1周年記念・【TB企画】あなたのサイトのお気に入りカスタマイズ
• TB企画御礼

今回のお題は

あなたのサイトのお勧めエントリー

にしてみました。

ブログは記事を書きやすく、外部とのコミュニケーションをとりやすいのですが、時間の経過とともに過去の記事が目に触れる機会が少なくなるように思います。実際、新しい訪問者の方が過去の記事を全て閲覧するというのは現実的に考えにくいです。
ということで、ご自身のブログのエントリーで「もう一度読んで欲しい」という記事があれば、1つでも2つでも結構ですので、あなたのサイトでそのエントリーを紹介する記事を書き、このエントリーにトラックバックしてください。
このブログの記事ではなく、あなたのブログの記事を紹介してください。

頂いたトラックバックと自推記事については、2週間後位を目処に、ブログのキャプチャ画像と共にエントリーにて紹介させて頂く予定です（もしトラックバックがあれば）。多少はアクセス増加に貢献できると思います。

ちなみに私のサイトのお勧め記事は、

プルダウンメニューに表示されたアーカイブリンクの選択状態を保持する

です。
1年以上前に書いたエントリーで結構自信作だったのですが、コメント・トラックバックの反応が全くありません（笑）。ユーザビリティ向上のために、月別アーカイブやカテゴリーアーカイブの切り替えにプルダウンメニューを利用されている方は是非ご利用ください。

それでは今後も引き続きどうぞよろしくお願い致します。

CSS+JavaScript によるカラムレイアウト切り替えでは基本的な切り替え方法を紹介しましたが、このエントリーでは cookie を用いてスタイルを保持する方法を紹介します。

前述の通り、前回までのカスタマイズではブラウザ上でページ遷移やリロードをするとスタイルが元に戻ってしまうという欠点があります。例えば配色や文字サイズを切り替えたらそのままのデザインで他のページも閲覧したいケースは少なくないと思いますので、このカスタマイズを併用されるとユーザビリティが向上するでしょう。

サンプルを用意しましたのでリロードを実施してみてください。
注：IEのリキッドレイアウト表示に不具合があるようですので、サンプルは固定レイアウトのみに限定させて頂いてます。

CSS+JavaScript によるカラムレイアウト切り替えのカスタマイズが終わっていることを前提にカスタマイズを説明します。

１．cookie 保持スクリプトの追加

状態を保持したいテンプレートの <head>～</head> へ下記を追加します。外部ファイルにしても構いません。

<script type="text/javascript">
<!--
function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
//-->
</script>

このスクリプトは QuirksMode：Cookies からの抜粋です。

２．スタイル切り替えスクリプトに cookie 保持起動の追加

CSS+JavaScript によるカラムレイアウト切り替えの１項のスクリプトに下記の青色部分 *1 を追加します。

<script type="text/javascript">
<!--
function changeColumn(id) {
  var elements = document.getElementsByTagName('body');
  document.getElementById('links-right-box').style.display = 'block';
  document.getElementById('links-left-box').style.display = 'block';
  if(id == '3'){
　　　　　：
　　　（中略）
　　　　　：
  }
  createCookie('style', id, 365);
}
//-->
</script>

createCookie の引数には、cookie名・値（ここではカラムレイアウト）・有効期限（ここでは日単位）の順に設定します。有効期限が「365」であれば1年有効であることを示します。

３．ページ読み出し時の cookie 取得処理追加

状態保持をしたいテンプレートの最後の方（</html> の前）に下記を追加します。

<script type="text/javascript">
<!--
var id = readCookie('style');
if(id){
    changeColumn(id);
}
//-->
</script>

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

公開テンプレート（Movable Type/Serene Bach/sb/ FC2ブログ/Seesaaブログ）でカラムレイアウトをリアルタイムに切り替えるカスタマイズです。ここでは公開テンプレートをサンプルに説明していますが、同様の構造であればどのようなテンプレートでも実現可能です。

とりあえず、どのような動作になるかをサンプルでお試しください（中央上部のプルダウンメニューで操作できます）。

以前、類似の記事でスタイルシート切替や3カラム可変と3カラム固定を切り替えるをエントリーしていますが、これらはいずれもスタイルシートを新たに追加する必要がありました。つまり「スタイルシートを切り替える」というカスタマイズでした。
今回のカスタマイズでは、スタイルシートの追加や切り替えなしにレイアウトを切り替えることができます。

その理由は、現在公開しているテンプレートでは1つのスタイルシートに

• 3カラムリキッドレイアウト
• 3カラム固定レイアウト
• 2カラムリキッドレイアウト（右サイドバー）
• 2カラム固定レイアウト（右サイドバー）
• 2カラムリキッドレイアウト（左サイドバー）
• 2カラム固定レイアウト（左サイドバー）
• 1カラムリキッドレイアウト
• 1カラム固定レイアウト

の8種類のレイアウトをまとめて記述しています。各レイアウトは body 要素の class 属性に割り当てているので、この class 属性値（青色 *1）を書き換えることでレイアウトが切り替わります。

<body class="layout-three-column">

CSSには class 属性に対応するクラスセレクタが記述されています。例えば .layout-three-column では下記のような設定になっています（抜粋）。

body.layout-three-column {
    margin-bottom: 20px;
}
.layout-three-column #box {
    width: 850px;
}
.layout-three-column #content {
    float: left;
    width: 478px;
}
.layout-three-column #links-left-box,
.layout-three-column #links-right-box {
    float: left;
    width: 185px;
}
.layout-three-column #links-left,
.layout-three-column #links-right {
    padding: 15px 15px 0 15px;
}

公開テンプレートでは、同様の設定を8種類全てのレイアウトについて記述しています。目新しいテクニックではありませんが、ページデザインを切り替えるには非常に有効な手法です。

つまり JavaScript で class 属性値を書き換えれば簡単にレイアウトを切り替えることが可能、という訳です。具体的には、HTML（テンプレート）に切替用のスクリプトとプルダウンメニューまたはリンクを書き加えるだけで済みます。

以下、このエントリーでは全レイアウトを表示するカスタマイズ方法を説明します。組み合わせによってはサイドバーを非表示にするような効果を出すこともできますので、それらについては追ってご紹介したいと思います。

１．スクリプトの追加

切り替えを実施したいテンプレートの <head>～</head> へ下記を追加します。外部ファイルにしても構いません。

<script type="text/javascript">
<!--
function changeColumn(id) {
  var elements = document.getElementsByTagName('body');
  document.getElementById('links-right-box').style.display = 'block';
  document.getElementById('links-left-box').style.display = 'block';
  if(id == '3'){
    elements[0].setAttribute('class','layout-three-column');
    elements[0].setAttribute('className','layout-three-column');
  } else if(id == '3l') {
    elements[0].setAttribute('class','layout-three-column-liquid');
    elements[0].setAttribute('className','layout-three-column-liquid');
  } else if(id == '2l') {
    elements[0].setAttribute('class','layout-two-column-left');
    elements[0].setAttribute('className','layout-two-column-left');
    document.getElementById('links-right-box').style.display = 'none';
  } else if(id == '2ll') {
    elements[0].setAttribute('class','layout-two-column-liquid-left');
    elements[0].setAttribute('className','layout-two-column-liquid-left');
    document.getElementById('links-right-box').style.display = 'none';
  } else if(id == '2r') {
    elements[0].setAttribute('class','layout-two-column-right');
    elements[0].setAttribute('className','layout-two-column-right');
    document.getElementById('links-left-box').style.display = 'none';
  } else if(id == '2rl') {
    elements[0].setAttribute('class','layout-two-column-liquid-right');
    elements[0].setAttribute('className','layout-two-column-liquid-right');
    document.getElementById('links-left-box').style.display = 'none';
  } else if(id == '1') {
    elements[0].setAttribute('class','layout-one-column');
    elements[0].setAttribute('className','layout-one-column');
    document.getElementById('links-left-box').style.display = 'none';
    document.getElementById('links-right-box').style.display = 'none';
  } else if(id == '1l') {
    elements[0].setAttribute('class','layout-one-column-liquid');
    elements[0].setAttribute('className','layout-one-column-liquid');
    document.getElementById('links-left-box').style.display = 'none';
    document.getElementById('links-right-box').style.display = 'none';
  }
}
//-->
</script>

２．切り替え用プルダウンメニューの追加

１項と同様、切り替えを実施したいテンプレートに下記のプルダウンメニュー（青色）を追加します。ここではカラム切り替えで非表示にならないよう、中央カラム上部に設定しています。

　　　　　　　　：
<!-- 中央カラム開始 -->
<div id="content">
 
<form id="cc">
<select name="select" onchange="changeColumn(this.form.select.value);">
<option value="3">3カラム</option>
<option value="3l">3カラムリキッド</option>
<option value="2l">2カラム(左)</option>
<option value="2ll">2カラム(左)リキッド</option>
<option value="2r">2カラム(右)</option>
<option value="2rl">2カラム(右)リキッド</option>
<option value="1">1カラム</option>
<option value="1l">1カラムリキッド</option>
</select> 
</form>
 
<div class="blog">
　　　　　　　　：

リンクにする場合は下記のようになります（どこに配置するかは自己解決してください）

<ul>
<li><a href="javascript:void(0);" onclick="changeColumn('3')">3カラム</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('3l')">3カラムリキッド</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2l')">2カラム(左)</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2ll')">2カラム(左)リキッド</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2r')">2カラム(右)</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2rl')">2カラム(右)リキッド</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('1')">1カラム</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('1l')">1カラムリキッド</a></li>
</ul>

３．スタイルの追加

２項で一応完成ですが、プルダウンメニューの位置を整えるために下記のCSSを追加します。

#cc {
    text-align:center;
    padding-top: 15px;
}

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

地図といえば Google Maps な今日この頃ですが、国土地理院が試験公開している「ウオッ地図」もちょっと面白いです。aranxp:鏡が左右を反転するのに上下を反転しない理由さんのウオッ地図で知りました。ありがとうございました。

簡単に説明すると、このサイトで日本地図の立体図を見ることができます。
ウオッ地図のトップページ左上にある「検索画面」のアイコンをクリックし、右側に表示された日本地図から好きな地域を選んでクリックすると20万分の1の地図に切り替わります。さらに表示したい場所をクリックすると概ね2万5千分の1の縮尺で拡大表示されますので、その状態で画面上の「立体視画像」のラジオボタンを選択し、立体視したい地点をクリックすると立体視用の別ウィンドウが開きます。

以前流行った3D立体画像の日本地図版といったところで、起伏の激しいところが面白いです。立体視も交差法・平行法・余色法（赤・青）の3種類が選べますので立体視が苦手な方でも大丈夫だと思います。
立体視表示される領域がやや狭いので個人的には「壮観」と言うレベルまではいきませんが、もう少し表示域を広げて、画像を重ねて表示させられれば用途が広がるのではないでしょうか。

今年2月に発売された梅田望夫さんの著書「ウェブ進化論」、遅ればせながら読みました。新書ノンフィクション部門のベストセラーランキングにも入っており、先日購入したものは第九刷でした。

ウェブ進化論 本当の大変化はこれから始まる 梅田 望夫 筑摩書房 2006-02-07 売り上げランキング : Amazonで詳しく見る by G-Tools

ウェブの世界にそれなりに精通している人が読めば、「そうそう」と頷けること多数。そうでない人達には現在のウェブがどうなっているかが、分かりやすい言葉で明快に論じられています。特にこの本で頻繁に登場するインターネットの「あちら側」と「こちら側」という比喩が、今、ネット上で起こっている最先端の事象の特徴をよく示しています。
帰省時間を利用して一気に読み終えました。「面白い」の一言に尽きます。

以下、本書籍の関連リンクです。

• 梅田望夫氏のブログ
• 日経ビジネス EXPRESS X : 【「ウェブ進化論」の梅田望夫氏に麻布の蕎麦屋で聞いた話：前編】「分かってほしい」熱気に驚いた
• 日経ビジネス EXPRESS X : 【「ウェブ進化論」の梅田望夫氏に麻布の蕎麦屋で聞いた話：後編】ウェブの頭脳とリアルの歯車を噛み合わせろ！
• 【梅田望夫がブロガーと語る「ウェブ進化論」】ネット社会で既存メディアはどう変化するのか
• R30：書評「ウェブ進化論―本当の大変化はこれから始まる」・上
• R30：書評「ウェブ進化論―本当の大変化はこれから始まる」・下
• 「ウェブ進化論」の梅田望夫氏が語る“Googleという隕石”（前編）
• 「ウェブ進化論」の梅田望夫氏が語る“Googleという隕石”（後編）
• webちくま：ネットは書籍出版を変えるか

上記記事からの抜粋ですが、

そうか、泣ける本だったのか、『ウェブ進化論』って（笑）。

ということで、お勧めの一冊です。

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

下記のスクリプトをダウンロードして emoji.js というファイル名で保存してください。これは元カスタマイズ記事の JavaScript をファイルにまとめたものです。ご自身で元サイトからスクリプトをコピーして作成されても結構ですが、下記のスクリプトには公開テンプレートに適用させるための面倒な設定を予め施しています。

emoji.js

２．スクリプトに画像の設定

絵文字にしたい画像をダウンロードしてください。実験では下記サイトからダウンロードさせて頂きました。

.:. PEPPER .:. FREE GRAPHICS FOR WEB SITE

また先ほどダウンロードした emoji.js を任意のエディタで開いて、5行目付近に画像の設定をしてください。設定例を下記に示します。

// コメントにカスタマイズ絵文字入力機能：画像設定
function getCommentEmojiList() {
    var list = new Array();
    // 画像名、画像URLの設定
    list[list.length] = new Array('00a', 'http://yourhost/images/pp_00a.gif');
    list[list.length] = new Array('01a', 'http://yourhost/images/pp_01a.gif');
    list[list.length] = new Array('02a', 'http://yourhost/images/pp_02a.gif');
　　　　　　　　　　　　　　　　　　：
    return list;
}

上記で指定した位置に画像もアップロードしてください。

注：開いたファイルの文字コードが UTF-8 になっていることを確認してください。意識的に他の文字コードに変更する場合は４項の script タグの charset 属性を変更する必要があります。

３．スクリプトのアップロード

スクリプトの設定が完了したら保存して、index.html と同じディレクトリに emoji.js をアップロードしてください。

４．テンプレートの修正

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

<script type="text/javascript" src="{site_top}emoji.js" charset="utf-8"></script>

次にコメント絵文字表示用のタグを設定します。コメントフォームのテキストエリア直前の位置に下記の青色部分を追加してください。テキストエリア下に表示したい場合は適宜変更してください。

　　　　　　　　：
<dt><label id="cookie_label" for="set_cookie">cookie:</label></dt>
<dd><input type="checkbox" tabindex="4" name="set_cookie" value="1" id="set_cookie" /></dd>
<dt>icons:</dt><dd>
<script type="text/javascript">
<!--
writeCustmizeEmojiTagList();
// -->
</script>
</dd>
<dt><label for="description" id="labeldescription">comments:</label></dt>
<dd>
　　　　　　　　：

上記の付近にコメントアイコンの独自タグがコメントアウトされた形で記述されていると思いますが削除してください。

もうひとつ、コメントエリア終了直前に下記の青色部分を追加してください。これは絵文字に対応するテキストを画像に変換するためのスクリプトを起動する部分です。

　　　　　　　　：
</form>
</div>
<script type="text/javascript">
<!--
changeCustmizeEmojiTag();
// -->
</script>
<!-- END comment_area -->
　　　　　　　　：

ここまでの設定で絵文字が表示されるように仕組んでますが、コメントフォームと別のフォームがページに表示（厳密に言うとHTMLマークアップでコメントフォームよりも先に別のフォームが記述）されている場合、正常に表示されない可能性があります。その場合のみ、５項を実施してください。

５．フォームがページに2つ以上ある場合（必要な方のみ）

スクリプトの

// コメントを入力するテキストエリアを指定
var textarea = 'document.forms[0].description';

を

// コメントを入力するテキストエリアを指定
var textarea = 'document.comform.description';

に変更して、テンプレートの form タグに name 属性（青色部分）

<form name="comform" action="{site_cgi}" method="post">

を追加してください。

６．他のテンプレートでご利用になる場合

コメント表示部分のHTMLマークアップが当サイトの公開テンプレートと異なっている場合、絵文字が表示されませんので、emoji.js の下記の赤色部分を適宜修正してください。

// （１）コメント全体のタグの id 属性
var commentAreaIdName = 'comments';
// （２）コメント全体のタグ名
var commentAreaTag = 'div';
// （３）各コメントの class 属性
var commentBodyClassName = 'comment';

（１）?（３）はそれぞれ下記の青色部分に対応しますので、参考にしてください。

<!-- BEGIN comment_area -->
<div id="comments" class="comments">　← （１）
<div class="comments-content">
<h3 class="comments-header">Comments</h3>
 
<!-- BEGIN comment -->
<div class="comment">　← （２）（３）
<div class="comment-content">{comment_description}</div>
<p class="comment-footer">Posted by {comment_name} at {comment_time}</p>
</div>
<!-- END comment -->
</div>
 
<form action="{site_cgi}" method="post">
　　　　　　：
　　　　　（略）
　　　　　　：
</form>
</div>
<!-- END comment_area -->

2006.07.11 追記
６項を追加しました。

Movable Type 日本語版でのエントリー・アーカイブファイル名はデフォルトの状態で entry_basename というものが使われます。これはタイトルの先頭からファイル名（最大30文字）を生成し、エントリータイトルに半角が使用されていればそのまま反映されますが、すべて日本語の場合は、post.html、post_1.html、post_2.html …という具合にファイル名が生成されます。

この entry_basename は、ファイル名長以外を制御することができないため、どのようなファイル名になるかはシステム依存となります。簡単な動作確認をした限りでは一度公開したエントリーを削除して、その後の新エントリーには削除したファイル名が付与されました（エントリータイトルが全て日本語の場合）。また数名の方から、異なるエントリーに同一ファイル名が付与されるという不具合に関する質問も頂いています（原因不明）。
さらにバックアップからエントリーを復旧する場合、ファイル名はバックアップから取得しません。つまりエントリー投稿時と同様のロジックでファイル名を生成する訳なので、バックアップ前と同一のファイル名が付与されない可能性もあります。

つまり、エントリー・アーカイブファイル名には entry_basename を利用せず、タイムスタンプ等のエントリー固有の値を利用することを推奨します。
下記にエントリー投稿時間をエントリーファイル名に使用する設定をご紹介します。

• 管理画面の「設定」→「公開」をクリック
• ページ下方にある「アーカイブ・マッピング」の項目の「エントリー・アーカイブ」の「出力フォーマット」のプルダウンメニューから一番下の「カスタマイズする」を選択
• 入力フィールドに下記を入力

%y/%m/%d%h%n%s%x

• 保存して再構築

データフォーマットは下記の対応になっています。途中の "/" はディレクトリです。

%y：年

%m：月

%d：日

%h：時

%n：分

%s：秒

%x：拡張子（「設定」→「公開」→「アーカイブの拡張子」で設定したもの）

拡張子を個別に設定する場合は最後の拡張子 %x を .php 等に書き換えてください。

2006.05.15 追記
拡張子の表記を修正し、データフォーマットを追記しました。

当サイトの公開テンプレートを利用されている方からご連絡があった場合、一方的に BlogPeople に登録させて頂いているのですが、そのサイトを拝見させて頂くと、リンクリストを手書きで作成されている方が結構いらっしゃいます。
ということで、以下に改めて BlogPeople について紹介したいと思います。

１．BlogPeople リンクリストのメリット

メリットは、他サイトのリンク集、つまりリンクリストを BlogPeople を利用して作成することにより、リンクリストの管理がこれまでより格段に容易になることです。Webサイトをブログに更改して、サイト管理の煩わしさから解放されたのと同じ感覚を、リンクリストでも味わえる訳です。
また登録したサイトの更新状況をほぼリアルタイムに取得できたりと、自前で管理していたリンクリストではできなかったことが色々と実現可能になります。

しかし一番大きなメリットは、BlogPeople に登録することで自サイトの存在を外部に知ってもらえることでしょう。Google にサイトのURLを登録すれば検索対象にはなりますし、更新Ping の利用や RSS 等でブログ自体は認知されますが、他ブログとのコミュニケーションという意味では BlogPeople のリンクリストが有効と感じています。

サイトの存在を知ってもらい、また逆に気に入ったサイトを自分のリンクリストに登録することで、ネット上でのいわゆる「ゆるやかなコミュニケーション」がひろがります。もし自分のリンクリストに登録したサイトからリンク（被リンク）をしてもらえれば、相手のリンクリストに自サイトが表示されますので、自分のサイトが相手サイトを通して他のユーザの目に触れる可能性が高くなります。つまりサイトのアクセス向上につながる可能性がさらに高くなります。

BlogPeople のトップに、登録サイトが色々なカテゴリーで分類されているので、自分の好きなところから登録したいサイトを探すと良いでしょう。

２．リンクリストを積極的に利用するには

BlogPeople のリンクリストを積極的に利用したい場合、経験上、

• リンクリストをトップページのサイドバー等に表示
• 「List Me!（私を登録）」という1クリックでサイト登録できるリンクを表示
• 表示件数を絞らない

が好ましいです。

1つめの理由は、トップページにリンクリストを表示することで、BlogPeople を利用していることと、登録サイトがトップページに表示されるという2つのメリットがあります。「リンクのページ」等を作って、そこにリンクリストを表示するのも構わないのですが、最初はトップページのどこかに貼り付けてリンクリストの存在をアピールした方が効果的です。

2つめの理由は、自サイトを簡単に登録できることはもちろんですが、訪問ユーザに登録を促す効果があります。私の場合、「List Me!」がないと「登録してはいけないのかな？」という錯覚に陥ることがあるので（そんなことはないのですが）、オープンであることの意思表示という意味でも表示した方が良いでしょう。

3つめは、BlogPeople のリンクリストは表示件数を制限する設定ができるのですが、最初は制限せずに全て表示しましょう。リストが多く表示されている方が登録しやすいですし、自分のサイトが相手のサイトに表示されていると嬉しいものです。
件数が増えてきて縦長になったらスクロールの設定をCSSに追加します（BlogPeople のリンクリストにスクロールバーをつけるを参照）。

３．リンクに事前確認は必要？

以前は、いわゆる「リンク」をメールや掲示板で確認をとってから登録し、「相互リンク」も同様の手順で行っていましたが、BlogPeople のようなリンクリストでは確認不要によるサイト登録が暗黙の了解となっています。（一方的に登録されることについて）不快感を感じる方もいらっしゃるかもしれませんが、ブログのトラックバックがそうであるように、リンクリストの利用は「自サイトのリンクリストへの登録はオープンである」という意思表示にもなっているようです。

４．私の場合

ブログを開設してから2ヶ月ほど経って BlogPeople の存在を知って登録しました。登録した時、すでに1件の被リンク（＝他サイトからのリンクリスト登録）があったのに驚いたことを今でも覚えています。
その後、内容やデザインで気に入ったブログをみつけては積極的に登録していきました。相互リンクの割合はテンプレートご利用サイトも含めて現状で約60%です（つまり私が登録しているサイトは1500件程度）。

開始当初は被リンク数の多いサイトなど、恐れ多くてとても登録できなかったのですが、当サイトは被リンク歓迎ですのでお気軽にお待ち申し上げます（サイトの内容によっては相互リンクにならないかもしれませんので予めご容赦ください）。

１．休日表示用カレンダースクリプトのダウンロード

下記の download をクリックして休日表示用カレンダースクリプトをダウンロードしてください。

download

２．スクリプトのアップロード

ダウンロードした dayChecker.js をFC2ブログの「ツール」→「ファイルのアップロード」機能を使ってアップロードしてください。

３．テンプレートの修正１（スクリプトのインクルード）

テンプレートの <head>～</head> の間に下記の設定を追加してください。

<script type="text/javascript" src="<%url>file/dayChecker.js" charset="utf-8"></script>

dayChecker.js の文字コードは utf-8 で作成してますが、FC2ブログの文字コード（EUC）に変更してアップロードする場合、上記のタグは charset 属性を省いた形で設定してください。

４．テンプレートの修正２（カレンダー表示部分）

カレンダーを表示したい部分に、下記のカレンダー表示タグおよびカレンダースクリプト実行用のスクリプトを追加してください。

<!-- カレンダー開始 -->
<div class="side">
<div class="calendar">
<table summary="<%now_year>/<%now_month>">
<caption class="calendarhead">
<a href="<%prev_month_link>" title="<%prev_month>月のページへ"><</a> 
<%now_year>年<%now_month>月
 <a href="<%next_month_link>" title="<%next_month>月のページへ">></a>
</caption>
<tr>
<th abbr="Sunday"><span class="calendar"><span class="red">Sun</span></span></th>
<th abbr="Monday"><span class="calendar">Mon</span></th>
<th abbr="Tuesday"><span class="calendar">Tue</span></th>
<th abbr="Wednesday"><span class="calendar">Wed</span></th>
<th abbr="Thursday"><span class="calendar">Thu</span></th>
<th abbr="Friday"><span class="calendar">Fri</span></th>
<th abbr="Saturday"><span class="calendar"><span class="blue">Sat</span></span></th>
</tr>
 
<!--calender-->
<tr>
<td class="day"><%calender_sun></td>
<td class="day"><%calender_mon></td>
<td class="day"><%calender_tue></td>
<td class="day"><%calender_wed></td>
<td class="day"><%calender_thu></td>
<td class="day"><%calender_fri></td>
<td class="day"><%calender_sat></td>
</tr>
<!--/calender-->
 
</table>
</div>
</div>
<!-- カレンダー終了 -->
 
<script type="text/javascript">
<!--
function setWeekendAndHoliday() {
    var elements = document.getElementsByTagName("table");
    var element = elements[0].getAttribute("summary");
    var year = element.split("/")[0];
    var month = element.split("/")[1];
    var spans = elements[0].getElementsByTagName("TD");
    var day;
 
    for (i = 0; i < spans.length; i++) {
        if (spans[i].getAttribute("class") == "day" ||
            spans[i].getAttribute("className") == "day") {
            if(spans[i].innerHTML.indexOf("href") != -1){
                day = spans[i].getElementsByTagName("a")[0].innerHTML;
            } else {
                day = spans[i].innerHTML;
            }
            if (dc.isHoliday(year, month, day)) {
                if (dc.isToday(year, month, day)) {
                    spans[i].setAttribute('class', 'tholiday');
                    spans[i].setAttribute('className', 'tholiday');
                } else {
                    spans[i].setAttribute('class', 'holiday');
                    spans[i].setAttribute('className', 'holiday');
                }
            } else if(dc.isSaturday(year, month, day)) {
                if (dc.isToday(year, month, day)) {
                    spans[i].setAttribute('class', 'tsaturday');
                    spans[i].setAttribute('className', 'tsaturday');
                } else {
                    spans[i].setAttribute('class', 'saturday');
                    spans[i].setAttribute('className', 'saturday');
                }
            }
            if(dc.isToday(year, month, day)) {
                spans[i].setAttribute('class', 'today');
                spans[i].setAttribute('className', 'today');
            }
        }
    }
}
var dc = new dayChecker();
setWeekendAndHoliday();
//-->
</script>

５．CSS修正

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

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

以上です。

2007.04.21 追記
春分の日・秋分の日の振替休日が表示されない不具合を修正しました。

ブログタイトルは Movable Type/Serene Bach 等のブログツールや FC2ブログ/Seesaa ブログ等のブログサービスに関わらず、HTMLページとしては概ね下記のようなマークアップが生成されます。

<h1><a href="～">First Weblog</a></h1>

つまりこのブログタイトルは、ツールがHTMLを自動生成するため、文字の途中にHTMLタグを埋め込んで任意のスタイルを設定する、というようなことができません。

このエントリーでは、ブログタイトルを2分割して前半と後半で異なるスタイルを設定可能にするカスタマイズをご紹介します。 このカスタマイズを行うことでスクリーンショットのように「First Weblog」という文字に対して、「First」と「Weblog」に異なるスタイルを設定することができます。

１．スクリプトの追加

必要なテンプレートに下記のスクリプトを追加します。挿入位置は任意ですが、必ず h1 タグよりも後方に挿入してください。

<script type="text/javascript">
//<![CDATA[
var number = 5;
var title = (document.getElementsByTagName('h1'))[0].childNodes[0].innerHTML;
(document.getElementsByTagName('h1'))[0].childNodes[0].innerHTML =
'<span class="titleA">' + title.toString().substring(0,number) + '</span>' + '<span class="titleB">' + title.toString().substring(number) + '</span>';
//]]>
</script>

赤色の数字は分割する任意の文字数を設定します。「5」の場合は最初の5文字と残りの文字に分割します。全角・半角それぞれ1文字を「1」として計算してください。Windows のIE/Firefox/Opera では全角・半角混合のタイトルでも正常に分割することを確認しています。

２．スタイルの追加

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

.titleA {
    color: #ffffff;
}
.titleB {
    color: #000000;
}

titleA が文字前半、titleB が文字後半のスタイルに対応します。上記は文字色のみの設定ですが、フォントやフォントサイズ等の各種文字装飾を追加すれば、バリエーション豊かな表示が可能になります。

３．タイトルを 3 分割する

１項のスクリプトを下記のように修正します。追加部分を青色で示していますが、そのままコピーしてください。

<script type="text/javascript">
//<![CDATA[
var number1 = 3;
var number2 = 6;
var title = (document.getElementsByTagName('h1'))[0].childNodes[0].innerHTML;
(document.getElementsByTagName('h1'))[0].childNodes[0].innerHTML =
'<span class="titleA">' + title.toString().substring(0,number1) + '</span>' + '<span class="titleB">' + title.toString().substring(number1,number2) + '</span>' + '<span class="titleC">' + title.toString().substring(number2) + '</span>';
//]]>
</script>

スタイルシートも追加します。

.titleA {
    color: #ffffff;
}
.titleB {
    color: #000000;
}
.titleC {
    color: #ff0000;
}

2007.01.10 追記
３項を追加しました。

クレジットバナー追加の流れで、ブログでよくみかけるボタン（バナー）・アイコンの関連サイトを紹介しておきます。
ここに掲載していないもので「もっと有名なサイトがあるよ」という場合、ご連絡頂ければ幸いです。

AntiPixel：Steal These Buttons

http://www.antipixel.com/blog/archives/2002/10/22/steal_these_buttons.html
80x15のボタンを（多分）最初に作成したサイト。

GTMCKNIGHT：Buttons

http://gtmcknight.com/buttons/
上記の記事をきっかけに始まった 80x15 ボタン収集サイト。Upload Form から作成したボタンを登録することができ、このページ左側の Menu をクリックすると膨大な数のボタンが表示されます。
SUICAのバナーもありました（リンク先は作成者のサイトです）。

Adam Kalsey：Button Maker

http://www.kalsey.com/tools/buttonmaker/
Buttons からリンクされているボタン作成サイト。テキストの設定が可能です。

ekstreme.com：Website buttons maker

http://ekstreme.com/buttonmaker/index.php
Buttons からもリンクされているもうひとつのボタン作成サイト。テキストの設定が可能で、Button Maker より詳細な設定ができます。

Luca Zappa Web Corner：Brilliant Button Maker

http://www.lucazappa.com/brilliantMaker/buttonImage.php
今回クレジットバナー作成に利用したサイトで、画像を取り込むことができます。画面の BORDERS は外枠と全体の背景で、Pixels from the left of bar position は右側に表示するテキストまたは画像の開始位置を設定します。LEFT BOX は左側に表示するテキストと配色、RIGHT BOX は右側に表示するテキストと配色で、Text start はテキスト表示開始位置を設定します。下の IMAGES はテキストの代わりに画像を指定する場合に使用します。設定が完了したら 右下の Create をクリックして、その下にボタンが表示されます。OKであれば Save it! をクリックして保存しましょう。

::: 一色政彦 WEB SITE :::：独自のRSSアイコンを作成！（ダウンロードOK）

http://www.masahiko.info/blog/archives/000066.html
ブログでよくみかけるオレンジ色のRSS/XMLアイコンを配布されています。このサイトの右下に表示している「RSS」のアイコンがそうです。

::: 一色政彦 WEB SITE :::：独自のATOMアイコンを作成！（ダウンロードOK）

http://www.masahiko.info/blog/archives/000745.html
ブログでよくみかけるオレンジ色のATOMアイコンを配布されています。

RSSアイコン

http://www.rss-icon.com/
RSS専用のアイコン作成サイトです。

FEED ICONS

http://www.feedicons.com/
最近流行の feed アイコンです。左側の Download をクリックするとサイズや配色のバリエーションが豊富なアーカイブをダウンロードできます。

W3C：Markup Validation Service

http://validator.w3.org/
W3Cのマークアップ検証サイト。成功すると下記のようなバナーが表示されます。

W3C：W3C CSS 検証サービス

http://jigsaw.w3.org/css-validator/
検証に成功すると下記のようなバナーが表示されます。

W3C：Feed Validation Service, for ATOM and RSS

http://validator.w3.org/feed/
W3CのRSS/Atomフィード検証サイト。成功すると下記のバナーが表示されます。

Movable Type のバナー

インストールディレクトリの mt-static/images/powered.gif にあります。

本サイトに掲載している公開テンプレート、およびカスタマイズをご利用の方へ、下記のクレジットバナーを追加しました。

現在配布しているクレジットバナーがサイトのデザインに合わないとか、80px × 15px のバナーに統一したいという方はこちらをお使いください。

お使いになる場合は直リンクでなく、ファイルを必ずダウンロードしてお使いください。ファイル名は便宜上、配色が分かる名前になっていますが koikikukan.jpg に変更して頂けると幸いです。

クレジットバナーの表示用タグはテンプレートのページ・カスタマイズのページに掲載していますが、概ね下記のような設定です。

<a href="http://www.koikikukan.com/"><img src="http://あなたのサイトURL/koikikukan.jpg" alt="小粋空間" /></a>

赤色部分にダウンロードした画像ファイルまでのURLを設定してください。

画像にリンク枠が表示されてしまう場合は、リンク画像の枠線を消すを参考にCSSを適宜設定してください。

デフォルトテンプレートのコメント・プレビュー画面ではJavaScript エラーが発生します。ご質問を頂きましたのでこれを解消する方法をご紹介します。

根本的な問題はデフォルトテンプレートのコメント・プレビューに「情報を保存する？」のチェックボックスが存在しないことです。ここではチェックボックスを追加せずにエラーを解消する方法と、チェックボックス自体を追加してエラーを解消する2つの方法を記します。３項はいずれの場合も実施してください。

１．「情報を保存する？」をコメント・プレビューに追加しない

現状のフォームのままでエラーのみ解消したい場合は、下記の １．１ および １．２ を実施してください。

１．１ インデックステンプレート・JavaScript の修正

デフォルトテンプレートのコメント・プレビュー画面を開いた時、IEの場合はステータスバーに「ページでエラーが発生しました」というメッセージが表示され、左下のアイコンをクリックすると

'document.comments_form.bakecookie'は Null またはオブジェクトではありません

Firefox の場合は[ツール]-[JavaScriptコンソール]を開くと

document.comments_form.bakecookie has no properties

という JavaScript エラーが発生します。
これはコメントプレビューのHTMLに「情報を保存する？」というチェックボックスが存在しないにもかかわらず、mt-site.js で document.comments_form.bakecookie を処理しようとするためです。

これを解消するためには、インデックステンプレートの「JavaScript（mt-site.js）」に下記の青色部分を追加します（計2行ありますのでご注意ください）。

function individualArchivesOnLoad(commenter_name) {
　　　　　　　　：
　　　　　　（中略）
　　　　　　　　：
    if (document.comments_form) {
        if (document.comments_form.email != undefined &&
            (mtcmtmail = getCookie("mtcmtmail")))
            document.comments_form.email.value = mtcmtmail;
        if (document.comments_form.author != undefined &&
            (mtcmtauth = getCookie("mtcmtauth")))
            document.comments_form.author.value = mtcmtauth;
        if (document.comments_form.url != undefined && 
            (mtcmthome = getCookie("mtcmthome")))
            document.comments_form.url.value = mtcmthome;
        if (document.comments_form.bakecookie) {
        if (mtcmtauth || mtcmthome) {
            document.comments_form.bakecookie.checked = true;
        } else {
            document.comments_form.bakecookie.checked = false;
        }
        }
    }
}

１．２ コメント・プレビューテンプレートの修正

これはコメントプレビュー画面から投稿した時に発生する JavaScript エラーです。IEでは分かりませんが、Firefox の JavaScript コンソールでは

this.bakecookie has no properties

というエラーが表示されます。これは投稿時に form 要素に記述された onsubmit 属性で this.bakecookie.checked という判定が実行されるためです。
これを解消するためには、コメントプレビューテンプレートの下記の赤色部分を削除します。

<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">

２．「情報を保存する？」をコメント・プレビューに追加する

コメント・プレビューテンプレートに、エントリー・アーカイブにあるチェックボックス（青色）を、下記のようにURLの下に

　　　　　　：
<p>
   <label for="comment-url">URL: </label>
   <input id="comment-url" name="url" size="30" value="<$MTCommentPreviewURL$>" />
</p>
<p>
   <label for="comment-bake-cookie"><input type="checkbox"
      id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" />
      この情報を登録しますか?</label>
</p>
　　　　　　：

となるように追加してください。エラーは発生しなくなりますが本来の動作は未確認ですのでご容赦ください。

３．コメント・プレビューテンプレートの修正（commenter_name.js の削除）

コメント・プレビューテンプレートのヘッダ部分に記述されている

<script type="text/javascript" src="<MTStaticWebPath>js/commenter_name.js"></script>

は不要ですので削除してください。

この行に記述されている commenter_name.js というファイルは、英語版の初期β版にはインストールパッケージに含まれていましたが、それ以降は含まれていません、つまりファイル自体が存在しません。
なおβ版で存在していた commenter_name.js の内容は、現在 mt-site.js に包含されています。

この行が残っていると、コメント・プレビュー画面で JavaScript エラーが発生する可能性があります。
「可能性がある」というのは、該当のファイルに本当にアクセスできない場合はエラーは発生しませんが、レンタルサーバで404エラーのファイルにリダイレクトする設定になっていると、表示されたHTMLファイルを不正な JavaScript として評価してしまい、IEでは

構文エラーです。

というエラーが表示されます。

2006.05.06 追記
３項を追加しました。

テンプレートをカスタマイズされるユーザの方から「表示がくずれるのですが」という質問を頂くことがあります。その方々のページを Another HTML-lint gateway で検証すると、HTMLマークアップの誤り、つまりタグの過不足から表示が崩れるケースが少なくありません。おそらくテンプレートをカスタマイズされた時に、タグを書きすぎたり、あるいは書き足りなかったりするのではないでしょうか。

ちなみにその時の Aother HTML-lint gateway のエラーは

7: line xx: </tagA> は xx行目の <tagB> と重なり合っているようです。 → 解説 70

または

7: line xx: </tagA> に対応する開始タグ <tagB> が見つかりません。 → 解説 69

となります（他のエラーも同時に出る可能性があります）。

以下、HTMLマークアップの基本と、上記のエラーが発生した場合の解析方法、およびテンプレートのカスタマイズでHTMLマークアップを失敗しない方法について説明します。なおHTMLエディタを利用されていれば上記のようなエラーは発生しないと思いますので、ここでは手書きでテンプレートをカスタマイズされる場合を想定しています。

１．HTMLマークアップの基本

HTMLは、あるタグの開始・終了と他のタグの開始・終了が重なってはいけないというルールになっています（終了タグは省略可能な場合がありますがここでは終了タグの記述を前提にしています）。XHTMLでは終了タグを省略することができません（空要素のタグは />で閉じます）。
下記に一番簡単な例を示します。誤ってマークアップしたタグを赤で示します。

正しい例

<head>
</head>
<body>
</html>

正しくない例

<head>
<body>
</head>
</body>

お分かりの通り、head 終了タグの前に body タグが挿入されているのが誤りです。これがいわゆる「タグが重複している」という状態です。

上記はタグが兄弟関係の場合ですが、親子関係、いわゆる入れ子にする場合も同様です。
下記に html 要素を加えた例を示します。

正しい例

<html>
    <head>
    </head>
    <body>
    </body>
</html>

正しくない例

<html>
    <head>
    </head>
    <body>
</html>
</body>

body 終了タグは html 終了タグの前に書かなければいけません。

２．エラーが発生した場合の解析方法

実際にはテンプレート上は複数のタグが記述されているので、一旦エラーが発生すると解析が困難な場合があります。Aother HTML-lint gateway のエラーから被疑箇所をすぐに発見できればよいのですが、そうでない場合、HTMLの構造を簡単にすることをお勧めします。

その方法のひとつとして、正常にマークアップされているタグを取り除いていきます。入れ子（インデント）になっている場合はインデントの一番深いところに書かれたタグから取り除くと良いでしょう。

ということで、デフォルトテンプレートのエントリー部分を例に「インデントの一番深いところに書かれたタグから取り除く」の意味について説明します。
下記のようにマークアップされている場合、最初に取り除くタグは赤色の投稿者情報部分です。

<div class="entry" id="entry-20"> 
   <h3 class="entry-header">test</h3> 
   <div class="entry-content"> 
      <div class="entry-body"> 
      <p>test</p> 
      <p class="entry-footer"> 
         <span class="post-footers">投稿者: Melody 日時: 23:37</span> <span class="separator">|</span> <a class="permalink" href="http://.../hogehoge.html">パーマリンク</a> 
      </p> 
      </div> 
   </div> 
</div> 

この2つの span タグと a タグが「インデントの一番深いところ（自分のタグの中に別のタグが書かれていない）」となります。重なりあっていないことも確認してから削除します（ここでは赤色→青色で示します）。

次に取り除くのはエントリー本文と投稿者情報を括っている p タグ（赤色）です。

<div class="entry" id="entry-20"> 
   <h3 class="entry-header">test</h3> 
   <div class="entry-content"> 
      <div class="entry-body"> 
      <p>test</p> 
      <p class="entry-footer"> 
         <span class="post-footers">投稿者: Melody 日時: 23:37</span> <span class="separator">|</span> <a class="permalink" href="http://.../hogehoge.html">パーマリンク</a> 
      </p> 
      </div> 
   </div> 
</div> 

次に取り除くのはエントリー本文を括っている div タグ（赤色）です。

<div class="entry" id="entry-20"> 
   <h3 class="entry-header">test</h3> 
   <div class="entry-content"> 
      <div class="entry-body"> 
      <p>test</p> 
      <p class="entry-footer"> 
         <span class="post-footers">投稿者: Melody 日時: 23:37</span> <span class="separator">|</span> <a class="permalink" href="http://.../hogehoge.html">パーマリンク</a> 
      </p> 
      </div> 
   </div> 
</div> 

このようにして開始タグと終了タグをみつけて、その中に他のタグが紛れ込んでいなければ削除していきます。そしてこの作業を繰り返していけばどこかでタグの過不足がみつかる、という訳です。
この作業を行う場合、必ず現在使用されているテンプレートのバックアップをどこかに保存しておいてください。

なおエントリーの本文に誤りがあるとテンプレート自体を修正してもエラーは解消されません。その場合はエントリーのタグをチェックするか、エラーとなったページを別のファイル名で保存し、それをダウンロードして上記の方法で正常なタグを削除していきます。

またタグの過不足で表示が崩れないケースもありますので、上記の作業を行う前に Aother HTML-lint gateway でチェックしましょう。

３．マークアップを間違えない方法

一言で申し上げると「いかにわかりやすく書くか」に尽きます。この方法はプログラムを書く時のお作法に非常に似ています。

タグにインデントをつける

２項の例でもお分かりの通り、タグの中に別のタグを書く場合、インデントをつけて右寄り（2?4カラム程度）に書きます。これを行うことでタグの親子関係と開始・終了タグの関係が明確になります。タグが兄弟関係（head と body 等）の場合は同一のインデントします。

開始タグと終了タグをペアで書く

上から順番に書くという方法は、終了タグを書き忘れる結果を招きます。あるタグの開始タグを書いたら必ず終了タグを同時に書き、それからその中に新たなタグを書くようにしましょう。HTMLでは前述の通り終了タグが省略可能な要素がありますが、XHTMLの仕様にもとづいて記述することを推奨します。

タグにコメントをつける

簡単な構造であれば不要ですが、例えば div タグが何重にもインデントになってしまうとタグの対応が分かりにくくなります。こういう場合は終了タグに開始タグの id 属性や class 属性をコメントとして記します。
２項のリストの場合であれば下記の青色のようなコメントをつけると分かりやすくなるでしょう。

   <div class="entry-content"> 
      <div class="entry-body"> 
      <p>test</p> 
      <p class="entry-footer"> 
         <span class="post-footers">投稿者: Melody 日時: 23:37</span> <span class="separator">|</span> <a class="permalink" href="http://.../hogehoge.html">パーマリンク</a> 
         | <a href="http://.../hogehoge.html#comments">コメント (0)</a> 
         | <a href="http://.../hogehoge.html#trackback">トラックバック (0)</a> 
      </p> 
      </div> 
      <!-- /entry-body -->
   </div> 
   <!-- /entry-content -->
</div> 
<!-- /entry -->

ただしインデントを付与したりコメントを書くと、ファイルサイズをその分増大させることになります。書きすぎないようご注意ください。

特集1：気になる100人のお気に入りサイト

アーティスト／Webクリエイター／ブロガー／IT社長等、各業界の著名な方々が閲覧するサイトが100人分ずらりと並んでいます。各サイトについての一言コメントもあり、どのような視点でサイトを参照しているかが参考になることでしょう。

またこの特集の途中に「みんなが購読しているblogやニュースサイトはどれ？」というタイトルで、Feed Meter の上位300サイトが見開きで掲載されています。私が知っているサイトもかなりありましたので、機会があれば是非ご覧ください。

特集2：CMSツールとしての Movable Typeのチカラ

ビジネス界での Movable Type の活用事例が掲載されています。単に「導入しました」という内容ではなく、サイトの構造にカテゴリーやエントリー、プラグイン等をどのように適用させているかが詳細に解説されています。実際、通常の Movable Type の利用方法からは予想もつかないアイデアで構築されており、Movable Type でビジネスブログを設計される方は必見ではないでしょうか。

以下、紹介されていたサイトのリンクと誌面のサブタイトルを掲載しておきます。なお詳細な構造について説明されていたのは最初の3サイトです。

UNITED ARROWS LTD.

デザインを犠牲にすることなく Movable Type を CMS に活かす

withD

サイトのすべてを完全に Movable Type で構築

BiOcafe

Flashコンテンツを Movable Type で制御する

30's style

オンラインマガジンに Movable Type を活用する

newsclip.be

Movable Type でニュースサイトを構築

bal

Flash に Movable Type を部分的に組み込む

YAMAHA BigScooterBlog

Flash と Movable Type を活用したキャンペーン

特集の最後には「シックス・アパートが考えるCMSとしての Movable Type の可能性と未来」という見出しで、同社執行役員の平田さんと河野さんのインタビューが載っています。