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

• Google Adsense
• Google Analytics
• Google Answers
• Google Base
• Google Book Search
• Google Catalogs
• Google Dashboard Widgets for MAC
• Google Earth
• Google Labs
• Google Pack
• Google Page Creator
• Google Reader
• Google Ride Finder
• Google Sets
• Google Talk
• Google Transit
• Google Video
• Google Web Accelerator
• Google Zeitgeist
• Google アドワーズ広告
• Google アラート
• Google グループ
• Google サイトマップ
• Google サジェスト
• Google ディレクトリ
• Google ツールバー& Google Extensions for Firefox
• Google デスクトップ
• Google ニュース
• Google パーソナライズドホーム
• Google パーソナライズド検索
• Googleモバイル
• Google ローカル／マップ
• Google 検索
• Google 検索アプライアンス
• Google 翻訳
• Blogger
• Froogle
• Gigapixl プロジェクト
• GMail
• Orkut
• Picasa

なおインターネットマガジン 2006年4月号：トロット夫妻インタビューとマッシュアップ特集でお伝えした通り、本号で休刊となりますが、本誌特集から Web2.0 に関する話題を集めた「Web2.0の道」が4月17日発売予定になっています。また「Internet Magazine Innovation」「Web Professional Network」等の発行も予定されているようです。

「カテゴリー・アーカイブページや月別アーカイブページで『最近のコメント』『最近のトラックバック』が正常に表示されません」という質問を時々頂くことがあります。

質問の通り、例えばこのサイトのトップページにある「最近のエントリー」「最近のコメント」「最近のトラックバック」のテンプレートをそのままアーカイブページに貼り付けても、ユーザーが期待する表示にはなりません。これはリスト表示に使われるMTタグ（MTEntries等）がアーカイブの属性に依存した振る舞いをするのが原因と思われます（下記の調査ではそうでもない結果になっていますが）。

これは不具合ではなく、Movable Type の仕様、あるいは制限事項と思って頂いて良いと思いますが、見落としていなければユーザーマニュアルには明示的な記述はありません。したがってこれらのリスト類がどのように表示されるか、実際に設定してみないと分からない訳です。

ということで、トップページに設定しているリストを各アーカイブページに設定した場合の結果と、それらを回避する方法について記します。

１．MTタグをアーカイブテンプレートに設定した場合の結果

公開テンプレートを例に、メインページに設定してある「最近のエントリー」「最近のコメント」「最近のトラックバック」と同じMTタグを各アーカイブページに設定した場合の表示がどのようになるかを、下記の一覧にまとめました。

２．アーカイブページで正常に表示する方法

次にアーカイブページで「最近のエントリー」「最近のコメント」「最近のトラックバック」を表示する方法を記します。

２．１ プラグインを利用する

MTCollate プラグインを利用すればカテゴリー・アーカイブ／月別アーカイブで正常に表示されるようです。設定方法はMTCollate を使って「最近のコメント」を表示するに記しています。ただしエントリー・アーカイブでは該当エントリーだけが対象になるようです。

もうひとつは Recents プラグインを利用します。

The blog of H.Fujimoto：最近のコメント／トラックバックをエントリーとともに表示するプラグイン

本プラグインであれば各アーカイブページで正常に動作します。いずれも MTCommentsRecent タグに mode="force" を付与することを忘れないでください。

２．２ モジュール化する

リスト表示用タグをアーカイブテンプレートに直接貼り付けると冒頭の問題が発生しますが、リスト自体を独立したモジュール（部品）として登録すれば解消されます。
以下、インデックステンプレートに「最近のコメント」を登録して、それをアーカイブページから読み込む方法を紹介します。

２．２．１ モジュール用テンプレートの作成

管理画面の「テンプレート」をクリック→右上の「テンプレートを新規作成」をクリック。次画面で下記を設定します。

テンプレート名：最近のコメント

出力ファイル名：recentComments.html

インデックス・テンプレートを再構築するときに、このテンプレートを自動的に再構築する：チェック

テンプレートの内容：下記（ここでは公開テンプレートのタグを流用しています）

<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$>" title="c<$MTCommentID$>">
<MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$><br />
</MTComments>
</MTEntries>
</div>

設定が完了したら保存・再構築してください。これで「最近のコメント」だけを表示するためのページが index.html と同じディレクトリにできあがります。ファイル名の拡張子は .html にしていますが、.txt 等なんでも結構です。

２．２．２ アーカイブテンプレートの修正

アーカイブテンプレートの編集画面に進み、２．２．１項で作った「最近のコメント」を表示する設定を行います。
Ａ/Ｂ/Ｃのいずれかを選択してください。

Ａ．MTInclude タグでインクルードする

Ｂ．PHPでインクルードする

C．JavaScriptでインクルードする

違いは、Ａは再構築を契機に「最近のコメント」を取得するのでスタティックページと同じ効果（=次に再構築が実行されるまで最近のコメントが更新されない）ですが設定が手軽に行えます。
Ｂはページビューを契機に「最近のコメント」取得します。「最近のコメント」はコメントが投稿されるたびに更新されるので、常に最新情報が反映されるというメリットがあります。ただしPHP化する必要がある・PHPがインストールされている必要がある等の条件があります。
ＣはＡ・Ｂの長所をもっています。

Ａ．MTInclude タグを利用する

「最近のコメント」を表示したい場所に下記のタグを追加して、保存・再構築します。

<$MTInclude file="recentComments.html"$>

Ｂ．PHPを利用する

「最近のコメント」を表示したい場所に下記のタグを追加して、保存・再構築します。

<? readfile('<$MTBlogURL$>recentComments.html')?>

Ｂの場合、はタグを記述するテンプレートの拡張子が .php であることが前提となります。また、1行目にXML宣言

<?xml version="1.0" encoding="<$MTPublishCharset$>"?>

が記述されている場合は

<? echo('<?xml version="1.0" encoding="<$MTPublishCharset$>"?>') ?>

に変更してください。さらにアーカイブページのファイル（index.html）が残っていると、リンクをクリックした場合に .html ファイルを優先してアクセスする可能性があるため、全アーカイブページを一旦削除してから再構築されることを推奨します。

Ｃ．JavaScript を利用する

手順が前後してすいませんが、２．２．１の内容は下記に変更してください。

テンプレート名：最近のコメント

出力ファイル名：recentComments.js

インデックス・テンプレートを再構築するときに、このテンプレートを自動的に再構築する：チェック

テンプレートの内容：下記（ここでは公開テンプレートのタグを流用しています）

document.write('<div class="sidetitle">');
document.write('Recent Comments');
document.write('</div>');
 
document.write('<div class="side">');
<MTEntries recently_commented_on="5">
document.write('<a href="<$MTEntryLink$>"><MTEntryTitle encode_js="1"></a>');
document.write('<br />');
<MTComments lastn="5">
document.write('└ <a href="<$MTEntryLink$>#c<$MTCommentID$>" title="c<$MTCommentID$>">');
document.write('<MTCommentAuthor encode_js="1"></a> <$MTCommentDate format="%m/%d"$><br />');
</MTComments>
</MTEntries>
document.write('</div>');

そしてアーカイブテンプレートの「最近のコメント」を表示したい場所に下記のタグを追加して、保存・再構築します。

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

以上です。
「最近のエントリー」や「最近のトラックバック」も同様の手順で作成すればOKです。

３．まとめ

個人的にはモジュール化による表示を推奨します。理由はリストの修正・管理が容易になり、再構築のパフォーマンスも向上するためです。「最近のエントリー」「最近のコメント」「最近のトラックバック」を全アーカイブページ分生成することと、3ファイルだけを生成することを比較すれば、どちらが速いか感覚的にお分かりになると思います。先のプラグインと組み合わせればさらにきめこまかい表示の設定が可能になります。
トップページ等のインデックステンプレートのリスト類も同様の手法でインクルードすると良いでしょう。

最初の設定がやや手間取るかもしれませんが興味のある方はお試しください。なお当サイトでは全てのリストについてPHPモジュール化を行っています。

The blog of H.Fujimoto：メールフォーム作成用プラグイン

配布元で設定方法が解説されてますが、こちらでも簡単な設定方法を記しておきます。なお技術的な質問につきましては配布元にお問い合わせ頂ければ幸いです。

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

メールフォーム作成用プラグイン（その1）の mt-mail-form.zip のリンクをクリックして、アーカイブをダウンロードします。

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

アーカイブを解凍すると MailForm というディレクトリがありますので、それをそのまま plugins フォルダに丸ごとアップロードします。
アップロードした MailForm フォルダの中に mt-mail-form.cgi がありますので、属性を 755 等に変更します。

３．メールアドレス設定

プラグインの「設定を表示」をクリックするとメールアドレス入力欄が表示されますので送信先のメールアドレスを設定します。

４．テンプレートの設定

設定するのは下記の4テンプレートです。後ろにあるリンクがそれぞれの解説ページで、各設定方法とタグ例が掲載されています。

• メールフォーム（インデックステンプレート）：メールフォーム作成用プラグイン（その2）
• 送信内容確認ページ（テンプレートモジュール）：メールフォーム作成用プラグイン（その4）
• 送信エラーページ（テンプレートモジュール）：メールフォーム作成用プラグイン（その5）
• 送信完了ページ（テンプレートモジュール）：メールフォーム作成用プラグイン（その3）

また下記に当サイトの公開テンプレート用にあわせたテンプレートも用意くださっています。ありがとうございました。

メールフォームのサンプルテンプレート

５．タイトルに情報を付与する

指定のメールアドレスにはスパムメールが大量にくるため、送信メールのタイトル先頭に [小粋空間] という文字がつくようにして見分けられるようにしました。MailForm/lib/MailForm.pm を任意のエディタで開いて下記の部分に追加しています。

　　：
else {
    $head{From} = $email;
}
$head{Subject} = "[小粋空間] " . $subject;
 
eval {
    MT::Mail->send(\%head, $body) or die("Mail Error");
};
　　：

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

下記のリンク先にある dayChecker.js をクリックして休日表示用カレンダースクリプトをダウンロードしてください。

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

ダウンロードした dayChecker.js を index.html と同じディレクトリにアップロードしてください。このスクリプトをインクルードするための script 要素は４項のテンプレートに含まれています。

３．アーカイブパスの設定

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/

を設定します。すでに設定済みの場合はそのままでも結構ですが、以降のカスタマイズで出現する「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.html"$>

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

calendar/%y/%m/index.html

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

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

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

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

カレンダーを利用したいテンプレート（メインページ／カテゴリー・アーカイブ／日別アーカイブ／エントリーアーカイブ等）のタイトル設定の下に下記のカレンダー表示用の iframe 要素（青色部分）を追加してください。

<!-- タイトル開始 -->
<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/<MTEntries lastn="1" sord_order="descend"><$MTEntryDate format="%Y/%m/index" $></MTEntries>.html" width="698" height="20" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>
</div>

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

８．CSS設定

スタイルシート（styles-site.css）に、iframe セレクタに対するプロパティ（青色）を追加してください。

#globalnavi {
    text-align: center;
    padding-bottom: 3px;
    border-bottom : 1px solid #666699;
}

以上です。
ここまでの設定が終わったら、管理メニューの「サイトを再構築」→「すべてを再構築」を選択・再構築を実行して、カレンダーを設定したページを表示し、横型カレンダーがタイトル下に表示されること、月送りができることを確認してください。スタイルは Windows2000/XP：IE/Firefox/Opera で確認しています。

2006.03.30 追記
６項で設定する拡張子が誤ってましたので修正しました。

2006.06.14 追記
日別アーカイブのチェックについて追記しました。

現在、月刊アスキーで「HTMLが面倒なあなたでもできるMovable Typeで構築するWebサイト入門」が連載中で、先日発売された2006年4月号では「XML-RPCを使ってMTの外から記事を投稿する」という記事が掲載されています。執筆は「Movable Type標準ハンドブック Movable Typeで今すぐできるウェブログ入門 改訂版」の著書等でお馴染みの関根元和さんです。
短期連載のため、残念ながら今回が最終回です。

毎回、この記事の冒頭に Movable Type を利用したブログサイトが掲載されています。先々月号は greenplastic.net さん、先月は我楽さん、そして今月は ga4.jp さんの Flash ブログが紹介されていました。このブログはXMLで出力したデータを Flash に読み込ませているようです。

