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

「Movable Type テンプレート（XHTML 1.0 Strict 版）」をご利用の方で、サイドメニューの折りたたみやツリー化等、過去のカスタマイズ記事を適用される場合の注意事項です。

XHTML 1.0 Strict 版では、サイドバーのマークアップに定義リスト（di / dt/ dd）を用いています。マークアップは、おおざっぱには次のようになっています。

<dl id="links-left">
<dt class="sidetitle">メニュータイトルA</dt>
<dd class="side">
    <ul>
        <li>メニューリストA1</li>
        <li>メニューリストA2</li>
　　　　　　　　：
        <li>メニューリストAn</li>
    </ul>
</dd>
 
<dt class="sidetitle">メニュータイトルB</dt>
<dd class="side">
    <ul>
        <li>メニューリストB1</li>
        <li>メニューリストB2</li>
　　　　　　　　：
        <li>メニューリストBn</li>
    </ul>
</dd>
　　：
</dl>

例えば、「サイドメニューの折りたたみ」で用いているマークアップは div を用いた、次のようなマークアップになっています。また、script 要素も存在します。

<div class="sidetitle">メニュータイトルA</div>
<div class="side">
    <ul>
        <li>メニューリストA1</li>
        <li>メニューリストA2</li>
　　　　　　　　：
        <li>メニューリストAn</li>
    </ul>
</div>
 
<script type="text/javascript">
<!--
FoldNavigtion(…);
//-->
</script>

dl の子要素として許容されているのは、dt / dd だけなので、「サイドメニューの折りたたみ」のサンプルマークアップをそのまま XHTML 1.0 Strict 版に埋め込んでしまうと、

<dl id="links-left">
<div class="sidetitle">メニュータイトルA</div>
<div class="side">
    <ul>
        <li>メニューリストA1</li>
        <li>メニューリストA2</li>
　　　　　　　　：
        <li>メニューリストAn</li>
    </ul>
</div>
 
<script type="text/javascript">
<!--
FoldNavigtion(…);
//-->
</script>
　　：
</dl>

という風になり、

• dl 要素の子要素に div 要素は許容されない
• dl 要素の子要素に script 要素は許容されない

といったエラーが発生し、結果的に valid な（X）HTML になりません。

このような誤ったマークアップにならないよう、

• div 要素は dt / dd 要素に修正
• script 要素は body 終了タグの直前に移動（どうしてもマークアップの近くに配置したい場合は script 要素を dd 要素で括ってください）

等の書き換えを適宜行ってください。

また、昨日の「Ajax によるモジュール化」では、３項の「テンプレートの内容」、

<div class="sidetitle">
Recent Entries
</div>
 
<div class="side">
<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div>

を、静的な表示部分（赤色）を削除して

<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a><br />
</MTEntries>

に変更し、４項の

<div id="entries"></div>
<script type="text/javascript">
//<![CDATA[
getFile('<$MTBlogURL$>recentEntries.html', 'entries');
//]]>
</script>

に先程削除したマークアップを追加し、要素名を追加・変更して、

<dt class="sidetitle">
Recent Entries
</dt>
 
<dd id="entries"></dd>
<dd>
<script type="text/javascript">
//<![CDATA[
getFile('<$MTBlogURL$>recentEntries.html', 'entries');
//]]>
</script>
</dd>

に変更すると良いでしょう。
ただし、先程と同様、script 要素は dd で括るよりも、body 終了タグの直前に移動した方が良いでしょう。

いずれにしても、カスタマイズを行った後は下記のツールを利用して、適切なマークアップになっていることを確認しましょう。

• The W3C Markup Validation Service
• Another HTML-lint gateway
• XHTML タグ一覧表示ツール

Movable Type のサイドバーの各リストを、Ajax でモジュール化を行う方法を紹介します。

１．PHP モジュール化と Ajax モジュール化の違い

Movable Type における PHP モジュール化には次のようなメリットがあります。

1. 再構築時間の削減
2. アーカイブに依存しないリストの生成（今回はここに言及しません）

ただし PHP モジュール化は、ユーザがブラウザからインクルード元のページにアクセスした時、インクルード元のページはインクルード先の各モジュールを読み込んだコンテンツを生成・返却するため、サイドバーに多くの情報をインクルードしていると、PHP でページを生成する分、表示が遅延します。

本題とはそれますが、WordPress で表示までに若干のタイムラグが生じるのは、この PHP によるページ生成が行われるためです（キャッシュや条件付きGETが機能していればこの限りではありません）。