何気なく記事を読み進めていくと、見覚えのあるサイトのキャプチャ画像が目に入りました。
本編記事とは別に「もっとカスタマイズしたい人のための Movable Type 情報サイト」という欄が設けられており、驚いたことにそこで当サイトが紹介されておりました。併せて Ogawa::memoranda さんのブログ、そして MovableTypeで行こう！さん（執筆者）のブログも紹介されています。
このようなサイトを取り上げてくださり大変感謝しております。この場をお借りしてお礼申し上げます。

以前も書きましたが、この記事と連動したブログも1月より開始しています。Movable Type の基本的な動作から、記事に掲載されていないカスタマイズについても色々紹介されており、なにかと参考になるのではないかと思います。

ということで、月刊アスキー2006年4月号を是非ご覧ください。

このエントリーはの先日エントリーした「111万1111アクセス特別企画」で見事1111111をゲットされた方のサイト紹介です。

サイト名はMonochrome Recollections。当サイトの Serene Bach テンプレートユーザさんです。サイトを運営されているのは散歩道さん。プロフィールによると長野の善光寺平というところにお住まいで、会社経営および芸術関係のお仕事をされているようです。
サイト名の通り、モノクロ写真（カラーもあり）でエントリーが占められており、アートな画像を楽しむことができます。エントリーを拝見させて頂いて気がついたのは、掲載されている写真は全て銀塩カメラで撮影されたもののようです。
このブログとは別に Photolog も開設されています。

私事で恐縮ですが、高校時代は写真部に所属しておりました（と言っても、他のクラブとかけもちしていたため情熱を注いでいた訳ではありません）。エントリーにある Nikon F2 も以前持っていたことがあり、現像も自分達でやっていたのでモノクロ現像・タンク編等は懐かしく感じます（その頃はダークバックでした）。写真から遠ざかって随分経ちますが技術は進歩するものですね。

あと気になったエントリーは「Nocturne」。画像によるピアノ調律の現場と、文字による調律の難しさ・人や環境に依存する複雑さから舞台裏の緊張感が伝わってくるようです。どんな楽器に関わらず調律は大事だと思います。
余談ですがギターも「十二平均律」という調律で、和音によって微妙に濁る部分があります。そんな訳で曲の調性によって微妙にチューニングを変えたり、和音によってはいわゆる「チョーキング」を施して音色を整えるというテクニックがあります。

最近は撮影の機会が少なくなっているようですが、これからも是非、素敵な写真を撮り続けてください。ちなみに私が気に入ったのは浄蓮です。

Lightbox JS を起動するには a 要素の rel 属性に "lightbox" を付与しなければならないという条件がありますが、手動で付与するのは結構面倒です。

ということでご質問を頂きましたので、rel 属性を自動付与する（あるいは rel 属性を付与せずに Lightbox を起動する）方法をいくつかご紹介します。

1. rel 属性なしで Lightbox JS を起動する
2. Movable Type のアンカータグ挿入ボタンに rel 属性を自動付与する
3. Movable Type のアップロード画面からのサムネール画像リンクに rel 属性を自動付与する
4. Serene Bach の画像リンクに rel 属性を自動付与するプラグイン

１．rel 属性なしで Lightbox JS を起動する

ページ内にある全ての画像リンクに対し、Lightbox JS を起動する方法です。a 要素の href 属性の末尾が jpg/gif/png の場合、Lightbox JS を起動するようにしています。

変更方法は、lightbox.js の293行目辺りにある下記の赤色部分、

// loop through all anchor tags
for (var i=0; i<anchors.length; i++){
    var anchor = anchors[i];
 
    if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){
        anchor.onclick = function () {showLightbox(this); return false;}
    }
}

を青色に修正します。

// loop through all anchor tags
for (var i=0; i<anchors.length; i++){
    var anchor = anchors[i];
 
    if (anchor.getAttribute("href") && anchor.getAttribute("href").match(/jpg$|gif$|png$/)){
        anchor.onclick = function () {showLightbox(this); return false;}
    }
}

パッチを使える方は以下のパッチをご利用ください。

--- lightbox.js.bak     Thu Mar 23 11:44:29 2006
+++ lightbox.js Thu Mar 23 12:52:09 2006
@@ -289,7 +289,7 @@
        for (var i=0; i<anchors.length; i++){
                var anchor = anchors[i];
 
-               if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){
+               if (anchor.getAttribute("href") && anchor.getAttribute("href").match(/jpg$|gif$|png$/)){
                        anchor.onclick = function () {showLightbox(this); return false;}
                }
        }

この修正は、rel 属性を付与せずに Lightbox PLUS を起動できる下記の hack を参考にさせて頂きました。ありがとうございました。

drk7.jp：Lightbox Plus で画像を同一画面にオーバーレイして表示

２．Movable Type のアンカータグ挿入ボタンに rel 属性を自動付与する

Movable Type のエントリー編集画面のアンカータグ挿入ボタン（a href="～"）利用時に rel 属性を自動的に付与します。このボタンは画像リンク以外のリンクでも使用することがあるので、href 属性の内容の末尾が jpg/gif/png の場合のみ rel 属性を付与するようにしてします。

変更方法は、mt-static/mt_ja.js（3.17xの場合はローカル・サイト・パス配下の mt.js） を任意のエディタで開いて、赤色部分のコード

　　　　　　：
var my_link = prompt(isMail ? 'Enter email address:' : 'Enter URL:', link);
if (my_link != null) {
     if (str == '') str = my_link;
     if (isMail) my_link = 'mailto:' + my_link;
    setSelection(e, '<a href="' + my_link + '">' + str + '</a>');
}
return false;
　　　　　　：

を青色のコードに変更してください。

　　　　　　：
var my_link = prompt(isMail ? 'Enter email address:' : 'Enter URL:', link);
if (my_link != null) {
     if (str == '') str = my_link;
     if (isMail) my_link = 'mailto:' + my_link;
     my_link.match(/jpg$|gif$|png$/) ? setSelection(e, '<a href="' + my_link + '" rel="lightbox">' + str + '</a>') :
                                       setSelection(e, '<a href="' + my_link + '">' + str + '</a>');
}
return false;
　　　　　　：

パッチを使える方は以下のパッチをご利用ください。

--- mt_ja.js.bak        Wed Oct 12 13:34:52 2005
+++ mt_ja.js    Thu Mar 23 11:09:26 2006
@@ -279,7 +279,8 @@
     if (my_link != null) {
          if (str == '') str = my_link;
          if (isMail) my_link = 'mailto:' + my_link;
-        setSelection(e, '<a href="' + my_link + '">' + str + '</a>');
+         my_link.match(/jpg$|gif$|png$/) ? setSelection(e, '<a href="' + my_link + '" rel="lightbox">' + str + '</a>') :
+                                           setSelection(e, '<a href="' + my_link + '">' + str + '</a>');
     }
     return false;
 }

３．Movable Type のアップロード画面からのサムネール画像リンクに rel 属性を自動付与する

Movable Type のアップロード画面からサムネール画像リンクを生成した場合に rel 属性を自動付与する方法です。このカスタマイズについては下記を参照ください。

我楽：coolに画像を表示する。

なおサムネール画像作成には ImageMagic または NetPBM がインストールされていることが必要です。

４．Serene Bach の画像リンクに rel 属性を自動付与するプラグイン

Serene Bach の場合、下記のサイトで配布されているプラグインが便利です。

sideblue weblog：[sb2] Addrel v0.01

１．maketree.js ダウンロード

下記のリンクをクリックしてスクリプトのページへジャンプしてください。そこで maketree.js をクリックし、同じファイル名でご自身のPCに保存してください。

download

本スクリプトはUTF-8で記述していますので、ブログで使用している文字コードがUTF-8以外の場合（Shift_JIS/EUC-JP等）は保存後、文字コードを適宜変更して再保存するか、script 要素の charset 属性にスクリプトの文字コードを指定してください（scriptタグの設定方法につきましてては３項に記します）。

２．maketree.js アップロード

ダウンロードした maketree.js を管理メニューの「ファイルアップロード」を利用してアップロードしてください。

３．リスト表示用タグ修正およびJavaScript起動用スクリプト設定

管理メニューの「テンプレートの設定」からテンプレートの編集欄の「修正」のリンクをクリックして、テンプレートの編集画面を表示します。そしてサイドバーのメニューリストのブロック変数の一部を修正します。ここでは公開テンプレートを例に、各サイドメニューの設定例を示します。黒字部分が公開テンプレートで設定しているブロック変数で、青色部分が新たに追加する部分です。赤色は任意の名称を設定します（タグの id 属性とスクリプト部分の名称が一致するように設定してください）。
他のテンプレートでも適用可能ですが、ツリー化を行う場合、ul と li を用いたリスト形式になっていることが前提となります。

Recent Entries

<!-- エントリーリスト開始 -->
<div class="sidetitle">
Recent Entries
</div>
 
<div class="side" id="entrylist">
<ul>
<!--recent-->
<li><a href="<%recent_link>" title="<%recent_title>"><%recent_title></a></li>
<!--/recent-->
</ul>
</div>
<!-- エントリーリスト終了 -->
 
<script type="text/javascript">
<!--
generateNormalTree("entrylist");
//-->
</script>

Categories

<!-- カテゴリーリスト開始 -->
<div class="sidetitle">
Categories
</div>
 
<div class="side" id="categorylist">
<ul>
<!--category-->
<li><a href="<%category_link>" title="<%category_name>のページへ"><%category_name> [<%category_count>]</a></li>
<!--/category-->
</ul>
</div>
<!-- カテゴリーリスト終了 -->
 
<script type="text/javascript">
<!--
generateNormalTree("categorylist");
//-->
</script>

Archives

<!-- 月別アーカイブリスト開始 -->
<div class="sidetitle">
Monthly Archives
</div>
 
<div class="side" id="archivelist">
<ul>
<!--archive-->
<li><a href="<%archive_link>"><%archive_year>年<%archive_month>月</a> [<%archive_count>]</li>
<!--/archive-->
</ul>
</div>
<!-- 月別アーカイブリスト終了 -->
 
<script type="text/javascript">
<!--
generateNormalTree("archivelist");
//-->
</script>

Links

<!-- リンク開始 -->
<div class="sidetitle">
Links
</div>
 
<div class="side" id="linklist">
<ul>
<!--link-->
<li><a href="<%link_url>" target="_blank"><%link_name></a></li>
<!--/link-->
</ul>
</div>
<!-- リンク終了 -->
 
<script type="text/javascript">
<!--
generateNormalTree("linklist");
//-->
</script>

４．maketree.js インクルード文挿入

HTMLテンプレートの <head>～</head> の間に下記のタグを追加してください。FC2ブログの文字コードはEUCですので、スクリプトの文字コード（utf-8）を示す青色の charset 属性は必須です。

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

５．画像のダウンロード

下記のファイルをダウンロードしてください。これはツリーを表示するための画像で、実線・点線の2種類を用意しています。それぞれ2つの画像がありますのでご注意ください。

実線：tree_lst_solid.gif / tree_end_solid.gif
点線：tree_lst_dotted.gif / tree_end_dotted.gif

保存方法は、（IEの場合）リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。なお実線につきましては以前我楽さんより提供いただいたものをそのまま使っています。点線バージョンはたいしたものではありませんので腕に自信のある方は作り直されることをお勧めします。

６．画像の配置

ダウンロードした画像を、管理メニューの「ファイルアップロード」を利用してアップロードしてください。

７．スタイルシート追加

スタイルシート（style.css）の.sideの下辺りに下記のクラス指定を追加します。