Ajax モジュール化を利用すれば、サイドバーの情報は非同期で表示させられるので、ユーザはページをストレスなく閲覧することが可能になります。
再構築時間は PHPモジュール化と同じ効果があります。

ただし内部リンク等がインクルード元のページに表れないため、SEO という観点では注意が必要かもしれません。

当サイトでは、数ヶ月前からサイドバーやメインページ上部にある多くのリストを Ajax モジュール化しており、安定して表示されることが確認できたので、本エントリーにて設定方法を説明します。
また、Ajax と JavaScript の併用や関連テクニックについても分かる範囲で解説しています。

以下、当サイトの配布テンプレートをサンプルに、「最近のエントリー」の Ajax モジュール化を例にします。

２．prototype.js のダウンロード・アップロード

Prototype JavaScript Framework

上記のサイトにある Download the latest version のリンクをクリックし、アーカイブをダウンロードします。アーカイブを解凍して、dist フォルダの中にある prototype.js を使用します（他は使いません）。
prototype.js は index.html と同じディレクトリにアップロードしてください。

３．モジュールの作成

MT3.3x の場合、[テンプレート] - [テンプレートを新規作成] で、「最近のエントリー」用のテンプレートを作成。各項目には下記を設定。

テンプレート名：最近のエントリーAjaxモジュール（名前は何でもいいです）

出力ファイル名：recentEntries.html

このテンプレートにリンクするファイル：（設定不要）

再構築オプション：チェックする

テンプレートの内容：下記

<div class="sidetitle">
Recent Entries
</div>
 
<div class="side">
<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div>

４．テンプレートの修正

インデックステンプレートや各アーカイブテンプレートで「最近のエントリー」を表示させているタグを、下記に置き換えます。

<div id="entries"></div>
<script type="text/javascript">
//<![CDATA[
getFile('<MTBlogURL>recentEntries.html', 'entries');
//]]>
</script>

getFile のパラメータには、Ajax で取得したいファイル名（３項のファイル名）と、その id 属性（上記リストの1行目の div の id 属性に設定した属性値）を設定してください。

５．JavaScript の追加

下記のスクリプトを外部ファイル（例えば ajaxUtil.js ）として保存し、index.html と同じディレクトリにアップロードしてください。

function getFile(url, id) {
    url = url + "?" + Math.random();
    new Ajax.Updater({success: id},
                     url, {
                         method: 'get',
                         onComplete: end,
                         onFailure: error
                     });
    return false;
}

getFile の中で prototype.js の Ajax.Updater を呼び出しています。

prototype.js は Ajax.Request が一般的ですが、取得したデータの表示位置をダイナミックに振り分けることができません。Ajax.Updater を用いれば関数起動時に id 属性（=取得データの表示位置）を指定できるので、複数のリストをこのスクリプトひとつで賄うことができます。

Ajax.Updater の解説は下記に詳しく書かれています。

IT戦記：prototype.js 1.4rc4 Part.3

６．script 要素の追加

３のスクリプトを読み込むため、テンプレートに script 要素を </head> の直前に追加。

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

７．モジュールの内容を常に更新する

prototype.js + IE では、モジュールの内容が更新されても、インクルード元のページの更新では最新の内容が反映されない事象が発生します。
その対策として、URL にランダムなクエリーを与えることで（下記）、モジュールの内容を毎回更新するようにしています。

url = url + "?" + Math.random();

参考ページを失念してしまったので、これにつきましては分かり次第掲載します。また他のライブラリであればOKとか、エレガントな実装等、さらに良い方法がありましたらご教示ください。

８．JavaScript を利用する場合のテクニック

「サイドメニューの折りたたみ」や「ツリー化」、あるいは「新着表示」等、リストに対して JavaScript を適用させたい場合、起動用の script 要素の挿入位置に気をつける必要があります。

下は４項のリストに折りたたみのスクリプト（青色）を埋め込んだ失敗例です。

<div id="entries"></div>
<script type="text/javascript">
//<![CDATA[
getFile('recentEntries.html', 'entries');
FoldNavigation('newentry','on',false);
//]]>
</script>

このようにインクルード元にインクルード先を制御するスクリプト（この例では FoldNavigation）を記述しても、 スクリプトが実行されるタイミングでは該当のリストが存在しない（=非同期で取得される）ためエラーになります。
モジュール自体にスクリプトを埋め込んだ場合も、正常に動作しないようです。

これを解決するには、Ajax でモジュールが取得された後にスクリプトを実行するようにします。例えば５項の ajaxUtil.js に下記の関数を追加します。