ul.tree {
    margin: 0 0 0 3px!important;
    padding: 0!important;
    font-size: 9px;
    list-style: none!important;
}
ul.tree ul {
    margin: 0!important;
    padding: 0!important;
}
ul.tree li {
    margin: 0!important;
    padding: 0 0 0 13px!important;
    background-image: url(http://domain/file/tree_lst.gif);
    background-position: 0 0;
    background-repeat: no-repeat!important;
    list-style: none!important;
}
ul.tree li.end {
    background-image: url(http://domain/file/tree_end.gif);
    list-style: none;
}

赤字部分については、アップロードしたファイルのURLを指定します（"http://ご自身のドメイン/file/画像ファイル"になると思います）。画像ファイル名はアップロードした画像ファイル名と合わせてください。

８．不具合の修正

Movable Type 用のツリー化スクリプトのエントリーをご覧になってカスタマイズされた場合、冒頭に記した通りツリーがきれいに表示されません。
これを修正するにはスタイルシートに

ul.tree li {
　　　：
    background-position: 0 0;
　　　：
}

を追加してください。きれいに表示されるようになります（７項のCSSには設定済です）。

2006.04.04 追記
リストから language 属性を削除しました（HTML4.01/XHTMLで非推奨あるいは廃止されているため）。

注：本プラグインで動作を確認できているのはテーブル型カレンダー、独自タグが {calendar2} のみです。

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

下記のリンク先にある RealTimeHolidayCalendar.zip または RealTimeHolidayCalendar.lzh をクリックして、プラグインのアーカイブをダウンロードしてください。

RealTimeHolidayCalendar.zip / RealTimeHolidayCalendar.lzh

ダウンロードしたアーカイブを解凍し、中にある RealTimeHolidayCalendar.pm を plugins ディレクトリ直下に、resource/ja/realtime_holidaycalendar.txt を、同じディレクトリの構成があると思いますので、realtime_holidaycalendar.txt のみを ja 配下にアップロードしてください。

アップロードの後、Serene Bach の管理画面を起動し、「環境設定」→「プラグイン」をクリックし、プラグイン一覧に RealTimeHolidayCategory.pm が表示されていることを確認し、一番右のチェックボックスをチェックして右下の「利用する」をクリックしてください。
注：リアルタイムカレンダープラグインをご利用の場合はリアルタイムカレンダープラグインの利用を停止してください。

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

下記のリンク先にある dayChecker.js をクリックして休日表示用カレンダースクリプトをダウンロードしてください。

download

ダウンロードした dayChecker.js を index.html と同じディレクトリにアップロードしてください。

３．独自タグの設定１

２項でダウンロードした dayChecker.js を使うための宣言を、ベースHTMLテンプレートに設定します。個別エントリー用HTMLテンプレートを設定している場合はそちらも同じ設定を行ってください。
下記のように </head> の前辺りに青色のブロックおよび独自タグを設定します。

　　　　　　：
<!-- BEGIN rt_holiday_calendar -->
{rt_holiday_calendar_script}
<!-- END rt_holiday_calendar -->
</head>
　　　　　　：

４．独自タグの設定２

ベースHTMLテンプレートのサイドバーに設定しているカテゴリー表示用のブロック名および、独自タグを下記のように変更してください。

<!-- BEGIN calendar -->
<div class="side">
<div class="calendar">
{calendar2}
</div>
</div>
<!-- END calendar -->
 
<!-- BEGIN rt_holiday_calendar -->
{rt_holiday_script}
<!-- END rt_holiday_calendar -->

５．カレンダーに id 属性の追加

カレンダータグに、下のサンプルリストのように id 属性として rt_holiday_calendar（青色部分）を追加します。

<!-- BEGIN calendar -->
<div class="side">
<div class="calendar" id="rt_holiday_calendar">
{calendar2}
</div>
</div>
<!-- END calendar -->
 
<!-- BEGIN rt_holiday_calendar -->
{rt_holiday_script}
<!-- END rt_holiday_calendar -->

サンプルでは公開テンプレートを使って、内側の div タグに id 属性を付与していますが、タグの構造が異なる場合は、{calendar2} 等の独自タグを何らかのタグで括っていると思いますので、そのタグに id 属性を与えてください。

リアルタイムカレンダープラグインをご利用されていた方は rt_calendar という id 属性を rt_holiday_calendar に変更してください。

６．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;
}

なお平日・土・日祝日の td 要素に対し、下記のセレクタを設定しています。

• 平日（本日）：today
• 土（本日以外）：saturday
• 土（本日・リンクなし）：tsaturday
• 土（本日・リンクあり）：tsaturday a:link
• 日祝日（本日以外）：holiday
• 日祝日（本日・リンクなし）：tholiday
• 日祝日（本日・リンクあり）：tholiday a:link

公開テンプレートの場合、today は設定されていますが、設定されていない場合は下記のようなセレクタを追加してください。

.today {
    display: block;
    text-align: center;
    color: #444444;
    border: 1px solid #444444;
}

2006.03.27 追記
ページ内のカレンダーより前にテーブルタグが用いられている場合、正常に表示されない不具合を修正しました。

2006.04.11 追記
プラグインのスクリプト部分に誤りがありましたので修正しました。

１．プルダウン化の概要と修正作業の流れ

*この項は読み飛ばしても問題ありません。
プルダウン化プラグインはサブカテゴリーリストに対し、大きく分けて下記の二つの処理を行っています。

1. 各親カテゴリーに、プルダウンマークを付与するためのHTMLタグを追加 … A
2. プルダウン化スクリプト（menufolder.js）を起動するための JavaScript を追加 … B

ブラウザにページが表示された時、2. の JavaScript が起動します。JavaScript は 1. のHTMLタグを探し、親カテゴリーに対してひとつずつプルダウンマークを付与します（実際に付与する処理をするのはその先のプログラム（menufolder.js）です）。

要するに、現在はこれらのお仕事を全てプラグインで行っている訳ですが、お仕事の一部をテンプレート上で（手動で）行えるように修正することで、プルダウンする・しないを手動で決められるようになります。
具体的には以下の変更を行います。

1. 現状のサブカテゴリーリストのHTMLソースより、サブカテゴリーリストに表示された B を取得（２項）
2. プラグインから B を表示するための処理を削除（３項）
3. B からプルダウン化したいカテゴリーだけを選んでテンプレートに直接埋め込み（４項・５項）

２．HTMLコードからプルダウン化スクリプト起動部分の取得

<div class="sidetitle">Categories</div>
<div class="side" id="categories"><ul><li><div class="subcategories" id="subcategories0name"><a href="http://localhost/blog/sb/sb.cgi?cid=9">日記</a> (1)</div>
<div id="subcategories0list"><ul><li><div class="subcategories" id="subcategories100name"><a href="http://localhost/blog/sb/sb.cgi?cid=10">食事</a> (2)</div>
<div id="subcategories100list"><ul><li><a href="http://localhost/blog/sb/sb.cgi?cid=14">メモ</a> (1)</li>
</ul></div></li>
</ul></div></li>
<li><div class="subcategories" id="subcategories1name"><a href="http://localhost/blog/sb/sb.cgi?cid=0">趣味</a> (2)</div>
<div id="subcategories1list"><ul><li><div class="subcategories" id="subcategories200name"><a href="http://localhost/blog/sb/sb.cgi?cid=6">車</a> (1)</div>
<div id="subcategories200list"><ul><li><a href="http://localhost/blog/sb/sb.cgi?cid=7">VW</a> (1)</li>
</ul></div></li>
<li><div class="subcategories" id="subcategories201name"><a href="http://localhost/blog/sb/sb.cgi?cid=2">パソコン</a> (1)</div>
<div id="subcategories201list"><ul><li><a href="http://localhost/blog/sb/sb.cgi?cid=5">Linux</a> (1)</li>
<li><div class="subcategories" id="subcategories20200name"><a href="http://localhost/blog/sb/sb.cgi?cid=3">Windows</a> (1)</div>
<div id="subcategories20200list"><ul><li><a href="http://localhost/blog/sb/sb.cgi?cid=4">XP</a> (1)</li>
</ul></div></li>
</ul></div></li>
</ul></div></li>
<li><div class="subcategories" id="subcategories2name"><a href="http://localhost/blog/sb/sb.cgi?cid=1">ブログ</a> (1)</div>
<div id="subcategories2list"><ul><li><div class="subcategories" id="subcategories300name"><a href="http://localhost/blog/sb/sb.cgi?cid=8">Serene Bach</a> (1)</div>
<div id="subcategories300list"><ul><li><div class="subcategories" id="subcategories30100name"><a href="http://localhost/blog/sb/sb.cgi?cid=12">カスタマイズ</a> (1)</div>
<div id="subcategories30100list"><ul><li><a href="http://localhost/blog/sb/sb.cgi?cid=13">プルダウン</a> (0)</li>
</ul></div></li>
<li><a href="http://localhost/blog/sb/sb.cgi?cid=11">テンプレート</a> (1)</li>
</ul></div></li>
</ul></div></li>
</ul>
<script type="text/javascript">
<!--
FoldNavigation('subcategories0','on',false);
FoldNavigation('subcategories100','on',false);
FoldNavigation('subcategories1','on',false);
FoldNavigation('subcategories200','on',false);
FoldNavigation('subcategories201','on',false);
FoldNavigation('subcategories20200','on',false);
FoldNavigation('subcategories2','on',false);
FoldNavigation('subcategories300','on',false);
FoldNavigation('subcategories30100','on',false);
//-->
</script>
</div>
 
<script type="text/javascript">
<!--
generateSubcategoryTree();
//-->
</script>

最後の方で青色で示した script 要素全体がカテゴリーのプルダウンを制御する部分です。これを後の作業で使用しますので表示したHTMLソースを任意のファイル名で保存するか、そのままディスプレイに表示させておいてください（後の作業を行うと青色部分が表示されなくなります）。

３．プラグインファイルの修正

plugins ディレクトリにあるプラグインファイル FoldCategory.pm をダウンロードし、任意のエディタで開きます。
開いたら 70 行目あたりにある行の赤色部分

　　　　　　　　：
if ($cat) {
    $sub_list = &_category_tree(
        'cat'    => $var{'sortedcat'},
        'branch' => $cat->id,
        'num'    => $var{'entryinfo'}{'category'},
    );
}
$js = "\n".'<script type="text/javascript">'."\n<!--\n".$js."//-->\n</script>\n";
$cms->num(0);
$cms->tag('fold_category_list' => ($all_list) ? '<ul>' . $all_list . '</ul>' . $js : '');
$cms->tag('fold_category_script' => '<script type="text/javascript" src="'.$var{'conf'}->value('conf_srv_base').'menufolder.js" charset="utf-8"></script>');
return 1;
　　　　　　　　：

を削除して

　　　　　　　　：
if ($cat) {
    $sub_list = &_category_tree(
        'cat'    => $var{'sortedcat'},
        'branch' => $cat->id,
        'num'    => $var{'entryinfo'}{'category'},
    );
}
$cms->num(0);
$cms->tag('fold_category_list' => ($all_list) ? '<ul>' . $all_list . '</ul>' : '');
$cms->tag('fold_category_script' => '<script type="text/javascript" src="'.$var{'conf'}->value('conf_srv_base').'menufolder.js" charset="utf-8"></script>');
return 1;
　　　　　　　　：

に変更してください。パッチが使える方は下記のパッチをご利用ください。

--- FoldCategory.pm.bak Wed Mar 18 23:33:54 2006
+++ FoldCategory.pm     Wed Mar 18 23:34:25 2006
@@ -67,9 +67,8 @@
             'num'    =< $var{'entryinfo'}{'category'},
         );
     }
-    $js = "\n".'>script type="text/javascript"<'."\n>!--\n".$js."//--<\n>/script<\n";
     $cms-<num(0);
-    $cms-<tag('fold_category_list' =< ($all_list) ? '>ul<' . $all_list . '>/ul<' . $js : '');
+    $cms-<tag('fold_category_list' =< ($all_list) ? '>ul<' . $all_list . '>/ul<' : '');
     $cms-<tag('fold_category_script' =< '>script type="text/javascript" src="'.$var{'conf'}-<value('conf_srv_base').'menufolder.js" charset="utf-8"<>/script<');
     return 1;
 }

修正が終わったら保存し、修正した FoldCategory.pm を元のディレクトリにアップロードしてください。

４．テンプレートの修正

管理画面よりテンプレートの編集画面を開きます。ベースHTMLテンプレート（個別エントリー用HTMLを用いている場合はそちらも）に、すでに設定されているプルダウン化用サブカテゴリーリストの独自タグ

<!-- BEGIN fold_category -->
<div class="sidetitle">Categories</div>
<div class="side" id="categories">{fold_category_list}</div>
<!-- END fold_category -->

があると思いますので、これに２項の script 要素（青色）を追加して、下記のように変更してください。

<!-- BEGIN fold_category -->
<div class="sidetitle">Categories</div>
<div class="side" id="categories">{fold_category_list}
<span class="blue"><script type="text/javascript">
<!--
FoldNavigation('subcategories0','on',false);
FoldNavigation('subcategories100','on',false);
FoldNavigation('subcategories1','on',false);
FoldNavigation('subcategories200','on',false);
FoldNavigation('subcategories201','on',false);
FoldNavigation('subcategories20200','on',false);
FoldNavigation('subcategories2','on',false);
FoldNavigation('subcategories300','on',false);
FoldNavigation('subcategories30100','on',false);
//-->
</script></span>
</div>
<!-- END fold_category -->

なおサブカテゴリーリストの独自タグが

<!-- BEGIN fold_category -->
<dl class="category">
<dt id="categoryname">CATEGORIES</dt>
<dd id="categorylist">
<div id="categories">{fold_category_list}</div>
</dd>
</dl>
<!-- END fold_category -->

と、dl/dt/dd 要素で括られている場合は、

<!-- BEGIN fold_category -->
<dl class="category">
<dt id="categoryname">CATEGORIES</dt>
<dd id="categorylist">
<div id="categories">{fold_category_list}
<span class="blue"><script type="text/javascript">
<!--
FoldNavigation('subcategories0','on',false);
FoldNavigation('subcategories100','on',false);
FoldNavigation('subcategories1','on',false);
FoldNavigation('subcategories200','on',false);
FoldNavigation('subcategories201','on',false);
FoldNavigation('subcategories20200','on',false);
FoldNavigation('subcategories2','on',false);
FoldNavigation('subcategories300','on',false);
FoldNavigation('subcategories30100','on',false);
//-->
</script></span>
</div>
</dd>
</dl>
<!-- END fold_category -->

としてください。このパターンに該当しない場合も {fold_category_list} の直後に script 要素を挿入すれば大丈夫です。

とりあえずここで一旦保存し、再構築してください。トップページ等を表示して、サブカテゴリーリストが修正前と全く同じとおりにプルダウン化されていれば、２項および３項の修正は正常にできています。
プルダウンマークが全て消えている場合、

• ３項の FoldCategory.pm の修正が誤っている
• ４項の script 要素が挿入がされていない（再構築忘れ等）

のいずれかが考えられます。

５．プルダウン化するサブカテゴリーを選択

すでにお気づきと思いますが、前項で追加した script 要素に記述された

FoldNavigation('subcategories0','on',false);
FoldNavigation('subcategories100','on',false);
FoldNavigation('subcategories1','on',false);
FoldNavigation('subcategories200','on',false);
FoldNavigation('subcategories201','on',false);
FoldNavigation('subcategories20200','on',false);
FoldNavigation('subcategories2','on',false);
FoldNavigation('subcategories300','on',false);
FoldNavigation('subcategories30100','on',false);

はプルダウン化する親カテゴリーに1対1で対応しています。２項のスクリーンショットとの対応づけは下記のようになっています。少し下にスクロールすると同じようなスクリーンショットがありますので、そちらと見比べてください。

FoldNavigation('subcategories0','on',false); ← 日記
FoldNavigation('subcategories100','on',false); ← 食事
FoldNavigation('subcategories1','on',false); ← 趣味
FoldNavigation('subcategories200','on',false); ← 車
FoldNavigation('subcategories201','on',false); ← パソコン
FoldNavigation('subcategories20200','on',false); ← Windows
FoldNavigation('subcategories2','on',false); ← ブログ
FoldNavigation('subcategories300','on',false); ← Serene Bach
FoldNavigation('subcategories30100','on',false); ← カスタマイズ

お分かりの通り、表示順に並んでいます。

ここからプルダウン化したくないカテゴリーの FoldNavigation… を削除していきます。
サンプルでは最上位の親カテゴリーだけをプルダウン化しますので、それ以外のサブカテゴリーに対応する行（赤色部分）を削除します。

FoldNavigation('subcategories0','on',false); ← 日記
FoldNavigation('subcategories100','on',false); ← 食事
FoldNavigation('subcategories1','on',false); ← 趣味
FoldNavigation('subcategories200','on',false); ← 車
FoldNavigation('subcategories201','on',false); ← パソコン
FoldNavigation('subcategories20200','on',false); ← Windows
FoldNavigation('subcategories2','on',false); ← ブログ
FoldNavigation('subcategories300','on',false); ← Serene Bach
FoldNavigation('subcategories30100','on',false); ← カスタマイズ

４項の2つめのリストを元に修正した、完成後の独自カテゴリーは下記のようになります。青色が最終的に追加した部分となります。

<!-- BEGIN fold_category -->
<div class="sidetitle">Categories</div>
<div class="side" id="categories">{fold_category_list}
<span class="blue"><script type="text/javascript">
<!--
FoldNavigation('subcategories0','on',false);
FoldNavigation('subcategories1','on',false);
FoldNavigation('subcategories2','on',false);
//-->
</script></span>
</div>
<!-- END fold_category -->

６．保存・再構築

７．注意事項

カテゴリーの増減や移動を行った場合、上記の作業を再度行う必要があります。このカスタマイズはある程度カテゴリーが確定している状態で行うことをお勧めします。

８．初期のプルダウン状態を変更する

このカスタマイズとは直接関係ありませんが、プルダウン化プラグインを導入すると全てのカテゴリーが開いた状態になっています。これを閉じた状態にしておきたい場合、５項で追加した script 要素

FoldNavigation('subcategoriesX','on',false);

にある赤色部分の "on" を

FoldNavigation('subcategoriesX','off',false);

青色の "off" に変更して、保存・再構築してください。最初にページを表示した時、閉じた状態で表示することができます（一旦表示された後は Cookie でプルダウン化の状態が保持されます）。

このサイトの右下に表示しているカウンタがまもなく 1111111 に到達します。現在のアクセスからするとあと2日くらいです。

先日100万アクセス達成記念ということでキリ番ゲットの方にプレゼントという企画を行いましたが、しつこく今回も開催します。「キリ番」という意味では確率的に今回の方がより貴重であることは言うまでもありません。

ということで前回と同じ文面で恐縮ですが、1111111 のキリ番をゲットされた方は、カウンタおよびブラウザ内の他の部分を含んだキャプチャ画面をメールでお送り頂ければ、粗品進呈またはサイト紹介 *1 のいずれかをプレゼントとしてご用意させて頂きます。
ご希望のコースをメールまたは本エントリーのコメントでお知らせください。

これでしばらくキリ番企画はないと思われるかもしれませんが、次は 1234567 です。

*1：サイト内容によってはお断りする場合があります

Atelier Shuhei Weblog：隣の花は紅い

SitePoint Forums：force flash to play below dhtml menu?

１．サンプル

とりあえず作ってみました。

修正前／修正後

それぞれの右サイドバーにこうさぎとメロメロパークの Flash を置いています。エントリーにあるサムネール画像をクリックして拡大画像が表示された時に Flash がどのように表示されるかをご覧ください。今のところ Windows 2000/XP IE6/Firefox1.5/Opera8 で正常に隠れることを確認しています。

このサンプル用に初めてブログペットを登録しました（笑）。

２．修正方法

object 要素がHTML上にある場合と、そうでない場合の修正方法について記します。

２．１ object 要素がHTML上にある場合

下記の param 要素を object 要素内に追加します。

<param name="wmode" value="transparent">

それから embed 要素に wmode 属性を追加します。

wmode="transparent"

wmode 要素の value 属性に "transparent" を設定することで Flash ムービーの背景を透明に設定することができるようです。
おおざっぱに書いた Flash 用HTML コードへの挿入イメージは下記（青色部分）のようになります。

<object>
<param name="…" value="…" />
<param name="…" value="…" />
<param name="wmode" value="transparent">
<embed src="…" wmode="transparent" />
</object>

それぞれの挿入位置は任意です。なお embed 要素の一番最後に wmode 属性を追加する際は、タグを閉じるマーク（"/"）の前に半角空白を挿入してください。挿入しないと XHTML valid なページになりません。

２．２ object 要素がHTML上にない場合

ペット系のブログパーツは JavaScript で読み込む形式になっているものがあります。そのような場合は script 要素の src 属性に記述された URL をブラウザに入力して、表示（またはダウンロード画面）された内容をコピーして、それをページに貼り付けます。そこに２．１と同じ内容のHTMLコードがありますので、それを修正します。
なお、この変更を行った場合の Flash の動作について、当サイトでは保証致しません（単に背景に隠すことに着目した変更を行っているだけです）。予めご了承ください。
以下、BlogPet を例に説明します。

BlogPet のHTMLソースは下記のようになっています。

<script language="JavaScript" type="text/javascript" src="http://www.blogpet.net/js/hogehoge.js" charset="UTF-8"></script>

リストの青色部分をマウスコピーして、ブラウザのURLに入力します。IEであればダウンロード画面になりますので、一旦ファイルとして保存します。Firefoxであればソースが表示されますので、全ての内容をマウスコピーしてください。

その内容は下記のようになっていると思います。

var today=new Date();
var tseconds=today.getSeconds();
document.write("<object id='usa' classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0' width='130' height='200' align='middle'><param name='allowScriptAccess' value='sameDomain' /><param name='movie' value='http://www.blogpet.net/usa.swf' /><param name='play' value='true' /><param name='loop' value='false' /><param name='menu' value='false' /><param name='quality' value='high' /><param name='FlashVars' value='username=hogehoge&tseconds="+tseconds+"' /><embed src='http://www.blogpet.net/usa.swf' loop='false' menu='false' quality='high' bgcolor='#ffffff' width='130' height='200' name='usa' align='middle' allowScriptAccess='sameDomain' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' FlashVars='username=hogehoge&tseconds="+tseconds+"' /></object>");
document.write("<img src='http://www.blogpet.net/add_log.php?username=hogehoge&url="+document.URL+"&referrer="+document.referrer+"'>");

上記のコードを script 要素で括り、２．１と同様に param 要素と embed 要素へ wmode 属性を追加します（青色部分）。

<script type="text/javascript">
var today=new Date();
var tseconds=today.getSeconds();
document.write("<object id='usa' classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0' width='130' height='200' align='middle'><param name='allowScriptAccess' value='sameDomain' /><param name='movie' value='http://www.blogpet.net/usa.swf' /><param name='play' value='true' /><param name='loop' value='false' /><param name='menu' value='false' /><param name='quality' value='high' /><param name='FlashVars' value='username=hogehoge&tseconds="+tseconds+"' /><param name='wmode' value='transparent' /><embed src='http://www.blogpet.net/usa.swf' loop='false' menu='false' quality='high' bgcolor='#ffffff' width='130' height='200' name='usa' align='middle' allowScriptAccess='sameDomain' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' FlashVars='username=hogehoge&tseconds="+tseconds+"' wmode='transparent' /></object>");
document.write("<img src='http://www.blogpet.net/add_log.php?username=hogehoge&url="+document.URL+"&referrer="+document.referrer+"'>");
</script>

追加する際の注意点として、２．１では属性値を「"」で括ってましたが、２．２では必ず「'」で括ってください。誤って「"」を使用すると表示されなくなります。

修正が終わったら、これまで設定していた表示用のHTMLコードと入れ替えます。

３．関連サイト

ネットを検索したところ、下記の情報がありました。日本語入力や実行速度についての問題が記されています。

• Macromedia - Flash TechNote：背景が透明な Flash ムービーを作成する方法
• Macromedia - Flash TechNote：wmode を transparent に設定した際の注意点
• WEBLAB@AJIBIT：Flash/wmode

2006.10.10 追記：本カスタマイズを Ajax 化した「Ajax 月送りカレンダー」を公開しています。

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

下記のリンク先にある dayChecker.js をクリックして休日表示用カレンダースクリプトをダウンロードしてください。

download

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

ダウンロードした dayChecker.js を index.html と同じディレクトリにアップロードしてください。

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

テンプレートの <head>～</head> の間に下記の設定を追加します。月送りカレンダーの場合はカレンダーテンプレートの <head>～</head> の間に挿入してください。

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