function end(req) {
  if(req.responseText.match(/id="newentryname"/)){
    FoldNavigation('newentry','on',false);
    return;
  }
}

これは５項の onComplete で起動される関数です。当サイトで公開している Ajax 月送りカレンダーもこの方法で休日表示のスクリプトを起動しています。

2007.08.20
３項に再構築オプションの設定の説明を追加しました。

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

サイト名は「院長室」。当サイトのテンプレートユーザさんで、今回2回目のキリ番ゲットです。管理者は oyaji さん。福岡県の片田舎で細々と医業を営んでいらっしゃるそうです。

上の、ブログとは程遠いように思われるスクリーンショットは、サイトのトップページに表示されている、レトロな雰囲気を醸し出した「グローバルナビゲーション（Flash）」です。黒板を模したナビゲーション右側にある立方体がアーカイブへのリンクになっていて、その下にある矢印をクリックするとメニューが切り替わります。

また黒板上の文字のいくつかもリンクになっていて、探しながら隠された情報を見つけ出すという、かなり凝った構造になっています。色々試してみてください。右側のカレンダーのアイデアは秀逸です。

コンテンツの方は、当サイトのダジャレカテゴリーに負けず劣らずのダジャレフリークです。違うのは、私のように突然何の脈絡もなく追記のくだらない数文字で1エントリーを終えるという、ネタ切れ時のコストパフォーマンスを狙ったものではなく、各エントリーにそれぞれしっかりとしたコンテンツがあり、その内容に絡めたジョークで締めくくられているという知的なものです。

ダジャレ好きな方は RSS 購読されることをお勧めします。

さて、キリ番のサイト紹介では、送って頂いたキリ番画像を公開したことがなかったのですが、今回は掲載してみることにしました。
ここまで揃っていると壮観です。

Web2.0 の波に押されて、こういった Web1.0 カウンターの類は少なくなりつつありますが、個人的には日々のアクセスが一目で分かることと、「キリ番」という、ランキングやブックマーク数にない楽しみもあるので、おそらくこのまま設置され続けることでしょう。

カテゴリー・アーカイブに表示されたカテゴリーリストで、該当カテゴリーのエントリーのみを表示するカスタマイズです。
ご質問を頂きましたので本エントリーにて紹介致します。

以下のサンプルの（X）HTMLは、当サイトの「XHTML 1.0 Strict 版テンプレート」をもとにしたマークアップですので、それ以外の配布テンプレートをご利用の場合は、dt / dd をそれぞれ div に直してください。

また、本カスタマイズは MT4 でも利用可能ですが、MT4 版は別エントリーで投稿したいと思います。

１．PHP 版

カテゴリー・アーカイブテンプレートの任意の位置に、下記のカテゴリーリストを設定してください。
ブログがPHP化されていることが前提です。

<MTIfArchiveTypeEnabled archive_type="Category">
<dt class="sidetitle">
Categories
</dt>
 
<dd class="side">
<?php $category = '<$MTCategoryLabel encode_php="1"$>'; ?>
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><$MTCategoryLabel$></a> [<$MTCategoryCount$>]
<?php if ($category == '<$MTCategoryLabel encode_php="1"$>') { ?>
<ul><MTEntries><li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li></MTEntries></ul>
<?php } ?>
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</dd>
</MTIfArchiveTypeEnabled>

２．JavaScript 版

１項と同様、カテゴリー・アーカイブテンプレートの任意の位置に、下記のカテゴリーリストを設定してください。

<MTIfArchiveTypeEnabled archive_type="Category">
<dt class="sidetitle">
Categories
</dt>
 
<dd class="side">
<script type="text/javascript">
//<![CDATA[
var category = '<$MTCategoryLabel encode_js="1"$>';
//]]>
</script>
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><$MTCategoryLabel$></a> [<$MTCategoryCount$>]
<script type="text/javascript">
//<![CDATA[
if (category == '<$MTCategoryLabel encode_js="1"$>') {
document.write('<ul><MTEntries><li><a href="<$MTEntryPermalink$>"><$MTEntryTitle encode_js="1"$></a></li></MTEntries></ul>');
}
//]]>
</script>
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</dd>
</MTIfArchiveTypeEnabled>

サンフランシスコ一帯の停電によってサーバーがダウンしていたそうで、週一ペースのリリースが遅れていたベータ版ですが、「リリース候補版」として公開されました。

Movable Type 4 最初のリリース候補版を公開

これまでお寄せいただいたたくさんのフィードバックから見つかった不具合等の修正状況は、Movable Type 4.0 Beta Change Log にお礼とともに掲載させていただいています (email アドレスのアカウント名の部分などで掲載させていただいています)。これからベータ版を利用する方も Change Log をぜひチェックしてみてください。

この版では、インストール時のログイン・パスワード設定画面で「表示する名前」の項目が追加されています。

またインストール実行時のDBテーブル作成画面はスクロールに戻されています。

再構築とブログ表示のアイコンも変更されています。

他、多くのバグが改修されているようです。

Movable Type や WordPress などのブログデザイン（テンプレート）を簡単に作成することができる、WYSIWYG型オンラインデザインツール「CSSEZ」を紹介します。

作成者の方よりメールを頂きまして、早速操作してみました。なかなかのスグレモノです。
以下、操作を踏まえながらツールの特長を説明します。

CSSEZにアクセスして、「作成スタート」をクリック（IE6以外で起動してください）。

デザインが全面に表示され、左側に設定メニューが表示されます。以降、この設定メニューだけでデザインを作成することができ、編集はAjaxによりリアルタイムに画面に反映されます。

設定画面からマウスアウトすれば設定メニューは非表示になり、左下のバッジ（下）にマウスをポイントすると表示されます。

メニューはタブで大きく3つに分かれています。下は「レイアウト」メニュー。カラムレイアウトは1カラムから4カラムまで、組み合わせは合計100種類。また、サイドバーのリストとナビゲーションバーのメニュー用にそれぞれ23種類ずつのテンプレートが用意されており、ワンクリックでデザインに適用できます。

「詳細」メニュー。上部タブで配色やフォント等の全体的な設定、右側のタブでパーツ別にカラム幅や余白を設定できます。
背景画像の設定では、画像をローカルからアップロードできるだけでなく、背景画像メーカーを利用してストライプとグラデーションを組み合わせた背景画像をその場で作成することも可能です。

設定が完了したら「保存とダウンロード」タブでダウンロード。
作成したデザインを他人に公開することができ、そのデザインに自分のサイトへのリンクを挿入することができます（無料ユーザー登録が必要）。他のユーザーは公開されたデザインをダウンロードできるだけでなく、それを素材にして新たなデザインを作成することもできます。今後はAPIなども提供していく予定のようです。

テンプレートの形式は、一般サイト向けのサンプル形式の他、Movalbe Type（TypePad）/WordPress/FC2ブログ/livedoorブログが選択できます。近日中にJUGEM、ロリポブログ、Seesaa ブログ、ヤプログ、エキサイトブログ、Blogger に対応予定です。

試しに Movable Type 形式でダウンロードしてみたところ、インデックステンプレートはもちろん、アーカイブテンプレート・システムテンプレートまで全て揃っています。

Movable Type のカテゴリーリストにエントリータイトルを表示するカスタマイズです。

オーソドックスなカスタマイズですが、MT をブログとして用いるのではなく、投稿するエントリー数がある程度決まっていて、それらを更新するというスタイルで使う場合、カテゴリーリストをメニューリストとして代用することができ、非常に有効な方法です。

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

カテゴリーリストに青色の部分を追加してください。

<MTIfArchiveTypeEnabled archive_type="Category"><div class="module-categories module">
   <h2 class="module-header">カテゴリー</h2>
   <div class="module-content">
   <MTTopLevelCategories>
   <MTSubCatIsFirst><ul class="module-list"></MTSubCatIsFirst>
      <MTIfNonZero tag="MTCategoryCount">
      <li class="module-list-item"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a>
        <ul class="module-list"><MTEntries><li class="module-list-item"><a href="<$MTEntryPermalink$>"><$MTEntryTitle encode_html="1"$></a></li></MTEntries></ul>
      <MTElse>
      <li class="module-list-item"><MTCategoryLabel>
      </MTElse>
      </MTIfNonZero>
         <MTSubCatsRecurse>
      </li>
   <MTSubCatIsLast></ul></MTSubCatIsLast>
   </MTTopLevelCategories>
   </div>
</div>
</MTIfArchiveTypeEnabled>

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

カテゴリーリストに青色の部分を追加してください。サンプルは XHTML 1.0 Strict 版を使っていますが、それ以外のものでも追加位置と追加内容は同じです。

<MTIfArchiveTypeEnabled archive_type="Category">
<dt class="sidetitle">
Categories
</dt>
 
<dd class="side">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<ul><MTEntries><li><a href="<$MTEntryPermalink$>"><$MTEntryTitle encode_html="1"$></a></li></MTEntries></ul>
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</dd>
</MTIfArchiveTypeEnabled>