src 属性には配置したスクリプトのURLを設定してください。スクリプトは utf-8 で作成しておりますので、ブログの文字コードが異なる場合は、スクリプトの文字コードをエディタ等を用いてブログの文字コードに変更するか、

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

と、青色で示した charset 属性に utf-8 を設定し、追加してください。

４．テンプレートの修正２（カレンダー表示タグの設定）

カレンダーを表示したい部分に下記のカレンダー表示用タグを追加してください。
４．１項および４．２項のリストを追加する場合、管理画面にある「設定」→「公開」の順にクリックし、次ページの下にある「アーカイブのマッピング」で「日別」の左側にチェックをつけて保存し、再構築してください。これを行わないとカレンダーが表示されませんのでご注意ください。

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

<MTIfArchiveTypeEnabled archive_type="Daily">
<div class="module-calendar module">
<h2 class="module-header"><$MTDate format="%B %Y"$></h2>
<div class="calendar">
<table id="calendarTable" summary="<$MTDate format="%Y/%m"$>">
<tr>
<th abbr="Sunday" class="sunday">Sun</th>
<th abbr="Monday">Mon</th>
<th abbr="Tuesday">Tue</th>
<th abbr="Wednesday">Wed</th>
<th abbr="Thursday">Thu</th>
<th abbr="Friday">Fri</th>
<th abbr="Saturday" class="saturday">Sat</th>
</tr>
 
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a>
</MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> 
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</div>
 
<script type="text/javascript">
setCurrentDate();
setWeekendAndHoliday('<$MTDate format="%Y"$>','<$MTDate format="%m"$>');
</script>
 
</MTIfArchiveTypeEnabled>

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

<MTIfArchiveTypeEnabled archive_type="Daily">
<div class="side">
<div class="calendar">
<table id="calendarTable" summary="<$MTDate format="%Y/%m"$>">
<caption class="calendarhead"><$MTDate format="%B %Y"$></caption>
<tr>
<th abbr="Sunday" class="sunday">Sun</th>
<th abbr="Monday">Mon</th>
<th abbr="Tuesday">Tue</th>
<th abbr="Wednesday">Wed</th>
<th abbr="Thursday">Thu</th>
<th abbr="Friday">Fri</th>
<th abbr="Saturday" class="saturday">Sat</th>
</tr>
 
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a>
</MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> 
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</div>
 
<script type="text/javascript">
setCurrentDate();
setWeekendAndHoliday('<$MTDate format="%Y"$>','<$MTDate format="%m"$>');
</script>
 
</MTIfArchiveTypeEnabled>

４．３ 月送りカレンダーの場合

カレンダー用アーカイブテンプレートの最後に下記を追加してください。

<script type="text/javascript">
setCurrentDate();
setWeekendAndHoliday('<$MTArchiveDate format="%Y"$>','<$MTArchiveDate format="%m"$>');
</script>

2006.09.12 以前に月送りカレンダーのカスタマイズをされた方

カレンダー用テンプレートの table 要素に id 属性を追加してください。

<table id="calendarTable" ?>

2006.03.23 以前に月送りカレンダーのカスタマイズをされた方

カレンダー用テンプレートの table 要素の summary 属性を下記のように変更してください。

<table summary="<$MTArchiveDate format="%Y/%m"$>">

また、下記の赤色部分を削除してください。

<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td align="center"><span class="calendar">
<!--追加--><MTCalendarIfToday><b></MTCalendarIfToday><!---->
<MTCalendarIfEntries><MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>" title="[<$MTEntryTitle$>]" target="_top">
<$MTCalendarDay$></a>
</MTEntries></MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><!--追加--><MTCalendarIfToday></b></MTCalendarIfToday><!----></span>
<MTCalendarIfBlank> </MTCalendarIfBlank>
</span></td>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>

2006.03.23 以降に月送りカレンダーのカスタマイズをされた方

下記の赤色部分を削除してください。

<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span<MTCalendarIfToday> class="today"</MTCalendarIfToday>></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a>
</MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> 
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>

５．テンプレートの修正３（スクリプト追加）

休日表示カレンダースクリプトを起動するスクリプトを <head>～</head> の間に下記の設定を追加するか、外部ファイル（この場合、dayChecker.js に追加するのが良いでしょう）として保存します。外部ファイルにする場合はリストの最初と最後にある script 要素を削除してください。
月送りカレンダーの場合はカレンダーテンプレートの </body> の直前に挿入してください。

<script type="text/javascript">
function setWeekendAndHoliday(y,m) {
    var element = document.getElementById("calendarTable");
    var summary = element.getAttribute("summary");
    var year = summary.split("/")[0];
    var month = summary.split("/")[1];
    if(!(year == y && month == m)){
        return;
    }
    var spans = element.getElementsByTagName("span");
    var day;
    for (i = 0; i < spans.length; i++) {
        if (spans[i].parentNode.nodeName == "TD") {
            if(spans[i].innerHTML.indexOf("href") != -1){
                day = spans[i].getElementsByTagName("a")[0].innerHTML;
            } else {
                day = spans[i].innerHTML;
            }
            if (isHoliday(year, month, day)) {
                spans[i].setAttribute('class', 'holiday');
                spans[i].setAttribute('className', 'holiday');
            } else if(isSaturday(year, month, day)) {
                spans[i].setAttribute('class', 'saturday');
               spans[i].setAttribute('className', 'saturday');
            }
            if (isToday(year, month, day)) {
                spans[i].parentNode.setAttribute('class', 'today');
                spans[i].parentNode.setAttribute('className', 'today');
            }
        }
    }
}
</script>

６．CSS修正

下記のセレクタを styles-site.css に追加してください。

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

初めてカレンダーをご利用になる場合はすべて追加し、すでにご利用の場合は today / sunday,holiday / saturday のみ追加してください。

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

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

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

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

また下記の color プロパティ（赤色）を削除してください。これは本日と土日祝日が重複した時に土日祝日の色を優先させるためです。

.today {
    display: block;
    text-align: center;
    color: #444444;
    border: 1px solid #444444;
}

６．３ 月送りカレンダーの場合

カレンダー用スタイルシートに下記を追加してください。

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

７．PHP化によるリアルタイムカレンダーから変更される場合

上記のカレンダーに置き換えてください。拡張子は .php のままで問題ありません。

2006.03.19 追記
月送りカレンダー（４．３項）のタグが誤ってましたので修正しました。

2006.03.23 追記
月送りカレンダーの説明が不足していましたので追記しました。

2006.03.24 追記
４．３の最初のリストが誤っていました（MTData→MTArchiveDate）ので修正しました。

2006.03.30 追記
土日祝日にリンクがある場合の考慮がもれてましたので、CSSを修正しました。

2006.04.07 追記
４項に日別アーカイブのアーカイブマッピングを追加する記述を追加しました。
また５．２項に追加すべきスタイルを追加しました（途中でセレクタ名を変更したことによる修正もれ）。

2006.09.12 追記
カレンダーのセレクタ名を一部修正しました。

カレンダーに土、日・祝日、および本日表示を行うための JavaScript です。このスクリプトにカレンダー解析スクリプトとCSSを加えることによって、スクリーンショットのような土・日・祝日・本日の装飾を行うことができます。振替休日やハッピーマンデーにも（多分）対応しています。

休日表示をするスクリプトをネットでいくつか見つけたのですが、カレンダー用のテーブルを作成しながら同時に休日を判定するタイプのものが多かったため、一旦マークアップされたカレンダーに対しても利用可能となる、汎用的なスクリプトを作ってみました。

このスクリプトは年月日から土、日・祝日、本日を判定するというシンプルなものです。JavaScript が利用可能であればブログツールやサービスに依存しません。
冒頭に述べた Movable Type 等のカレンダーを解析するスクリプトは別途エントリーする予定です（まとめて書くと収拾がつかなくなるため本エントリーは日付判定用スクリプトの紹介にとどめています）。

スクリプト作成にあたっては下記のサイトを参考にさせて頂きました。ありがとうございました（他にいくつか参考にさせて頂いたのですが失念しました、すいません）。

祝日について

なお、Movable Type のカレンダープラグインとして、nlog(n) さんの 休日表示カレンダープラグイン2 が有名です（Perl モジュールの Date::Japanese::Holiday が必要です）。ご紹介まで。

１．機能

このスクリプトは与えられた年月日を元に下記のチェックを行います。

• 本日
• 土曜日
• 日曜/祝日（ハッピーマンデー・振替休日含む）

春分の日・秋分の日の算出は1980?2099に対応しています。また国民の祝日に関する法律の一部を改正する法律案により、5月6日が振替休日になるケースも考慮しています。

前後数十年の全ての休日が考慮できているかどうかは定かでありません。不具合ありましたらご連絡ください（ただし遠い過去または未来について考慮する予定はありません）。

２．ダウンロード

下記のリンクをクリックしてダウンロードしてください。

dayChecker.js
dayChecker.js（イギリスの休日表示用）

2006.03.15 Ver 1.00
2006.04.11 Ver 1.00en イギリス版追加
2006.04.11 Ver 1.01 バグ修正
2006.04.15 Ver 1.02/Ver 1.01en バグ修正
2006.04.16 Ver 1.03/Ver 1.02en バグ修正
2006.08.03 Ver 1.04/Ver 1.03en バグ修正
2007.04.21 Ver 1.05 春分の日・秋分の日の振替休日が表示されない不具合修正
2009.02.17 Ver 1.06 シルバーウィーク対応

３．アップロード

ダウンロードしたスクリプトを、Movable Type / Serene Bach の場合は index.html のあるディレクトリにアップロードしてください。
他のブログサービスで利用する場合につきましてはそれぞれのアップロード先に従います。

４．スクリプトのインクルード

スクリプトをHTMLページに読み込ませるため、テンプレート（またはHTML）の <head>～</head> の間に下記の設定を追加します。

<script type="text/javascript" src="http://domain/path/to/dayChecker.js"></script>

src 属性には配置したスクリプトのURLを設定してください（アップロード先が index.html と異なるディレクトリの場合はご注意ください）。またスクリプトは utf-8 で作成しておりますので、ブログの文字コードが異なる場合は、スクリプトの文字コードをエディタ等を用いてブログの文字コードに変更するか、

<script type="text/javascript" src="http://domain/path/to/dayChecker.js" charset="utf-8"></script>

と、青色で示した charset 属性に utf-8 を設定し、追加してください。

５．API

上記の機能を利用する場合、下記のインタフェースを起動してください（それほどたいそうなものではありませんが）。

isHoliday(year, month, day)

機能

与えられた年月日の日・祝日判定を行います。

パラメータ

year - 年（4桁）

month - 月

day - 日

返却値

日・祝日の場合:true

日・祝日以外の場合:false

isSaturday(year, month, day)

機能

与えられた年月日の土曜日判定を行います。

パラメータ

year - 年（4桁）

month - 月

day - 日

返却値

土曜日の場合:true

土曜日以外の場合:false

isToday(year, month, day)

機能

与えられた年月日の本日判定を行います。

パラメータ

year - 年（4桁）

month - 月

day - 日

返却値

本日の場合:true

本日以外の場合:false

setCurrentDate()

機能

この関数を起動した年月日を保持します。他の関数を起動する前にこの関数を必ず起動してください。この年月日が判定基準元の年月日となります。

パラメータ

なし

返却値

なし

2006.04.11 追記
イギリス版を追加しました。また日本語版のスクリプトに一部誤りがありましたので修正しました。

2006.08.03 追記
スクリプトで8月・9月の本日表示ができない不具合を対処しました。

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

今月号のインターネットマガジン 2006年4月号の巻頭インタビューで「ブログツールのイノベーター・トロット夫妻 シックスアパート創業者」というタイトルでブログツールの現在と今後についての記事が掲載されています。

また、「マッシュアップ Web2.0的サービス構築術」という特集も組まれています。マッシュアップとはいくつかのWebコンテンツを連動させることで、マッシュアップの解説・開発手法・現在の公開WebサービスのAPI一覧およびマッシュアップサービス・ビジネスにおける注意点・マッシュアップの将来等が掲載されており、Web2.0 のひとつの手法であるマッシュアップを知るための情報としては充実した内容ではないかと思います。

最新号の特集記事やバックナンバー等はインターネットマガジンのWebサイトで会員登録すればPDFで参照することができます。

なおインターネットマガジンは5月号（3月末発売）で休刊になるようで、大変残念です。

maonekoblog：インターネットマガジンが休刊へ

ITmedia News：「インターネットマガジン」が休刊に

１．概要

Movable Type 3.2 のデフォルトテンプレートや公開テンプレートの検索結果画面では日本語が表示されるようになておりますが、そのテンプレートである

search_templates/default.tmpl

には表示する日本語は含まれていません。またこのテンプレートに直接日本語を記述して検索を実行すると、「??????????」という文字しか表示されません。

検索結果画面で日本語を表示させるには MT_TRANS タグを使用します。まずこのタグを利用した日本語表示の仕組みを説明します。

２．日本語が表示される仕組み

例えば、デフォルトテンプレートで表示される検索結果画面の「サイトを検索:」という文字は default.tmpl にある青色部分の MT_TRANS タグが該当します。

　　　　　　：
<form method="post" action="<$MTCGIPath$><$MTSearchScript$>">
 
<h3><MT_TRANS phrase="Search this site:"></h3>
　　　　　　：

Movable Type のプログラムは、この MT_TRANS タグ

<MT_TRANS phrase="Search this site:">

に記述された phrase 属性の値 "Search this site:" と同じ文字列を、

lib/MT/L10N/ja.pm

から検索します。

このファイル ja.pm の中には、"Search this site:" にマッチする文字列（青色部分）が含まれた行

　　　　　　：
'Search Results from' => '検索結果',
'Search this blog:' => 'ブログを検索: ',
'Search this site:' => 'サイトを検索: ',
'Search:' => '検索: ',
'Search: new comment search' => 'コメントの検索',
　　　　　　：

がありますので、そこから右側に書かれた文字列「検索結果（赤色部分）」を取得して検索結果画面に表示します。

３．日本語を変更する

スクリーンショットのように「サイトを検索」という文字列を「検索文字列を入力してください」に変更したい場合、ja.pm にある下記の行

'Search this site:' => 'サイトを検索: ',

を

'Search this site:' => '検索文字列を入力してください: ',

にすればOKです。

４．日本語を新しく挿入する

この phrase 属性の値はご自身で新しく作ることができます。テンプレートに新しい日本語を挿入したい場合、表示させたい位置に、

<MT_TRANS phrase="hogehoge">

を記述します。そして日本語変換用ファイル ja.pm に

'hogehoge' => 'ほげほげ',

を追加します。

５．注意事項

ja.pm へ新しく行を追加場合、追加位置は概ねどこでも大丈夫ですが、下記に示す部分に挿入してください。

## The following is the translation table.
 
%Lexicon = (
　　　　：
 （ここへ追加）
　　　　：
);
 
1;

既存の行は先頭にTAB文字が含まれていますが、新しく追加する行にTAB文字を含めなくても正常に動作します。

また phrase 属性の値については他に同じ文字列か存在しないか検索して調べてから追加しましょう。同じ文字列が存在する場合は後に書かれたものが有効になります。

６．マッチする行が存在しない場合

phrase 属性の値に該当する行が ja.pm に存在しない場合、phrase 属性値がそのまま表示されます。最初の例であれば「Search this site:」が表示されます。したがって phrase 属性値についてはそれなりに意味のある言葉（英単語）を付与するようにしましょう。

<?xml version="1.0" encoding="utf-8"?>

が画像枠の表示に影響しています。当サイトでは1行目にXML宣言を記述しているため、実験サイト（XML宣言なし）と異なる結果になっていました。
表示の違いについては以下のサンプルでご確認ください。

XML宣言あり／XML宣言なし

XML宣言が影響する原因は、下記の2点です。

1. XML宣言が記述されている場合に「後方互換モード」になる
2. IE6 の後方互換モード（および5.5以前）の場合、img 要素に padding プロパティが有効にならない

以下、順を追って説明します。

概要（標準準拠モードと後方互換モード・DOCTYPE宣言）

IEやMozilla 等のブラウザには、CSSに準拠してHTMLを表示するモードを「標準準拠モード」と、古い形式でマークアップされたHTMLに対応するための「後方互換モード」に対応しています。どちらのモードで表示されるかについては、以下のような DOCTYPE 宣言（文書型宣言）に依存します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

標準準拠モードと後方互換モード、および DOCTYPE 宣言の種類等については下記に詳細な説明があります。

今すぐ調べる！ホームページ作成リファレンス：標準モードと互換モードについて

カスタムチャンス! 雑記帖：文書型宣言とブラウザの表示モード

XML宣言が記述されている場合に「後方互換モード」になる

1番目の原因で、IE6 では DOCTYPE 宣言を1行目（先頭）に書かないと、必ず「後方互換モード」として解釈されてしまうバグが存在します。つまり1行目にXML宣言が記述されているとこのバグが発生します。
カッコ書きで「先頭」と明記しているのは、同じ行の前にXML宣言を記述しても後方互換モードとして解釈されるためです。

Lucky bag::blog：xml宣言について

後方互換モードで img 要素の padding プロパティが有効にならない

そして2番目の原因として、IE6 の後方互換モードでは img 要素の padding プロパティが有効にならないというバグがあります。標準準拠モードでは問題なく表示されます。

CSSバグリスト＠CSSバグ辞典スレッド：img要素にパディングが効かない

このような経緯で、マークアップ1行目のXML宣言によって「画像枠が表示されない」という問題が発生します。

まとめ

IEで画像枠（padding）を表示するためには、下記の条件を満たしている必要があります。

1. 1行目の先頭に DOCTYPE 宣言がある
2. 標準準拠モードが有効になるDOCTYPE 宣言が記述されている

2番目の「標準準拠モードが有効になるDOCTYPE 宣言が記述されている」の意味は、DOCTYPE宣言を1行目の先頭に記述しても、宣言内容によっては後方互換モードとして解釈される場合があります。
下記の DOCTYPE 宣言では標準準拠モードとして解釈され、画像枠が表示されることを確認しています。

HTML 4.01 Strict DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

HTML 4.01 Frameset DTD（URLあり）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 4.01 Tranditional DTD（URLあり）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

DOCTYPE宣言と標準準拠モード対応について

2番目にある「標準準拠モードが有効になるDOCTYPE 宣言が記述されている」ですが、DOCTYPE宣言と標準モードの対応状況については Microsoft の下記のサイトに掲載されています。

MSDN Online：Internet Explorer 6 における CSS の拡張の !DOCTYPEの例

該当部分を引用させて頂くと下記の通りです。

一覧の「Label / Definition / URL あり / URLあり」の組み合わせで有効（=標準準拠モード）・無効（後方互換モード）が決まります。例えば「HTML 4.01 Transitional」については「URLあり」の場合のみ有効になることがお分かりになると思います。
XHTMLについてはXML宣言を削除すれば有効になります。

*1 スクリーンショットは完成イメージです。

ＤＳ Ｌｉｔｅ で

現在公開中の Serene Bach・リアルタイムカレンダープラグインですが、「本日の日付が正常に表示されない」というご連絡を頂きまして、バグであることが判明しました。
具体的にはカレンダーの表示月と当月比較の処理に誤りがあり、当月が2月から9月の場合にこの不具合が発生します。

下記に修正版の RealTimeCalendar.zip または RealTimeCalendar.lzh を置きましたので、ご利用中の方はクリックしてアーカイブをダウンロードし、プラグインを差し替えください（元エントリーも変更済みです）。

• RealTimeCalendar.zip
• RealTimeCalendar.lzh

以上です。
ご迷惑をおかけ致しますがよろしくお願い致します。

世界中の１％の人々へ：TinyMCE Plugin for Movable Type Ja Beta4 で提供されているプラグインのご紹介です。

このプラグインはAjaxify/EnhancedEntryEditingに機能追加をして配布されていたAjaxify/EnhancedEntryEditing日本語版の後継システムで、エントリー編集画面をスクリーンショットのようなWYSIWYGエディターに変換します。
ちなみにTinyMCEとはJavaScriptによるHTML WYSIWYGエディター（オープンソースプラットフォーム）で、CMSと非常に親和性があります（というようなことが配布元サイトに書かれています）。

TinyMCE Plugin for Movable Type Ja の特徴は下記の通りです。

• エントリー編集画面の「エントリーの内容」「追記」「概要」画面がWYSIWYGエディタになります。
• WYSIWIGのON・OFFを切り替えられるので Movabl Type デフォルトの編集画面も使用可能です。
• 編集画面の縦幅をドラッグ（または伸縮用アイコン）変更することができます。

ということで以下利用方法です。詳細については配布元に書かれておりますのでそちらを参照ください。

１．ダウンロード

TinyMCE Plugin for Movable Type Ja Beta4の「インストールについて」の説明文のリンクをクリック。ジャンプしたページのやや下にある「TinyMCE Plugin for Movable Type Ja」のリンクをクリックするとアーカイブをダウンロードできます。

２．インストール

ダウンロードしたアーカイブを解凍して、中にある ReadmeJa.txt 以外のディレクトリをそのまま mt.cgi のディレクトリにアップロードします。アップロード後、「メイン・メニュー」→「システム・メニュー」→「プラグイン」を順にクリックして、TinyMCEforMT バージョン Beta4 Ja が表示されていればOKです。

３．利用方法

管理画面の「新規エントリー」または「エントリー」→任意のエントリーをクリックして編集画面に進みます。タグ挿入ボタンの右側に新しいボタンが増えていますが、それをクリックする前に下方にある「改行設定」を「なし」に変更してください。
次に「WYSIWYG」をクリックするとスクリーンショットのようなWYSIWYG画面に切り替わります。そのボタンの左側にあるアイコンは編集画面の高さを変更するものです。またWYSIWYG画面でも編集画面右下をドラッグすると画面の高さを調節することができます。

４．InvalidateLinkOfInsertTag.pl をご利用の場合の修正

当サイトで公開している InvalidateLinkOfInsertTag.pl プラグイン（エントリー編集画面のHTMLタグ挿入ボタンクリックでバックスクロールする不具合を解消）をご利用の場合、TinyMCE Plugin for Movable Type Ja が正常に動作しませんので、InvalidateLinkOfInsertTag プラグインを無効にするか、ファイル自体を削除し、

plugins/TinyMCEforMT/TinyMCEforMT.pl

を任意のエディタで開き、青色部分を追加してください。

HTML
    chop ($old); $old = quotemeta ($old);
    chop ($add1);
    chop ($add2);
    $$template =~ s/($old)/$add1$1$add2/;
    $$template =~ s/href="#"/href="javascript:void(0);"/g;
}
 
1;
__END__

修正後、同じディレクトリにアップロードしてください。

大丈夫と思いますが TinyMCE Plugin for Movable Type Ja の動作を完全に保証するものではありませんので予めご了承ください。

まず、通常のサブカテゴリーリストにツリー化プラグインを設置する例です。カテゴリーリスト用の独自タグに青色のタグを追加します。

<!-- BEGIN category -->
<dl class="category">
<dt id="categoryname">CATEGORIES</dt>
<dd id="categorylist">
<div id="categories">{category_list}</div>
<script type="text/javascript">
<!--
generateSubcategoryTree();
//-->
</script>
</dd>
</dl>
<!-- END category -->

ポイントは、独自タグに設定するスクリプトの挿入位置を </dd> の前に配置することです。スクリプトを </dl> や <!-- END category --> の後方に配置すると、リストが正常に表示されません（IEでは表示が一部消えてしまう事象が確認されています）のでご注意ください。

また、カテゴリーのプルダウン化プラグインと併用する場合は下記のようになります。

<!-- BEGIN fold_category -->
<dl class="category">
<dt id="categoryname">CATEGORIES</dt>
<dd id="categorylist">
<div id="categories">{fold_category_list}</div>
<script type="text/javascript">
<!--
generateSubcategoryTree();
//-->
</script>
</dd>
</dl>
<!-- END fold_category -->

以上です。
CSS等の設定については元のエントリーを変更せずにできましたが、テンプレートによっては若干設定が異なるかもしれませんので予めご了承ください。