Movable Type 4 で採用されたフォーマットに「Markdown + SmartyPants」というのがあります。

Markdown はある規則にしたがって書いたテキスト文字を（X）HTMLに変換してくれるというものですが、SmartyPants が具体的にどのような変換を行うものか、日本語で解説されているサイトをみつけられなかったので、公式サイトの翻訳（一部）と変換のサンプルを掲載しておきます。

訳に誤り等ありましたらご指摘ください。

SmartyPants

説明

SmartyPants は、Movable Type、Blosxom、および BBEdit のために、ASCII の句読文字を「スマート」な印刷用句読文字の HTML実体参照に変換する、フリーのウェブパブリッシングプラグインです。

SmartyPants は以下の変換を実行することができます:

• 直線状の引用符（"または'）を、「カーリークォート（”または’）」のHTML実体参照に変換
• バッククォート（``）を「カーリークォート（“）」のHTML実体参照に変換
  注：バッククォートは2つ並べる
• ダッシュ（--または---）を、「enダッシュ（―）*」または「emダッシュ（――）*」のHTML実体参照に変換
  *欧文ではダッシュの長さにより呼び方が異なる
• 3つの連続したドット（...）を省略文字（…）のHTML実体参照に変換

あなたの投稿では、ASCII による直線状の引用符やダッシュ、およびドットを書いたり、編集したり、保存することができますが、（X）HTMLの出力は、スマートな引用符・全角ダッシュ、および適切な省略文字として表現されるでしょう。

SmartyPants は、Movable Type、Blosxom、および BBEdit で動作するプラグインファイルを組み合わせたプラグインです。 UNIXスタイルのコマンドラインから使用することもできます。

SmartyPants は、<pre>、<code>、<kbd>、および <script> タグブロック内ではキャラクタを変更しません。 これらのタグは、ソースコードやサンプルのマークアップのような、「スマートな引用符」やその他の「スマートな句読」への変換が適切でないテキストを表示するために用いられるからです。

下は実際に Movable Type 4 で実験した結果です。引用符やダッシュ等が変換されているのがお分かりになると思います。

フォーマット変換なし

Markdown + SmartyPants

Markdown + SmartyPants で出力された （X）HTML

Straight quotes ( ” and ’ ) into “curly” quote HTML entities 
Backticks-style quotes (“like this”) into “curly” quote HTML entities 
Dashes (“—” and “—-“) into en- and em-dash entities 
Three consecutive dots (“…”) into an ellipsis entity

「emダッシュ」が上手く変換されていないようです。

当サイトで利用している、トップページのエントリー概要とエントリー本文の表示を切り替えるカスタマイズです。

注：本カスタマイズは Movable Type 3.x 用です。Movable Type 4 で利用する場合は、「概要と本文を切り替える（Movable Type 4・デフォルトテンプレート版）」をご覧ください。

概要に本文の先頭から指定文字数を表示する設定になっている（=概要フィールドに何も書いていない）場合、デフォルトで概要を表示し、タイトルまたは概要の末尾にあるリンクをクリックすることで、ページ遷移をせずに全文を表示することができます。

サンプル

このエントリーではデフォルトテンプレートのトップページおよびカテゴリーアーカイブ／日付アーカイブに適用する例を紹介します。

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

下記のリンクより menufolder.js をダウンロード（本カスタマイズ用に機能追加しています）

download

ダウンロードしたスクリプトは、ブログの index.html と同じディレクトリにアップロードしてください。

２．script 要素の追加

カスタマイズを適用するテンプレートに下記の script 要素を追加。

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

３．エントリータイトルに折りたたみのリンクを与える

エントリータイトルのタグ

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

を下記のように変更します。a 要素を削除して h3 に id 属性を追加しています。

<h3 class="entry-header" id="content<$MTEntryID$>name"><$MTEntryTitle$></h3>

４．概要を追加する

エントリーを表示するタグ

<div class="entry-body">
   <$MTEntryBody$>
   <MTIfNonEmpty tag="EntryMore" convert_breaks="0">
   <p class="entry-more-link">
      <a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>" »</a>
   </p>
   </MTIfNonEmpty>

に対し、青色のタグを追加します。

<div class="entry-body">
   <div id="content<$MTEntryID$>list2">
      <p><$MTEntryExcerpt$> <a class="foldmark" href="./" onclick="FoldNavigation('content<$MTEntryID$>','chng',''); return(false);" onkeypress="FoldNavigation('idName', 'chng',''); return(false);" title="全部読む">[ all ]</a></p>
   </div>
   <div id="content<$MTEntryID$>list">
      <$MTEntryBody$>
      <MTIfNonEmpty tag="EntryMore" convert_breaks="0">
      <p class="entry-more-link">
         <a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>" »</a>
      </p>
      </MTIfNonEmpty>
   </div>