ツリーと罫線が同時に表示されない場合、 li 要素に罫線を表示する設定になっている可能性があります。ツリー化画像も li 要素に対して与えており、同じ要素に異なる画像を同時に表示することはできません。
このような場合、罫線画像を ul 要素に与えれば、異なる画像を同時に表示できると思います（冒頭のスクリーンショットはそのような設定になっています）。

2006.12.24 追記
画像が正常に表示されない場合の対処を追加しました。

背景画像を固定するのエントリーで背景画像を透過させるカスタマイズを紹介しましたが、背景画像を薄く透過する方法についてご質問を頂きましたので、本エントリーで紹介致します。

以下、公開テンプレートの3カラム固定レイアウトを例にした説明です。リキッドレイアウトの場合、ここで紹介する方法では全てのカラムできれいに透過させることができませんが、部分的に透過する方法を４項で説明しています。
完成サンプルはいずれもエントリーの最後のリンクからご覧ください。

１．背景色の削除

カラム横に表示される背景色の設定（赤色部分）をを削除します。この背景色の代わりに背景画像を表示します。

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

２．背景画像の表示

CSSに body セレクタを追加して背景画像を指定します。ここでは background-attachment プロパティを追加して画像を固定していますが固定しない場合は不要です。

body {
    background-image: url(hogehoge.gif);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-attachment: fixed;
}

３．ブログ全体を透過する

２項の body セレクタに下記の filter プロパティおよび opacity プロパティ（青色部分）の追加します。これでブログ全体を透過して背景画像を表示することができます。

body {
　　　　　：
　　　　（略）
　　　　　：
    filter: Alpha(opacity=80);
    opacity:0.8;
}

プロパティ値にある「80」 や「0.8」がブログ全体の透明度を表しますのでお好きな比率に調整してください。

４．リキッドレイアウトの場合

本サイトで公開しているリキッドレイアウトテンプレートはCSSの制約上、左右サイドバーの余白部分について背景画像を薄く表示することができません。ということでここでは中央カラムのみ透過する方法を紹介します。

２項および３項の設定を行った後、.blog セレクタに background プロパティを設定してください。

.blog {
    padding: 10px;
    font-size: small;
    color: #36414d;
    background: #ffffff;
}

公開テンプレートに設定したサンプル（リキッドレイアウト／固定レイアウト）

画像は Suggestive Contour Gallery より拝借しました。

2006.03.10 追記
Firefoxで正常に表示されていなかったため、CSSを修正しました（@import 文が誤ってました）。

2月20日に発売された『週刊東洋経済』臨時増刊の「ブログキャスター」を読みました（買ったのは先週だったのですが）。
内容は現在活躍中のブロガーが、その方がご自身のブログで扱っている分野の時事について、誌面の1ページを担当しています。

一般的な雑誌との違いは、他がメインとなる記事や特集があるのに比べ、この雑誌はほぼ全ての記事に同じ比重が置かれていることです。またひとつの話題について異なる二人のブロガーの記事がペアで掲載されているのも特徴で、どのような視点で書いているかという観点で読む楽しみもあります。

ジャーナリストやそうでない方の文章が渾然一体となった、雑誌としては異色の形態で、「ブログ」をリアルでサーフィンするような印象の雑誌です。
と書いておきながら面白かったのは、冒頭の「オリンピック選手のトリノ開催中のブログ更新自粛」でした。

以下、今回執筆されたキャスターのブログ一覧です（掲載順）。当サイトのテンプレートユーザさんもいらっしゃいました。

ayumiのショコラダイアリー。

http://blog.livedoor.jp/ayumisroom/

男、甘道マッシグラァ

http://amaimono.exblog.jp/

花粉観察ライブ

http://blog.livedoor.jp/melissos/

耳鼻科医の診療日記

http://jibika.exblog.jp/

majestic blue：z-net blog

http://blog.livedoor.jp/znet/

KET SEE BLOG

http://ketto-see.txt-nifty.com/blue_sky_blue/

アカデミー賞サイト オスカーノユクエ

http://oscar-no-yukue.com/modules/weblog/index.php

沖縄・東京・そしてニューヨーク

http://chacha259.ti-da.net/

松浦晋也のL/D

http://smatsu.air-nifty.com/lbyd/

国立天文台

http://www.nao.ac.jp/

サマンサタバサジャパンリミテッド

http://www.samantha.co.jp/

真鍋かおりのここだけの話

http://manabekawori.cocolog-nifty.com/blog/

アフィリエイト道

http://plaza.rakuten.co.jp/usapi/

虚構新聞社

http://www.f7.dion.ne.jp/~moorend/news/

株式市場の中期予測

http://xxpp.blog21.fc2.com/

村上ファンド（村上世彰）ニュース

http://mfs.blog33.fc2.com/

クマガイコム

http://www.kumagai.com/

Life＆Ｍoney

http://yaplog.jp/fp-akinko/

サイボウズ青野の３日ボウズ日記

http://blog.cybozu.co.jp/aono/

元機関投資家の「株で生活する方法」

http://bose.blog.ocn.ne.jp/

山村幸広のインターネットブログ

http://blog.excite.co.jp/yamamura/

無職３０男が「株」でNEETから億万長者！

http://blog.livedoor.jp/neeter/

渋谷ではたらく社長のblog

http://shibuya.ameblo.jp/

株・ストラテジストの「ここ、知っとこ！」

http://ameblo.jp/someinozakura/

Espresso Diary@信州松本

http://blog.livedoor.jp/takahashikamekichi/

為替王

http://blog.livedoor.jp/kawase_oh/

為替相場と付き合う方法

http://eeef.seesaa.net/

構造計算と耐震診断技術者のブログ

http://kozo2005.blog29.fc2.com/

Blog☆『不動産業戦略e-REVIEW』

http://fudou3.jugem.cc/

katolerのマーケティング言論

http://katoler.cocolog-nifty.com/marketing/

R30::マーケティング社会時評

http://shinta.tea-nifty.com/nikki/

霞が関官僚日記2.0

http://d.hatena.ne.jp/kanryo/

埼玉県和光市議会議員(36歳、最年少)　松本たけひろの今日の雑感

http://takeyan.ameblo.jp/

シバレイのblog 新イラク取材日記

http://reishiva.exblog.jp/

境界線の記憶

http://www.ne.jp/asahi/n/toyoda/

大関栃東公式ブログ

http://www.tochiazuma.jp/

居酒屋礼賛

http://hamada.air-nifty.com/

にっけいしんぶん新聞

http://nikkeiyokyom.ameblo.jp/

面白いサイトを見つけたよ。

http://omosiroi.jp/

oneファイル

http://plaza.rakuten.co.jp/exivexiv/diary/

社会的分析ブログ

http://nakano.main.jp/blog/

ザ・教室 blog 教師からのメッセージ

http://shiozaki.info/mt/

柴田敬三の「集まれ、世直しブログ」

http://shibatakz.exblog.jp/

牛は何を食べたらいいのか？

http://sspirits.cocolog-nifty.com/beef/

食・食品の安全・食育を考える?仙台?

http://plaza.rakuten.co.jp/safetyfood/

ケータイ業界・噂の真相

http://226.cocolog-nifty.com/

舞台芸術の小窓

http://arts.jugem.jp/

ナゴヤスローライフ

http://mssy.blogzine.jp/ngo/

上昇気流なごや

http://www.maing.co.jp/maimai/isono/

上海万華

http://shanghaibanka.blog38.fc2.com/

POSSO <TORINOなイタリア>

http://plaza.rakuten.co.jp/torino/diary/

井田朱音 ☆ diary

http://ameblo.jp/ida-akane/

『ブログキャスター』 編集部日記

http://blogcaster.seesaa.net/

Amazon アソシエイトを利用して商品リンクをブログに貼り付けている方は多いと思いますが、デフォルトの商品リンク設定では他のブログでよくみかけるような表示になりません。

０．Amazonアソシエイトのデフォルト商品リンク

ブログを始めた頃、これと異なるデザインのリンクを見かけて、「どうやって表示しているのだろう？」と、画像横に表示されたツール配布元のクレジットリンクに気がつかずにネットで調べた記憶があります（バカ）。

ということで、Amazonアソシエイトのリンク作成支援ツールをまとめてご紹介します。ツールの利用にあたってはAmazonアソシエイトへの登録が完了していることが前提です。

１．Amazlet

NDO::Weblog：amazlet - Amazon アフィリエイト簡単作成ツールです。
利用方法は、上記ページ内にある amazlet のリンクをクリックして、新しく開いたウィンドウ内のセットアップというリンクをクリックします。次ページでご自身のアソシエイトIDを設定し、「次へ」をクリックして、次ページにある「amazlet it!」のリンクをブラウザの「リンク」へドラッグまたは右クリックして「お気に入りに追加」を選択します。

ブラウザでAmazon の任意の個別商品のページに進み、リンクの「amazlet it!」をクリックするか、お気に入りから「amazlet it!」すると、商品リンクを作成するウィンドウが開きます。該当のページに進まなくても「amazlet it!」でウィンドウを開いてから商品を検索し、「この商品のリンクを作る」で選択しても大丈夫です。

表示されたページで「商品情報リンク (レビューあり・なし)」「テキストリンク」「イメージリンク」「商品情報リンク」がありますのでお好きなタイプを選んで、テキストエリアに表示されたコードをブログの任意の位置に貼り付けます。

[完成例]

ブログ簡単パワーアップ Movable Type スーパーカスタマイズテクニック posted with amazlet on 06.03.04 藤本 壱 技術評論社 (2005/11/08) おすすめ度の平均: 待ってました！ Amazon.co.jp で詳細を見る

表示するレイアウトの横幅が狭いと表示内容によってレイアウトが崩れる場合がありますので、私は商品リンク全体を table タグで括っています。

２．G-tools

Goodpic プログ：Amazonアフィリエイト便利ツール　面倒なHTML作成なしで商品紹介が元記事のようで、実際にはG-Toolsのページがメインです。

G-Tools からのリンク作成方法は、テキストエリアに検索したい商品名等を入力し、「商品を検索」をクリック。次ページで目的の商品の右側にある「ブログで感想を書く」をクリックします。次のページで気に入ったリンクがあれば、その右側にある「このデザインに決定」をクリックします。
上のタブで「ベーシック」「価格を表示」「シンプル」「関連商品つき」「<table>なし」「画像のみ」等があり、リンクのバリエーションはかなり豊富です。

次のページでアソシエイトIDや各オプションを設定して「オプションの変更を反映する」をクリックして、テキストエリアに表示されたコードをブログの任意の場所に貼り付けます。

[完成例]

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

リンクつき画像に青色の枠線が表示されるのを避けるためには、オプション設定で「カスタムCSS」を選択して、スタイルシートに

.g-tools_img img {
    border: none;
}

を追加すれば良いでしょう。直接 img タグに style="border: none;" を追加する手もありますが外部ファイルによる設定を推奨します。

G-Tools のトップページにはプラグインやブックマークレットの紹介もありますのでさらに便利に使うことができます。

３．Amazie

Amazie（アメイジー）はAmazon の商品を Flash を用いて表示するツールです。これは複数の商品を一ヶ所に表示する場合に便利です。

設定方法は、トップページからキーワードを入力して「検索」をクリックします。表示された後ジャンルを選択しながら目的の商品を探します（若干動作にタイムラグがあります）。表示されている商品が切り替わって表示されますので、レイアウトタイプから横・縦を選び、次の画面でアソシエイトID、配色等を設定し、テキストエリアに表示されたコードをブログの任意の場所に貼り付けます。

[完成例]

４．Amzlsh

Amazonの商品をページの内容に応じて Flash で自動的に選択・表示するツールです。イメージは Google Adsense の Amazon版です。
Amzlsh のページからアソシエイトIDや配色を決定してテキストエリアに表示されたコードをブログの任意の場所に貼り付けます。

[完成例]

５．AsociateHelper

IE専用のインストール型作成支援ツールです。AsociateHelperのページのダウンロードから実行ファイルをダウンロードし、ダウンロードしたファイルをダブルクリックしてインストールします。

リンク生成方法は、リンクを生成したい Amazon の商品ページへ移動し、右クリックで「AsociateHelper」を選択します。選択すると、ウィンドウが開きますので、そこで表示方法を設定し、表示されたコードをブログの任意の場所に貼り付けます。

[完成例]

ブログ・オン・ビジネス 企業のためのブログ・マーケティング

６．Yasazon

Yasazonは、Yahoo! Web検索経由でアマゾンを検索する商品検索サイトで、ここから商品リンクを作ることができます。GuStyleさんのAmazonアソシエイト 作成支援ツールからのトラックバックで知りました。ありがとうございます。

使用方法は、テキストエリアに検索文字列を入力して検索し、検索結果からお好きな商品の右側にある「これをブログに貼り付ける」をクリックします。次のページで表示されたコードをブログの任意の場所に貼り付けます。

[完成例]

Blog Hacks ―プロが教えるテクニック&ツール100選 posted with Yasazon on 2006.03.04 [copy] 宮川 達彦, 伊藤 直也 ￥ 3,045 日本発のHACKS 日本発のオライリー本を評価したい プラグインの開発する人には向いていません Blogいじりをする方必読 ブログいじりはたのしい。

７．All Consuming

All Consuming：アフィリエイトリンク作成ツールです（特に名称はないようです）。Kazabana さんからのコメントで知りました。ありがとうございました。

使用方法は、上記のページにある作成フォームにアソシエイトIDと紹介したい商品のASIN/ISBNを入力してフォームを送信します。次のページで表示されたコードをブログの任意の場所に貼り付けます。

[完成例]

Movable Typeで挑戦! かんたんビジネスブログ作成術 posted with All Consuming at 2006. 3. 9 by 定平 誠, 若狭 靖弘 技術評論社 (2006/03/28) 大型本 定価：￥ 3,444 価格：￥ 3,444 売り上げランキング: 近日発売　予約可 Amazon.co.jp で詳細を見る All Consuming でブログの評判を見る

８．Amazon Search

drk7.jp：Amazon Searchは、ホームページ上に JavaScript を貼り付けるだけで、ご自身のページ内容に関連する Amazon 内の商品を表示することができるサービスです。

使い方はAmazon Search 導入支援ツールの表に必要事項を設定します。設定後、表示されたコードをブログの任意の場所に貼り付けます（サービス毎に設定方法が書かれています）。なお、アクセスの高いサイトでの利用については事前連絡が必要ですのでご注意ください。

[完成例]

９．Affiliate Helper

drk7.jp：Affiliate Helperは、ブログに貼り付けているアフィリエイト商品リンクの内容を変更したい時、ブログの再構築を行わずに商品リンクの内容を変更できるツールです。
もう少し具体的に説明すると、HTMLでマークアップされた商品リンク（他のリンクでも可）を Affiliate Helper ツールのデータとして取り込み、Affiliate Helper ではそのデータを JavaScitpt で表示させられるように変換します。JavaScript で表示させるデータはページが更新されるたびに最新のデータを読み込むので、あとはその JavaScript に関連する商品リンクのHTMLタグを Affiliate Helper 上で変更すればブログの再構築なしで変更できる、という訳です。モジュール化の一種です。

上記のページに詳細な説明がありますので、ここでは割愛させて頂きます。なお Windows 自宅サーバでも正常に動作するようです。

１０．Amazon Quest

Amazon Quest は、可愛いキャラクターが店内を歩きながら展示されている商品を見るという、RPG風のツールです。

使い方は Amazon Quest 作成ページで ISBN・ASIN を20冊分設定、また書棚左上のプレートのタイトルや書棚左下の店員さんのコメントを入力します。キャラクターは20種類近く用意されています。全ての項目を入力したら「作成」をクリックして、表示されたコードをブログの任意の場所に貼り付けます。

[完成例]

Amazon Quest

１１．Amazy

Amazyは、クチコミ・トラックバックによるクチコミ、レビューの紹介、価格比較システムによる最安値の調査があるようです。

[完成例]

Movable Type例解テンプレートタグ辞典―目的引きリファレンス+実例サンプル集

毎日コミュニケーションズ

エビスコムテックラボ（著）

発売日：2006-04

発送時期：通常24時間以内に発送

ランキング：33744

amazon.co.jpで詳細をみる (Amazy)

１２．Amac

Amacは、個別商品リンクの「Amazon商品紹介ツール」と別に、Googleアドセンス風のAmazon広告「Amazon商品の広告表示ツール」が生成できるようになっています（サンプル）。広告の作り方は「カテゴリ詳細」タブをクリックするところから始めてください。

[完成例]

Movable Typeでつくる!最強のブログサイト ソーテック社　2006/02 売り上げランキング： Amazonで詳しく見る　Ads by Amac

１３．a4t.jp

a4t.jp は、トラックバックを（に）送信してリンク掲載サイトへのアクセスアップを図っています。また、表示項目をチェックボックスで細かくカスタマイズできるようになっています。

[完成例]

	ブログ簡単パワーアップ Movable Type スーパーカスタマイズテクニック 著者:藤本 壱 出版社:技術評論社 出版日:2005-11-08 ランキング:17760位 おすすめ度: Amazon.co.jp で詳細を見る
powered by a4t.jp

１４．Ad on DemanD

Ad on DemanDは、選んだカテゴリ、キーワードに従って内容が動的に変化するツールです。完成例は1件しか表示していませんが、最大10件まで表示することができます。

[完成例]

Wait for feeding...

１５．Amagle

Amagle は広告型リンク作成ツールです。厳密には、HTMLはサンプルを元に手動で作成する必要があるます。ジャンルを数字6桁位で設定するのですが、その番号は検索フォームでジャンプしたページの上に並んでいるカテゴリーを順番にクリックしていくと、アドレスバーに表示されたURLの最後に出てきます。

[完成例]

１６．AmazonFlash

AmazonFlashは、その名の通り、Flashで商品リンクを表示します。このツールもHTMLを手動で生成します。解説にある「デベロッパー・トークン」は「SubscriptinID」です。

[完成例]

１７．POPPIN' BOOKS

POPPIN' BOOKSはアソシエイトリンクにPOP広告を加えられます。フォントやカラー、ポップの配置をスライダーやドラッグ＆ドロップで操作できます。

[完成例]

POPPIN BOOKS

１８．アマゾンランクレット

アマゾンランクレットはAmazonの売れ筋商品を表示します。表示したいカテゴリーを選択するだけです。表示方法の変更もリアルタイムにプレビューに反映されて快適です。一度作成すると自動で商品が入れ替わります。

[完成例]

１９．fun9.net

fun9.netは、シンプルなリンク作成ツールです。Wiki 用のコードも生成することができます。

[完成例]

Movable Type3.3でつくる!最強のブログサイト

２０．Ama-Z

Ama-Zは画像効果を色々アレンジすることができます。

[完成例]

２１．AmazonSh

AmazonShはダウンロード型の支援ツールです。
HTMLタグを生成するには起動したツールの上部やや右寄りにある htm/txt というアイコンをクリックします（ページに埋め込むHTMLタグを生成するのではなく、HTMLページ全体を生成します）。

２２．「いいかも！」

「いいかも！」は、Facebookの「いいね！」で提供しているソーシャルコマース機能を、Twitterで実現したサービスです。このサービスは株式会社ガイアックスの子会社、カヨトコが提供しています。当ブログの「ソーシャルメディアを利用したAmazonアフィリエイト作成支援ツール「いいかも！」」でも紹介しています。

２３．注意事項

Google Toolbar を利用しているとウィンドウが開くタイプの場合はブロックされる場合がありますので、ブロックを解除しましょう。またアソシエイトIDは必ずご自身のものを設定するように気をつけましょう。

上記のサービスによっては W3C Markup Validation Service でエラーになるものがあります。valid な HTML にしたい場合は Another HTML-lint gateway 等を利用してマークアップを適宜修正してください。
例えば下記のようなエラーが発生します。

• img 要素の最後に "/" がない
• img 要素に alt 属性/title 属性がない
• &amp; であるべきところが & になっている
• br 要素の "/" の前に空白がない
• a 要素の name 属性が正しくない
• 属性値が「"」で括られていない

2006.03.04 追記
Yasazonを追加しました。

2006.03.09 追記
All Consuming：アフィリエイトリンク作成ツールを追加しました。

2006.03.13 追記
Amazon Search・Affiliate Helperを追加しました。また１０項にXHTML validate に関する注意事項を記述しました。

2006.03.31 追記
Amazon Quest を追加しました。

2006.08.26 追記
POPPIN' BOOKS を追加しました。

2006.11.21 追記
アマゾンランクレット・fun9.net・Ama-Z を追加しました。

2007.04.14 追記
AmazonSh を追加しました。また Yasazon のリンクを変更し、POPPIN' BOOKS の完成例が表示されていなかった不具合を修正しました。

2010.12.04 追記
「いいかも！」を追加しました。

エントリー編集画面でテキストエリアの右上にある については、マウス等で文字列を選択状態にしておかないとタグが挿入できない仕様（というほどではありませんが）になっています。

先日「HTMLタグが挿入できません」というご質問を頂き、文字列を選択してくださいという回答を致しましたが、よく考えてみると選択状態でなくてもタグを挿入したい場合（タグを入力してからコンテンツを後で書き込む等）もあるのではないかと思います。

ということで、スクリーンショットのように非選択状態でもこれらのタグを挿入できるようにするカスタマイズです（例は blockquote タグを挿入）。

１．mt_ja.js の変更

HTMLタグの挿入は JavaScript で行っていますので、該当のスクリプトが書かれているファイル（mt_ja.js）の一部を修正します。
mt_ja.js はアップロードしている Movable Type のディレクトリ mt-static （index.html と同じパスにあると思います）の配下にありますので、それをダウンロード（ローカルに同じファイルがあればそれを利用）し、下記のパッチをあててください。

--- mt-static/mt_ja.js.bak Thu Mar 02 23:50:16 2006
+++ mt-static/mt_ja.js     Thu Mar 02 23:51:11 2006
@@ -236,7 +236,6 @@
 function formatStr (e, v) {
     if (!canFormat) return;
     var str = getSelected(e);
-    if (!str) return;
     setSelection(e, '<' + v + '>' + str + '</' + v + '>');
     return false;
 }

パッチがよくわからない、または面倒という方は、mt_ja.js を任意のエディタで開き、240 行目辺りを探して

function formatStr (e, v) {
    if (!canFormat) return;
    var str = getSelected(e);
//    if (!str) return;
    setSelection(e, '<' + v + '>' + str + '</' + v + '>');
    return false;
}

と赤色のコメント用の文字を追加するか、その行を丸ごと削除して

function formatStr (e, v) {
    if (!canFormat) return;
    var str = getSelected(e);
    setSelection(e, '<' + v + '>' + str + '</' + v + '>');
    return false;
}

としてください。
どちらの方法も、修正が終わったら元のディレクトリにアップロードしてください。

２．ページのスクロールバックを防止する

3.2-ja-2 ではタグ挿入ボタンをクリックした後、ページの先頭に戻ってしまう（スクロールバック）という問題があります。それを避けるためにはエントリー編集画面のHTMLタグ挿入ボタンの不具合を解消するプラグインを併用ください。

以上です。

先日、「アランフェス・ギターケース」というものを購入しました。グラスファイバー製の軽量ケースで重さ3.9Kg。街中でチェロのケースを肩にかけて歩いている人を時々みかけると思いますが、そのケースメーカーのひとつであるEastman社製です。カラーは画像の他に、シルバー・イエロー・グリーンが用意されています（右端のグレーは製造終了）。

昔は何の材料でできているのかよくわからない重たいケースをかついで歩き回っていましたが、数年前からクラシックギター界では「ライトケース」という、1Kg?3Kgくらいの軽いケースが主流になっています。元々楽器自体がわりと軽いので、楽器を入れても「楽器が入ってないのでは？」という錯覚に陥ることもしばしばありました（その位ケースが重かった）。

ライトケースは、出始めの頃から現在まで布で覆われたウレタン？製のようなものが多く出回っていますが、最近ではグラスファイバー・カーボンファイバー・ABS樹脂等を利用した高価なケースも増えてきました。そういった類は他のケースから派生してきているようで、中には20万円近くするものもあります。

• Accord Case
• BAM Cases

最近の主なギターケースは下記のページで一通り見ることができます。

• FANA：ギターケース