また、MTEntries の終了タグ直前にスクリプト起動用の script 要素を追加します。

<script type="text/javascript">
//<![CDATA[ 
FoldNavigation('content<$MTEntryID$>','off',false);
//]]>
</script>
</MTEntries>

これでテンプレートを再構築すれば、概要と本文の切り替えができるようになります。

５．折りたたみ状態を保持しないようにする

このカスタマイズでは折りたたみ状態がクッキーを利用して保持されます。つまり、ブラウザをリロードした時等、直前の折りたたみ状態でページが表示されます。

折りたたみ状態を保持したくない場合は、ダウンロードした menufolder.js の中間辺りに下記の設定（赤色）

//--------------------------------------------------------
// 状態保持用設定データ
//--------------------------------------------------------
 
// 状態保持フラグ
// 有効にする：true
// 無効にする：false
var holdState = true;

を下のように変更してください。

//--------------------------------------------------------
// 状態保持用設定データ
//--------------------------------------------------------
 
// 状態保持フラグ
// 有効にする：true
// 無効にする：false
var holdState = false;

６．注意事項

概要の表示文字数より本文の文字数が少ないと効果ありません。

2007.07.31
カスタマイズ手順に誤りがありましたので修正しました。

2007.11.25
５項を追加しました。また、MT4 版へのリンクを追加しました。

当サイトで配布中の WordPress テーマ（テンプレート）をバージョンアップしました。新しいテンプレートは下記のリンクよりダウンロードしてご利用ください。

WordPress テーマ（テンプレート）・3カラム版

注：本テンプレートはデフォルト状態で「最近のコメント」「最近のトラックバック」を表示するようにしています。これらのリストを表示するためには「Commented entry list」プラグインが有効になっている必要があります。

主な変更点は下記の通りです。

１．XHTML 1.0 Strict

これまで配布していたテンプレートのXHTML 1.0 文書型は「XHTML 1.0 Transitional」でしたが、今回「XHTML 1.0 Strict」に変更しました。

XHTML 1.0 Strict では XHTML のお作法が XHTML 1.0 Transitional より少し厳しくなります。例えば引用を示す blockquote 要素では、その直下にインライン要素・テキストを記述するのではなく、ブロックレベル要素（p 要素など）を記述することになります。ブラウザではブロックレベル要素が欠落しても問題なく表示されますが、XHTML 1.0 Strict のお作法に少しずつ慣れていくと良いでしょう（このサイトは XHTML 1.0 Transitional ですが）。

この変更に伴って下記の修正も実施しました。

• form 要素に fieldset 要素追加
• textarea 要素に初期値設定（記事ページ）

２．フォントサイズ変更

やや大きめのフォントサイズにしました。項番５と関連しています。

３．各アーカイブページの title 要素を「記事名+ブログ名」に変更

これまで各アーカイブページの title 要素は「ブログ名+記事（アーカイブ）名」で表示されるようにしていましたが、SEO を考慮して「記事名」が先頭に表示されるよう変更しました。タイトルやアーカイブ名に検索キーワードが含まれていると有利です。
なお、アーカイブページはまだ不具合が残っていますので追って修正したいと思います。

４．float 解除を after 擬似要素に変更

これまで固定レイアウトの float による流し込み解除は br 要素に clear プロパティを与えておりましたが、適切なマークアップではありませんでしたので、after 擬似要素による float 解除に修正しました。

関連記事：CSS の after 擬似要素で回り込みを解除する

５．フォントサイズを % 指定に変更

px 指定だったため、IE6 での文字サイズ変更が有効にならなかったのですが、% 指定に変更することで有効になります。参考サイトは下記です。ありがとうございました。

• NOTE：フォントサイズ指定手法 / 続フォントサイズ指定手法

また JavaScript によるフォントサイズ変更が多少簡単に設定できるようになります。

関連記事：Slider によるフォントサイズ変更でアクセシビリティを向上させる

この変更により、デフォルトのフォントサイズはこれまでよりかなり大きくなっています。これまでのフォントサイズを再現するには IE6 で「小」にしてください。デフォルトのフォントサイズを変更したい場合は、スタイルシート冒頭の

body {
    font-size: 100%;
}
html>body {
    font-size: 12pt;
}

の赤色部分を変更してください。他で指定している部分はこの値の相対値として変動します。ちなみにこれまでのテンプレートと近いデフォルト表示をするには、

body {
    font-size: 83.3%;
}
html>body {
    font-size: 11pt;
}

にしてみてください。

６．line-height の単位を削除

line-height は行間を指定するプロパティです。これまでは % 指定を行っていましたが、このプロパティに単位を与えると、子孫要素のフォントサイズを変更すると、期待する行ボックスにならないとのことです。
良い例が「タグクラウド」で、line-height に単位を与えていると、大きな文字が現われた時、フォントサイズによっては小さな文字に重なり、小さな文字のリンクが有効にならない可能性があります。

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

• Lucky bag::blog：line-height の値には単位なしが良いとされる理由

７．pre 要素用 CSS 追加

プログラムコード等を表示する場合を考慮して、pre 要素用の CSS を追加しました。

８．ヘッダの ID 属性値変更

ヘッダの ID 属性値を「banner」から「header」に変更しました。

９．画像用CSS設定削除

本文に画像の挿入を想定して CSS を設定していましたが、左上に表示する場合しか対応していなかったので削除しました。

１０．その他

大がかりな変更を行うと、これまでのカスタマイズ記事も大幅に修正しないといけなくなるため、例えばSEO的に有利な、3カラム固定レイアウトで中央カラムを XHTML 文書の先頭にする、というような変更は行っておりません。
また、左右サイドバーのスタイルに対応する links-left / links-right といった属性名も、同様の理由によりそのままの名称にしています（文書構造にデザインを示す単語を用いるのが適切でないことは理解しています）。

漢字で書けますか？

現在発売中の「Web Designing (ウェブデザイニング) 2007年 08月号」に Movable Type 4 の記事が掲載されています。

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

特集ではありませんが、田口和裕さん連載の「Movable Type Step by Step」で、

「Movable Type 3」と「Movable Type 4」、どこが変わった？

というタイトルで、Movable Type 4 の新機能と、動作環境・ライセンス体系等を含めた Movable Type 3 との違いが掲載されています。

また、同時に WD Reviews（新製品紹介）でも Movable Type 4 が取り上げられており、どのようなバージョンアップが行われたかが一目で分かります。

余談ですが、Movable Type が当初の予定通り7月18日に正式リリースされていれば、本誌（18日発売）はまさにどんぴしゃりのタイミングでの発売だった訳です。本誌関係者の方は結構悔しがっているのでは？と察します。

なお「Movable Type Step by Step」の最後に私のサイトがちょこっと紹介されてます（これを書きたかった）。

Movable Type 4 Beta 7 が公開されました。

Movable Type 4 ベータ 7を公開

Movable Type 4 ベータ 7 よりデフォルトテーマとして Vox のテーマがいくつか同梱されており、スタイルメニューからテーマを選択することがでるようになりました。正式版ではこれらのテーマ全てが製品に同梱されるというわけではなく、別の方法での提供になる可能性があります。

いつものように Beta 6 との見た目の差分をお知らせします。ちなみにアーカイブのファイルサイズが 6.8MB に増えています（Beta 6 と比較して +2.3MB）。

日本語表示の場合、「Write Entry」が「ブログを書く」に変わりました。

各フォームボタンも、デフォルトのスタイルから画像に変わっています。

メニューの「ファイル」が「アイテム」に変わっています。また「設定」のサブメニューにあった「メンバー」がこの一番下の「ユーザー」に移動しています。細かいですが、「デザイン」サブメニューの「テンプレート」と「スタイル」の位置も入れ替わっています。

StyleCatcher に Vox のテーマが同梱されました。「テーマ/リポジトリへのURL:」は左上の小さな + マークで隠されています。

カラムレイアウトも選択できるようになっています。

また、インストール時にスタティック・ディレクトリ（mt-static）がアプリケーション・ディレクトリと同じディレクトリに存在しない場合、mt-static のURLまたはパスを指定するのですが、指定誤りの場合はインストールに進まないのですが、サーバの環境によっては指定誤りでもインストール続行可能となるケースがあり、フィードバックしていました。Beta 7 で解消くださっています（52727）。

指定したパスがみつからない場合はエラー画面が表示されます。

XREA を無料で利用する場合、表示が義務付けられている広告をヘッダ（タイトルバナー）にきれいに埋め込んで表示する方法です。質問を頂きましたので本エントリーにてカスタマイズを紹介します。

リキッドレイアウトであれば position プロパティを利用した絶対配置で比較的簡単に設定できますが、固定レイアウトでも position プロパティを組み合わせることで、決まった位置に表示させるテクニックがあります。

ここでは公開テンプレートを例に設定していますが、テンプレートに関係なく適用可能です。

１．（X）HTMLマークアップ

広告表示用の script 要素を追加し、script 要素を div と p で括ります（青色）。div に任意の class 属性、または ID 属性を設定します。

<div id="header">
<h1 id="blog-name"><a href="" accesskey="1">First Weblog</a></h1>
<p class="blog-description">test</p>
<div class="ad">
<p>
<script type="text/javascript" src="http://..."></script>
<noscript><iframe height="60" width="468" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" allowtransparency="true" src="http://..."><a href="http://..." target="_blank"><img src="http://..." border="0" alt="xreaad"></a></iframe></noscript>
</p>
</div>
</div>

ちなみにこのまま表示すると、下記のようになります。

２．CSS

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

div.ad {
    position: relative;
    margin: 0;
}
div.ad p {
    position: absolute;
    top: -56px;
    right: 15px;
}
html > body div.ad p {
    top: -58px;
    right: 0;
}

仕組みは、親要素の div に position: relative; を設定し、div を相対配置にします。そしてその子要素の p に position: absolute; を設定することで、子要素の position プロパティの基点は、親要素（div）が配置されるべき位置となります。あとは子要素の p に対して、表示させたい位置に top や right プロパティ等で移動させます。

当サイトのテンプレートでは、IE6とそれ以外のブラウザで広告表示位置が若干異なるので、子セレクタ（>）を使って異なる値を設定しています。
また、div のマージンを0にして不要な空白が表示されないようにしています。

広告以外に、検索フォーム等を埋め込む時にも有効ですので、お試しください。

このサイトの右下に表示しているカウンタがまもなく 4000000 に到達します。現在のアクセスからするとあと3日ほどで超えそうです。7/20に超えました。

300万アクセス特別企画で超えたのが今年の3月3日でしたので、約4ヶ月半で100万アクセスという計算になります。Google Analytics で確認すると、3/3?7/15 の PV は 1,193,882 でした。
ということで、このサイトを訪問くださっている皆様には大変感謝しております。

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

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

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

先日公開した、WordPress の「dTree プラグイン」をバージョンアップしました。

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

• dTreeスクリプトの同梱（著作権表示）
• プラグインのオプション画面よりコンフィグレーションが可能
• 定義リストのマークアップに（多分）対応

プラグインのダウンロードは「dTree プラグイン for WordPress」よりお願い致します。

バージョンアップしたプラグインをアップロード・有効化すると下記のリンクが表示されるのでクリック。

クリックすると下記のオプション画面が表示されます（日本語化はしていません）。

各オプションの意味は次の通りです。

また、定義リストによるマークアップは、下記であれば動作するようにしました。

<dt>Categories</dt>
<dd>
  <ul>
    <?php wp_list_cats('sort_column=name&optioncount=1&hide_empty=0'); ?>
  </ul>
</dd>

また、定義リストによるマークアップに適用する場合は、dtreehandler.js の末尾の部分

function dtreeMaker(searchName) {
  var idName = searchName.replace(' ','');
  idName = 'dtree_' + idName;
  addTagForTree(searchName, idName);
//  addTagForTree2(searchName, idName);
}

を

function dtreeMaker(searchName) {
  var idName = searchName.replace(' ','');
  idName = 'dtree_' + idName;
//  addTagForTree(searchName, idName);
  addTagForTree2(searchName, idName);
}

に修正してください。

定義リストによるマークアップの wp.vicuna であれば下記のようになります。

現在、トップページと各エントリーページに掲載している動画ですが、「ディック」でおなじみのCFJ株式会社がサポートしている、ワクワクウォッチング（音声つきですので閲覧時はご注意ください）で公開されるアニメーションの中の1話です。

ワクワクウォッチング（WorkWorkWatching）とは、色々なお仕事の舞台裏を観察する教養ドキュメンタリー番組です。

掲載している動画は、全7回（番外編を含め全8回）にわたり公開されるアニメの第3話「洋子、スカウトにて」で、通訳の洋子が見知らぬ外人に「ヤンキー役」で映画に出演する交渉をし、交渉に成功するまでのシーンをポップな動画でお送りします。
外人が「ヤンキーって何？」と聞いた後の洋子のヤンキーが見ものです。

音声つきですので、閲覧時はご注意ください

動画の真ん中にある再生ボタンをクリック（場合によっては2回クリック）すれば動画が開始します。停止する場合は左下に表示された停止ボタンをクリックしてください。

広告として掲載を依頼されたもので、都合10日ほど掲載する予定です。