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

花見で

サムネイルをポップアップ表示する HighSlide JS で onclick 属性および onkeypress 属性を JavaScript で自動的に登録する方法です。
ここでは Movable Type と WordPress プラグインを例に説明します。

１．概略

HighSlide JS を有効にするには、「Highslide JS でサムネイル画像を拡大表示する」の５項で説明した通り、a 要素に class="highslide" に加え onclick="return hs.expand(this)" を設定する必要があります。また配布サイトでは言及されていませんが onclick 属性を設定した場合は onkeypress 属性を同時に設定することがアクセシビリティ上好ましいとされています。

つまり、HighSlide JS に対応させるためには下記の青色部分を記述する必要があります。

<a href="[画像ファイルのURL]" class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)">
<img src="[サムネイル画像のURL]" alt="..." />
</a>

が、a 要素に毎回 class 属性、onclick 属性、onkeypress 属性を設定するのは結構面倒ですし、他の画像表示ツールに移行した場合の修正稼動も懸念されます。ということで class 属性のみ設定すれば、イベントハンドラである残りの onclick 属性、onkeypress 属性は JavaScript で設定できるようにします。

当サイトでも、ひとつ前のエントリー「poEDIT の使い方」等、HighSlide JS にはこの方法を適用しています。
動作は Windows XP + IE6/IE7/Firefox2/Opera9 で確認しています。

２．Movable Type の場合

下記のスクリプトをテンプレートの </head> の前に設定するか、外部ファイルとして自身のサーバにアップロードしてください。

<script type="text/javascript">
function addHighSlideAttribute() {
  var isIE = (document.documentElement.getAttribute('style') ==
              document.documentElement.style);
  var anchors = document.getElementById('content').getElementsByTagName('a');
  for (var i = 0, len = anchors.length; i < len; i++) {
    if (anchors[i].className == 'highslide') {
      if (!anchors[i].getAttribute('onclick')) {
        isIE ? anchors[i].setAttribute('onclick', new Function('return hs.expand(this)')) :
               anchors[i].setAttribute('onclick','return hs.expand(this)');
        isIE ? anchors[i].setAttribute('onkeypress', new Function('return hs.expand(this)')) :
               anchors[i].setAttribute('onkeypress','return hs.expand(this)');
      }
    }
  }
}
</script>

外部ファイル（例えば highslide_eh.js）にする場合は先頭と末尾の script タグを除去して、</head> の前に

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

というようなタグを設定してください。

そしてテンプレートの </body> の直前に下記のタグを追加します。

<script type="text/javascript">
addHighSlideAttribute();
</script>

３．WordPress の場合

下記のプラグインをインストールして、有効化してください。このプラグインと WPJ-Highslide 0.2 を併用すると便利です。

highslide_eh.zip / highslide_eh.lzh

４．参考・関連サイト

• Ogawa::Memoranda：Litebox/Lightboxの使い方
• Days on the Moon：IE の getAttribute / setAttribute
• ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0

WordPress の日本語部分を変更する場合には、クロスプラットフォームな gettext カタログ（po ファイル）の編集ができる poEDIT が便利です。

以下、Windows での poEDIT の利用方法を紹介します。

１．ダウンロード

poEDIT のページの「Download」をクリック。

Windows の場合は、ページ下にある poedit-1.x.x-setup.exe（エントリー作成時は 1.3.6） のリンクをクリック。

２．インストール

ダウンロードした exe ファイルをダブルクリックしてインストールを開始します。

「Next」をクリック。

「I accept the agreement」を選択して「Next」をクリック。

インストール先フォルダを指定（デフォルトは C:¥Program Files¥poEdit）して「Next」をクリック。

デフォルトのまま「Next」をクリック。

デフォルトのまま「Next」をクリック。

「Install」をクリック。

インストールが実行されます。

ここでは「Run poEdit now」をチェックして「Finish」をクリックし、すぐに poEDIT を起動します。

言語選択画面が開くので「Japanese」を選択して「OK」をクリック。

「OK」をクリック。

名前とメールアドレスを設定して「OK」をクリック。

これで poEDIT が起動されました。

３．po ファイル編集

WordPress の場合、[ファイル] - [開く] を選択。

2.1.x であれば wp-content/languages 配下の ja_UTF.po を選択します。なお poEDIT 1.3.6 は他の文字コードでは正常に保存ができないようです。

po ファイルを開いたところです。内容の変更方法は、該当行をクリックすると原文と翻訳文（日本語）が左下に表示されますので、ここで編集できます。

編集後、他の行を選択すると変更行の左端にマークが表示されます。
これで [ファイル] - [保存] または左から二つ目の保存アイコンをクリックすると mo ファイルが自動生成されます。これで日本語化の作業は完了です。

ダウンロードした 1.3.6 では Shift_JIS / EUC での保存ができないようです（読み込みはOK）。その場合、Windows をご利用であれば、Cygwin の msgfmt コマンドでコンパイルすることができます（ここでは割愛します）。

４．注意事項

poEDIT は名前の通り、編集はできますが、行自体の追加や削除はできません。したがって入力前の po ファイル（あるいは POT ファイル）を予め編集しておく必要があります。

５．関連リンク

• poEdit 取扱説明書
• プラグインの日本語化手順
• More Smilies 日本語版
• 言語ファイルの編集
• 第５回：Webアプリケーションをローカル化するgettext関数
• ロケールデータを作ろう

WordPress で投稿時間等に用いる「AM/PM」あるいは「am/pm」という表示を日本語表記の「午前/午後」にする方法です。

１．Portable Object ファイルの編集

ローカライズ機能で用いる Portable Object ファイルを編集します。

１．１ 2.1.x の場合

ご利用の文字コードに合わせて下記のいずれかのファイルを任意のエディタで開きます。文字コードが UTF-8 の場合は ja_UTF.po を編集します。

wp-content/languages/ja_EUC.po

wp-content/languages/ja_SJIS.po

wp-content/languages/ja_UTF.po

次に下記の行を探し、青色のように修正します。修正前は msgid と同じ値が入っています。

#: wp-includes/locale.php:85
msgid "am"
msgstr "午前"
 
#: wp-includes/locale.php:86
msgid "pm"
msgstr "午後"
 
#: wp-includes/locale.php:87
msgid "AM"
msgstr "午前"
 
#: wp-includes/locale.php:88
msgid "PM"
msgstr "午後"

１．２ 2.0.x の場合

ご利用の文字コードに合わせて下記のいずれかのファイルを任意のエディタで開き、下記の行を追加してください。文字コードが UTF-8 の場合は ja_UTF.po を編集します。

wp-includes/languages/ja_EUC.po

wp-includes/languages/ja_SJIS.po

wp-includes/languages/ja_UTF.po

msgid "am"
msgstr "午前"
 
msgid "pm"
msgstr "午後"

２．functions.php の修正

この作業は 2.0.x のみです。wp-includes/functions.php を任意のエディタで開き、下記の青色を追加してください。

function mysql2date($dateformatstring, $mysqlstring, $translate = true) {
    global $month, $weekday, $month_abbrev, $weekday_abbrev;
    $m = $mysqlstring;
    if ( empty($m) ) {
        return false;
    }
    $i = mktime(substr($m,11,2),substr($m,14,2),substr($m,17,2),substr($m,5,2),substr($m,8,2),substr($m,0,4));
    
    if ( -1 == $i || false == $i )
        $i = 0;
 
    if ( !empty($month) && !empty($weekday) && $translate ) {
        $datemonth = $month[date('m', $i)];
        $datemonth_abbrev = $month_abbrev[$datemonth];
        $dateweekday = $weekday[date('w', $i)];
        $dateweekday_abbrev = $weekday_abbrev[$dateweekday];
        $dateformatstring = ' '.$dateformatstring;
        $dateformatstring = preg_replace("/([^\\\])D/", "\${1}".backslashit($dateweekday_abbrev), $dateformatstring);
        $dateformatstring = preg_replace("/([^\\\])F/", "\${1}".backslashit($datemonth), $dateformatstring);
        $dateformatstring = preg_replace("/([^\\\])l/", "\${1}".backslashit($dateweekday), $dateformatstring);
        $dateformatstring = preg_replace("/([^\\\])M/", "\${1}".backslashit($datemonth_abbrev), $dateformatstring);
        $dateampm = (substr($m,11,2) >= 12) ? __('pm') : __('am');
        $dateformatstring = preg_replace("/([^\\\])a/", "\${1}".backslashit($dateampm), $dateformatstring);
        $dateformatstring = preg_replace("/([^\\\])A/", "\${1}".backslashit($dateampm), $dateformatstring);
        $dateformatstring = substr($dateformatstring, 1, strlen($dateformatstring)-1);
    }
    $j = @date($dateformatstring, $i);
    if ( !$j ) {
    // for debug purposes
    //    echo $i." ".$mysqlstring;
    }
    return $j;
}

３．Portable Object のコンパイル

2.0.x、2.1.x、いずれの場合も、編集した ja_XXX.po ファイルをコンパイルします。
コンパイルするには、poEDIT または msgfmt を利用します。poEDIT によるコンパイルが簡単ですが、このエントリーでは説明を省略します（順序が逆になりますが、後日ご紹介します）。

以上です。
なお管理画面の「時間のフォーマット」で日本語が適用されない（下記）のは、サンプル表示のために mysql2date 関数を起動していないためですので心配ありません。

先日、当ブログが Yahoo! カテゴリに登録されたました。
半年以上前に一度申請して、今回は2回目の申請でした。2週間ほど何も音沙汰がなく、今回もダメかと思ったら、スバムメールに紛れ込んで登録完了の通知が届いてました。

以下、Yahoo! カテゴリ登録に関する情報です。

１．カテゴリ登録方法

登録したいカテゴリが表示されているページの「サイトの登録・変更」をクリック。

登録したいサイトのURLを入力して「サイト登録前の確認」をクリック。

カテゴリを確認して「同意事項に進む」をクリック。

以上の登録ルールに同意されますか？で「はい」をクリック。

次ページで必要事項を記入します。
サイト情報に関しては

• タイトル
• ふりがな
• コメント（全角40文字以内を目安）
• 付記（全角200文字以内を目安）

を記入します。現在ないカテゴリに登録したい場合は「カテゴリ提案」で追加・新設するカテゴリを記入します。

「コメント」は検索結果でサイト名下に表示される文言を設定します。個人的に最も力を入れたのは「付記」で、ここにサイトのアピールしたい内容を的確に書きましょう。ちなみにここは1回目も2回目もほぼ同じ内容で申請したので、1回目で通らなかったのはサイト構成等に問題があったのではないかと推測しています。

一度の申請でダメでもサイトを見直して何度も挑戦することができます。

２．サーファーさんの足あと

カテゴリ登録を決めるために、俗に「サーファー」と呼ばれる方がサイトを訪問します。その時のドメインは surfxxx …yahoo.co.jp ということで、Google Analytics で検索したところ、見事にヒットしました。

この作業に深い意味はありませんが、カテゴリ登録されない場合はメールが来ないので、待つ必要がなくなります。

なお、このグラフの出し方は、[マーケティングの最適化]→[訪問ユーザーセグメントのパフォーマンス]→[参照ソース]で「フィルタ」に "yahoo" を入力してリターン（表示件数が少なければこの操作は不要）。表示された該当ソースの左にあるボタンアイコンをクリックし、「一定の期間のデータ」を選択します。

３．登録のポイント

ブログでも特定のテーマ、つまり何らかのカテゴリに属するサイトであれば Yahoo! カテゴリに登録されやすいと思われます。とはいえ私自身が1回目の申請で落ちてしまったので、その反省を多少踏まえて色々とネットで調べまして、関係ありそうなポイントを挙げてみました。

• トップページにメニューがある
• ページ表示が早い（方がいい）
• ページ数はあまり関係ない

キーワード広告はどうかな？と思いましたが大丈夫でした。その他、「同一カテゴリに登録されているサイトが少ない方がいい」という意見をネット上で結構みかけました。カテゴリによってはそういう競合があるのかもしれません。

Web2.0 の波に乗っている中、やや新鮮味を感じない Yahoo カテゴリ登録ですが、日本のインターネット利用者にとってはまだまだ根強い人気があると思います。
気になる PV は、これまでとほとんど変化がありません。何か動きがあればまたエントリーします。

４．参考リンク

登録時に参考にしたサイトをいくつか紹介しておきます。「Yahoo 登録 コツ」等で検索すれば結構色々出てきます。

• Yahoo!カテゴリ掲載ガイド
• 100人のサイトオーナーから頂いたYahoo!登録のコツ
• Yahoo！カテゴリのトリプル登録のコツ
• Yahoo!カテゴリに掲載（登録）される方法

月別アーカイブリストをスクリーンショットのように簡略表示にするカスタマイズです。ご質問を頂きましたので本エントリーにて紹介致します。
調べてみたところ、このような表示は俗に「monthchunks」と呼ばれているようです。

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

下記のリンクよりプラグインをそれぞれダウンロードしてください。

ArchiveDateHeader プラグイン

ArchiveDateFooter プラグイン

ダウンロードしたアーカイブを解凍し、中にあるファイルを、Movable Type の plugins ディレクトリにアップロードします（詳細はそれぞれのエントリーを参照ください）。
管理メニューの

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

で、それぞれのプラグイン名が表示されればOKです。

２．月別アーカイブリストタグの設定

月別アーカイブリストを、表示させたいテンプレートのサイドバー部分に貼り付けます。

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

<MTIfArchiveTypeEnabled archive_type="Monthly">
<div class="module-archives module">
   <h2 class="module-header"><a href="<$MTBlogURL$>archives.html">アーカイブ</a></h2>
   <div class="module-content">
   <MTArchiveList archive_type="Monthly">
      <MTArchiveDateHeader>
      <dl class="module-list module-mc-archive">
      <dt class="module-mc">
         <$MTArchiveDate format="%Y年"$>
      </dt>
      </MTArchiveDateHeader>
      <dd class="module-mc-item">
         <a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B"$></a>
      </dd>
      <MTArchiveDateFooter>
      </dl>
      </MTArchiveDateFooter>
   </MTArchiveList>
   </div>
</div>
</MTIfArchiveTypeEnabled>

公開テンプレートの場合

<MTIfArchiveTypeEnabled archive_type="Monthly">
<div class="sidetitle">
Monthly Archives
</div>
 
<div class="side">
   <MTArchiveList archive_type="Monthly">
      <MTArchiveDateHeader>
      <dl class="module-list module-mc-archive">
      <dt class="module-mc">
         <$MTArchiveDate format="%Y年"$>
      </dt>
      </MTArchiveDateHeader>
      <dd class="module-mc-item">
         <a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B"$></a>
      </dd>
      <MTArchiveDateFooter>
      </dl>
      </MTArchiveDateFooter>
   </MTArchiveList>
</div>
</MTIfArchiveTypeEnabled>

３．CSS の設定

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

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

.module-mc-archive {
    margin:0 0 8px;
    padding:0;
}
.module-mc {
    margin:0;
    padding:0;
}
.module-mc-item {
    display: inline;
    margin:0 0 0 4px;
    padding:0;
}

公開テンプレートの場合

.module-mc-archive {
    margin:0 0 5px;
    padding:0;
}
.module-mc {
    margin:0;
    padding:0;
}
.module-mc-item {
    display: inline;
    margin:0 0 0 1px;
    padding:0;
}

少し前から、Yahoo! ウェブ検索結果にカテゴリ登録されているサイトのアイコンとリンクが表示されなくなりました。ネットを調べてみると表示方法が変わったようです。
ということで、下のスクリーンショットのように以前の表示に戻す方法を紹介します。

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

• 中小企業診断士兼システムエンジニアの複眼ブログ：Yahoo!検索(YST)が変わった！？
• フロム「ずくだす」：Yahoo!の検索結果に異変が・・・

任意の検索結果のページを表示させ、「検索設定」をクリック。

次のページで「Yahoo!カテゴリリンク情報表示」をチェックして、ページ右上の「設定を保存」をクリック。

以上です。

なお、先日 YST がアップデートされたようで、アイコンとリンクが表示されるようになっても以前と同じ検索結果順位になっていないかもしれません。
こちらに関する参考サイトは下記です。ありがとうございました。

• Yahoo!検索 スタッフブログ：YST update 実施しました
• 世界中の１％の人々へ：今日のSEO：Yahoo!の検索エンジン更新！この機会にMTにRORサイトマップを！

マッサも

FC2ブログの人気プラグイン「最近の記事＋コメント」のツリー表示を、画像を使ってきれいなツリーにするカスタマイズです。

以下、カスタマイズ方法です。すでに「最近の記事＋コメント」プラグインを適用されている状態から説明を開始します。
適用されていない場合は、FC2 ブログ管理画面より、「プラグインの追加 [ 公式 / 共有 ]」の「共有」のリンクをクリックし、次ページに表示されている「最近の記事＋コメント」をクリック、さらに次ページで「追加する」のフォームボタンをクリックしてください。これで、その少し上にある「プラグインカテゴリー」の位置に「最近の記事＋コメント」が表示されます。

１．プラグインのHTML編集

FC2ブログの管理画面より、[環境設定] - [プラグインの設定] で、プラグインカテゴリーに表示されている「最近の記事＋コメント」の右側にある「HTMLの変更」をクリックします。

次のページで表示されたテキストエリアをスクロールし、下の内容、

を、下のリストの赤色部分を削除し、青色を追加してください。よく分からない方は「変更後」のリストをマウスコピーし、元のソースコードの同じ行の部分と丸ごと入れ替えてください。
テキストエリアが狭いので、任意のエディタに一旦コピーしてから編集した方が分かりやすいでしょう。

変更前

var FMT_HEAD         = '<UL>';
var FMT_PARENT_HEAD  = '  <LI style="text-align:left">';
var FMT_PARENT_BODY  = '    %ENTRY% %EXTRA%';
var FMT_COMM_HEAD    = '';
var FMT_COMM_BODY    = '    <BR />├ %COMMENT%';
var FMT_COMM_TAIL    = '';
var FMT_PARENT_TAIL  = '  </LI>';
var FMT_TAIL         = '</UL>';
var FMT_PARENT_BODYL = FMT_PARENT_BODY;
var FMT_COMM_BODYL   = '    <BR />└ %COMMENT%';

変更後

var FMT_HEAD         = '<UL>';
var FMT_PARENT_HEAD  = '  <LI style="text-align:left">';
var FMT_PARENT_BODY  = '    %ENTRY% %EXTRA%';
var FMT_COMM_HEAD    = '<UL>';
var FMT_COMM_BODY    = '    <LI class="tree"> %COMMENT%</LI>';
var FMT_COMM_TAIL    = '</UL>';
var FMT_PARENT_TAIL  = '  </LI>';
var FMT_TAIL         = '</UL>';
var FMT_PARENT_BODYL = FMT_PARENT_BODY;
var FMT_COMM_BODYL   = '    <LI class="tree_end"> %COMMENT%</LI>';

大体お分かりと思いますが修正内容は、ツリー用のテキストを削除し、その代わりに順序なしリストタグ（ul / li）を追加しています。この追加した ul タグおよび li タグは必ず大文字で記述してください。小文字で記述すると内容が全く表示されなくなるという不具合が確認されました。

２．スタイルシートの修正

スタイルシートに下記を追加してください。
設定は当サイトで公開しているテンプレートに合わせておりますので、ご利用のテンプレートによってはプロパティの設定を変更する必要があるかもしれません。予めご了承ください（分からない場合はご質問ください）。

.tree {
    margin-left: 3px;
    padding: 0 0 0 15px;
    background: url(http://blog-imgs-13.fc2.com/k/o/i/koikikukan/tree_lst.gif) no-repeat 2px 0;
    list-style: none;
}
.tree_end {
    margin-left: 3px;
    padding: 0 0 0 15px;
    background: url(http://blog-imgs-13.fc2.com/k/o/i/koikikukan/tree_end.gif) no-repeat 2px 0;
    list-style: none;
}

また、ツリー画像のURLは私のサイトにある画像を読み込むようにしています。他の画像を利用したい場合は、ご自身のサイトに画像ファイルをアップロードし、その画像ファイルを読み込むようにしてください。
tree_lst.gif は 途中のツリー画像、tree_end.gif は最後のツリー画像です。

３．コメントの日付が表示されない場合

コメントのついた記事に日付が表示されない（[--/--]となる）のは、「環境設定」で設定した記事数に含まれない記事に対してコメントが投稿された場合です。本カスタマイズの影響ではありませんので、ご注意ください。

2008.08.03
ツリー画像のURLを変更しました。また、３項を追加しました。

Movable Type の検索フォームで検索文字列を複数入力して、区切り文字に全角スペース（空白）を使用すると、全角スペースは検索文字として認識され、期待しない結果（おそらく検索結果として何もヒットしない）になってしまいます。
この全角スペースを半角スペースと同じ扱いにするためのカスタマイズを紹介します。

１．IME で全角入力中に半角スペースを入力する

本題からそれますが、Windows の MS-IME で全角文字入力中に半角スペースを挿入したい場合は、「Shift キー + Space キー」で半角スペースを入力することができます。また、IME のプロパティを下記のように変更することで、全角文字入力中に常に半角スペースを入力することができます。

• Microsoft Office Online：スペースを全角/半角にする (ナチュラル インプット)
• デジタルARENA：全角スペースと半角スペースを使い分けよう

２．カスタマイズ

２．１ Search.pm の修正

まず、lib/MT/Search.pm に下記のパッチを適用してください。

--- lib/MT/Search.pm.bak        Mon Jan 15 15:46:31 2007
+++ lib/MT/Search.pm    Wed Mar 21 22:55:15 2007
@@ -116,6 +116,8 @@
     ## Set search_string (for display only)
     if ($app->{searchparam}{Type} eq 'straight') {
         $app->{search_string} = $q->param('search') || '';
+        my $delimiter = $app->translate("delimiter");
+        $app->{search_string} =~ s/$delimiter/ /g;
     } elsif ($app->{searchparam}{Type} eq 'tag') {
         $app->{search_string} = $q->param('search') || '';
     }

パッチが分からない方は MT/App/Search.pm を任意のエディタで開き、下記の青色の2行を追加してください。

　　　　:
　　　（略）
　　　　:
sub init_request{
    my $app = shift;
    $app->SUPER::init_request(@_);
 
    foreach (qw(searchparam templates search_string results
                user __have_throttle)) {
        delete $app->{$_} if exists $app->{$_}
    }
　　　　:
　　　（略）
　　　　:
    ## Set search_string (for display only)
    if ($app->{searchparam}{Type} eq 'straight') {
        $app->{search_string} = $q->param('search') || '';
        my $delimiter = $app->translate("delimiter");
        $app->{search_string} =~ s/$delimiter/ /g;
    } elsif ($app->{searchparam}{Type} eq 'tag') {
        $app->{search_string} = $q->param('search') || '';
    }
 
    ## Get login information if user is logged in (via cookie).
    ## If no login cookie, this fails silently, and that's fine.
    ($app->{user}) = $app->login;
}
　　　　:
　　　（略）
　　　　:

２．２ ja.pm の修正

次に、lib/MT/L10N/ja.pm を任意のエディタで開き、下記の1行を追加してください。

'delimiter' => '　',

追加する場所は、似たような記述の近辺であればどこでも構いませんが、とりあえず下から3行目にいれましょう。

　　　　:
　　　（略）
　　　　:
    'scheduled' => '指定日',
    'No entries could be found.' => 'エントリーは見つかりません。',
    'delimiter' => '　',
);
1;

お分かりの通り、検索フォームのクエリーから全角文字を半角文字に直しているだけです。もう少しエレガントな方法がありましたら情報お待ちしております。

気がついたらこのブログのコメントが 10000 を超えていました。ということで記念エントリーです。
これも日ごろより当サイトをご利用くださる皆様のおかげと、深く感謝しております。この場をお借りしてお礼申し上げます。

有名人ブログとかであればたいした数字ではないのでしょうが、このブログでは頂いたコメントにほとんど回答してきましたので、個人的にはちょっとした達成感があります。またエントリーと違い、自分一人ではなしえないという意味でも価値のある通過点です。

ちなみに 10000 という数値には、スパムコメントや重複で削除した分の数は含まれていません。Movable Type のコメント ID は 10230 でした。
「ID はもっと更新されているのでは？」と思われるかもしれませんが、2005年12月中旬のサーバ移転により Movable Type を新規インストールをしたため、実コメント数からそれほどかけ離れていない値になっています。

以下、当サイトのコメントに関する情報をいくつか挙げてみました。

１．コメントの内訳

かなりおおざっぱなグラフですが、このブログに頂くコメントは主に次のようなものに分類されます。

またその中で「質問コメント」については、

質問 → 回答 → お礼 → お礼返し

というような形でコメントのやりとりをしています。

つまり、そのやりとりから単純に「お礼・お礼返し」の半分を差し引いても、残り約3500コメントが「質問とその回答」という、一種の巨大なナレッジと化し、当サイトの貴重な財産になっています。

＃「不具合の出ないカスタマイズ記事を書け」というツッコミはなしで。（笑）

２．1日の平均コメント数

コメント数を単純にブログの継続日数で割って、1日の平均コメント数を出してみました。
継続日数は、

2004/05/20?2007/03/20 ≒ 1000日

なので、

10000コメント/1000日 ＝ 10コメント/日

となり、日に約10コメント（5コメントの質問（またはお礼）と5コメントの回答（またはお礼返し））投稿されている計算になります。最近は1日5コメント位を頂いているので、私の返事を含めて10コメントとすれば、この数字は大きくはずれていないようです。

３．これまでの1日の最大コメント数・最小コメント数

いつだったか忘れましたが約40コメント/日の時がありました。
サイドバーの「最近のコメント」の投稿日が全て同じ日で、Newマークで真っ赤になっていた（笑）のをよく覚えています。
最小はもちろん0です。

４．コメントの多いエントリー・TOP3

• Movable Type テンプレート：661 コメント
• Movable Type 3.0x/3.1x 3カラム テンプレート（サイズ可変）：360 コメント
• Movable Type 3.0x/3.1x 3カラム テンプレート（サイズ固定）：305 コメント

５．質問コメントの回答時間

質問コメントひとつにつき、数分?1-2時間、内容によっては数日。動作確認含め、毎日1時間位をコメント回答にあてています。

６．コメントの方針

基本的にテンプレート・カスタマイズに関する質問、ご要望等、その他なんでも受け付けています（回答できる・できないは別として）。
また、質問のお作法は問いません。カスタマイズの不具合であれば「うまくできません」でもOKです。その場合、URLさえ教えてもらえれば「百聞は一見にしかず」で、状況は把握できます（それでも分からない時は確認の質問をします）。

７．コメントの回答がない場合

その前に、私がどのようにコメント作業を行なっているかという話ですが、日々のコメント有無および回答状況は左サイドバーのコメントリストをチェックしています。そしてコメント回答のもれを防ぐために、対処方法が判明するか、エントリーで回答するかのどちらかに決まるまではコメントの回答は致しておりません。
理由は、仮に「後で回答します」というコメントを返すと、サイドバーのコメントリストの該当エントリーの末尾に私のハンドルネームが表示されてしまい、「回答済」と誤判断してしまうためです。

したがって質問の内容によっては数日返事が書き込まれない場合があります（必死で対処している最中か、その時間がとれずに先送りにしている状態のどちらかです）ので、予めご容赦ください。

それでも回答を忘れてしまうことがまれにあります。10日ほど経っても返事が1度もなかった場合は間違いなく私の脳からすり抜けてしまってますので、お手数ですが再コメントしてください。

８．コメントが反映されない場合

コメントに URL が2つ以上記載されている場合等はスパムコメントとして保留される可能性があります。保留コメントは時々チェックしておりますが、お急ぎの場合は URL を記入せずに再コメントしてみてください。

９．お願い

６項で「何でもOK」とは言いながらも、下記の点についてご理解・ご協力頂けると幸いです。制約でも何でもありません。よりスムーズに回答（あるいは解決）できるようにするための施策です。

URLを一緒に

カスタマイズの不具合の場合、コメントの文言だけでは分からないケースが多いので、URL をご記入頂けるとより速やかに回答することができます。URL を公にしたくない場合はメールフォームでお送りください（基本的にはメールでの質問は受け付けておりませんので最初はコメントでご質問ください）。

不具合が発生している状態で

カスタマイズで不具合の旨のコメントを頂いて、「どれどれ」とサイトを拝見すると、すでにカスタマイズを外して元の状態に戻っていることがあります。これではどのような不具合があったのか判断できないので、カスタマイズを行なった状態でご連絡ください。
とはいえ、運用中のサイトで不具合がある状態にしておくのも本意ではないと思いますので、そういう時は、例えばメインページ（index.html）に不具合がある場合、FTPツール等でindex.html を一旦ダウンロードし、別のファイル名（test.html）で再アップロードしてそのファイル名をご連絡ください。個別記事のページ等でも同様です。

自己解決した場合

これは主旨が異なりますが、質問を頂いた後、こちらから回答する前に「解決しました」というコメントを頂くケースがあります。それはそれで非常に助かるのですが、願わくばどのような不具合（あるいは手順ミス）だったのかを一言添えて頂けると助かります。
同じ不具合で悩んでいる方への有効な情報となりますし、私自身「原因は何だったんだろう？」と思うことが結構あり、そのモヤモヤが解消します（笑）。

その他、カスタマイズのページの「ご質問について」をご覧ください（一部記述が重複しています）。

１０．お詫び

頂いているご質問コメントの回答が相当滞留してしまっております（長いもので1ヶ月以上）。
大変申し訳ありませんが今しばらくお待ちください。

Movable Type のアーカイブページ（カテゴリー・アーカイブ／日付アーカイブ／エントリー・アーカイブ）ではメインインデックスと全く同じ情報を出力することができません。

以前、「アーカイブページに「最近のコメント」「最近のトラックバック」を表示する」というエントリーに記した通り、「最近のエントリー」「最近のコメント」「最近のトラックバック」はアーカイブページによって出力される情報が異なります。

デフォルトテンプレートのアーカイブページにそれらの情報が設定されていないのが上記の理由であるかどうかは定かではありませんが、この振る舞いは（多分）マニュアル等に明記されていません。

先のエントリーではあの手この手でアーカイブに依存しないで表示させる方法を列挙していますが、本エントリーで紹介するプラグインを利用すればこの問題を簡単に解消してくれます。

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

下記のサイトよりプラグインをダウンロードします。

blog.aklaswad.com：idxctx プラグインというのを作ってみました。

ダウンロードした indexcontext.zip を解凍し、中にある indexcontext.pl を plugins ディレクトリにアップロードします。

２．タグの設定

このプラグインが提供するタグは MTIndexContext のみです。このタグで表示させたい各リストの外側を括ります。

デフォルトテンプレートの各アーカイブページで「最近のエントリー」を表示させたい場合、下記のタグをサイドバー部分に設定します。

<div class="module-archives module">
   <h2 class="module-header">最近のエントリー</h2>
   <div class="module-content">
      <ul class="module-list">
      <MTIndexContext>
         <MTEntries lastn="10">
            <li class="module-list-item"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
         </MTEntries>
      </MTIndexContext>
      </ul>
      <a href="<$MTBlogURL$>atom.xml">このブログのフィードを取得</a><br />
      [<a href="http://www.sixapart.jp/about/feeds">フィードとは</a>]
   </div>
</div>

公開テンプレートの場合は下記のタグを設定します。

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

「最近のコメント」は MTComments の外側、「最近のトラックバック」は MTPings の外側を括ります。

上記のサンプルでは MTEntries の直前と直後に MTIndexContext を追加していますが、一番外側にある div 要素の直前と直後に設定しても構いません。

３．WidgetManager による設定

配布元でも紹介されていますが、WidgetManager を利用することでテンプレート上の管理を簡単にすることができます。

例えば、「最近のエントリー」をメインページに表示するには次の1行を設定します。

<$MTWidgetManager name="Recent Entries"$>

そしてアーカイブページは下記のように MTIndexContext で括った形で設定します。

<MTIndexContext>
<$MTWidgetManager name="Recent Entries"$>
</MTIndexContext>

MTWidgetManager タグの name 属性には Widget 名を設定します。Widget 名は「Recent Entries」という名前で「テンプレート・モジュール」に予め登録されたもので、Widget の内容には「最近のエントリー」のタグ（下記）が設定されています。
設定方法の詳細は WidgetManager をご覧ください。

<div class="module-archives module">
   <h2 class="module-header">最近のエントリー</h2>
   <div class="module-content">
      <ul class="module-list">
      <MTEntries lastn="10">
         <li class="module-list-item"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
      </MTEntries>
      </ul>
      <a href="<$MTBlogURL$>atom.xml">このブログのフィードを取得</a><br />
      [<a href="http://www.sixapart.jp/about/feeds">フィードとは</a>]
   </div>
</div>

このような設定を行うことで Widget を各テンプレートで共用することが可能になります。

皆さんは丸首やタートルネック等、前後の見分けがつきにくいシャツ・セーターを後ろ前に着ないよう、どうやって確認されているでしょうか。私はこの何十年間（笑）、首のところにあるタグの位置で確認していたのですが、もう少し簡単な方法を最近みつけました。

それはセーター裏側の下方に縫いつけられた「洗濯表示マーク用のタグ（上）」です。ユニクロなど低価格のものしか持っていませんが、異なるメーカーのシャツ・セーターをいくつか調べてみたところ、私の持っているものについては、服を着た時にタグが全てお腹の左横になる位置に縫いつけられていました。

つまり、服の下端を持って（あるいはたくし上げて）セーターを着る時、裏側をちょっと覗いてこのタグを探し、向かって左側にくるように服を持って着れば後ろ前になることはない、という訳です。

すべてのシャツ・セーターに該当するかどうかは定かではありません。またタグ自体がついてない場合もこの方法は使えません。あしからず。

ご紹介が遅くなりましたが、先日より BlogPet のグループ機能を利用した「小粋空間テンプレユーザー」グループが開設されました。

• のんびり前進じたばた生活：「小粋空間テンプレユーザー」グループをつくりました!!

参加条件につきましては上記のエントリーを参照ください。

なお、グループに参加する際の操作方法は、「小粋空間テンプレユーザー」グループのページを表示し、右上に表示されている「ログイン」をクリック。

BlogPet のサイトにログインすると、右上に参加用ボタンが表示されますので、それをクリックしてください。

BlogPet ユーザの皆様のご参加をお待ち申し上げます。

それとは別に、mixi 「小粋なユーザコミュニティ」も運営中ですので、テンプレートご利用ユーザ様のご参加をお待ち申し上げます（詳細は「テンプレートのページ」の中ほどにあります）。

ということで皆様のご利用をお待ち申し上げます（私はどちらも積極的に参加できておりませんが…）。

• YouTube → Valid
• つぼろぐプラス：YouTubeの動画埋め込みタグをValidに

使い方は、YouTube で見たい動画のページのURL（Embed タグではない）を「YouTube → Valid」の入力フィールドに設定。あとは「Generate!」をクリックすれば valid なタグが下に表示されますので、タグをマウスコピーし、サイトに貼り付ければ完了。

試しにやってみた結果を以下に載せておきます。

YouTube の Embed

<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/a11blNPha4g"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/a11blNPha4g" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed>
</object>

YouTube → Valid （XHTML1.0）

<object data="http://www.youtube.com/v/a11blNPha4g" type="application/x-shockwave-flash" width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/a11blNPha4g" />
<param name="wmode" value="transparent" />
<a href="http://www.youtube.com/watch?v=a11blNPha4g">http://www.youtube.com/watch?v=a11blNPha4g</a>
</object>

その他、GreaseMonkey スクリプトもありました。

• Liner Note：YouTubeの埋め込みコードをXHTML validにするGreaseMonkeyスクリプト

先日公開した「追記文章の折りたたみ 2.0」の FC2 ブログ版カスタマイズをご紹介します。

１．特徴

• JavaScript エフェクトライブラリ script.aculo.us（スクリプタキュラス）を利用し、「続きを読む」リンクをクリックすると追記文章をスライドダウンで表示します。
• JavaScript が無効の場合はエントリー・アーカイブにジャンプします。
• 「続きを隠す」リンクは追記文章の前後に表示されますので、長い追記文章でも折りたたみやすくなっています。
• ライブラリファイルを編集せずに折りたたみ速度の変更が可能です。

２．サンプル

追記文章の折りたたみ 2.0 サンプル（Movable Type のサンプルです）

３．script.aculo.us のインストール

script.aculo.us のページの「get it already!」の下にある「Downloads page」のリンクをクリック。

次のページで「current version」の下にある「scriptaculous-js-1.7.0.zip（または拡張子が tar.gz / tar.bz2）」のリンクをクリック。バージョン 1.7.0 は2007年3月現在です。

ダウンロードアーカイブを解凍して下記の4ファイルを、[ツール] - [ファイルアップロード] を利用してアップロードします。

/lib/prototype.js
/src/controls.js
/src/effects.js
/srcscriptaculous.js

４．テンプレートの修正1（HTMLヘッダ修正）

HTMLの編集画面を開き、</head> の直前に下記を追加します。

<script type="text/javascript" src="[ファイルをアップロードしたURL]/prototype.js"></script>
<script type="text/javascript" src="[ファイルをアップロードしたURL]/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="[ファイルをアップロードしたURL]/effects.js"></script>
<script type="text/javascript" src="[ファイルをアップロードしたURL]/controls.js"></script>
 
<script type="text/javascript">
Effect.DefaultOptions = {
  transition: Effect.Transitions.sinoidal,
  duration:   0.5,   // seconds
  fps:        60.0,  // max. 60fps due to Effect.Queue implementation
  sync:       false, // true for combining
  from:       0.0,
  to:         1.0,
  delay:      0.0,
  queue:      'parallel'
}
function ajaxShowHide(entryID) {
  element = $('Text' + entryID);
  if(element.style.display == 'none') {
    options = {
        afterFinish: function(effect) {
            $('Link' + entryID).firstChild.innerHTML = '≪ 続きを隠す';
            Element.show(effect.element);
        }
    };
    Effect.BlindDown(element, options);
  } else {
    options = {
        afterFinish: function(effect) {
            $('Link' + entryID).firstChild.innerHTML = '続きを読む ≫';
            Element.hide(effect.element);
        }
    };
    Effect.BlindUp(element, options);
  }
}
</script>

[ファイルをアップロードしたURL] はファイルのアップロード先のURLを設定してください。

折りたたみ速度を変更する場合は、

duration:   0.5,   // seconds

の数値を変更します。0.5 はスライドアップ・スライドダウンに 0.5 秒かかることを意味します。
この Effect.DefaultOptions = { … } の部分は scriptaculous ライブラリの設定の上書きですので、速度を変更しない場合はここから削除しても構いません。ちなみにデフォルトは1秒に設定されています。

５．テンプレートの修正2（追記文章表示用タグ修正）

追記部分を修正します。デフォルトテンプレートと公開テンプレートの変更例を示します。ご利用中のテンプレートによって変更前の内容が若干異なるかもしれませんが、<!--more_link--> ? <!--/more_link--> だけを残しておけば大丈夫ですので、あとは変更後の内容に入れ替えてください。

変更前

<!--more_link-->
<div class="entry-more">
   <a href="<%topentry_link>#more">続きを読む "<%topentry_title>"</a>
</div>
<!--/more_link-->

変更後

<!--more_link-->
<div id="Link<%topentry_no>" class="ajax-entry-more-link"><a href="<%topentry_link>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return false;">続きを読む ≫</a></div>
<div id="Text<%topentry_no>" style="display: none">
<%topentry_more>
<div class="ajax-entry-more-link"><a href="<%topentry_link>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return false;">≪ 続きを隠す</a></div>
</div>
<!--/more_link-->

下のリストは、下側に表示された「続きを隠す」をクリックして追記を閉じた時に、折りたたみマーク位置、または記事タイトルに戻したい時のバージョンです。追記が長文の場合に有効です。

変更後（閉じた時に折りたたみマーク位置に戻る）

<!--more_link-->
<div id="Link<%topentry_no>" class="ajax-entry-more-link"><a href="<%topentry_link>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return false;">続きを読む ≫</a></div>
<div id="Text<%topentry_no>" style="display: none">
<%topentry_more>
<div class="ajax-entry-more-link"><a href="#Link<%topentry_no>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return true;">≪ 続きを隠す</a></div>
</div>
<!--/more_link-->

変更後（閉じた時に記事タイトル位置に戻る）

<!--more_link-->
<div id="Link<%topentry_no>" class="ajax-entry-more-link"><a href="<%topentry_link>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return false;">続きを読む ≫</a></div>
<div id="Text<%topentry_no>" style="display: none">
<%topentry_more>
<div class="ajax-entry-more-link"><a href="#a<%topentry_no>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return true;">≪ 続きを隠す</a></div>
</div>
<!--/more_link-->

個別記事でも折りたたみを利用したい場合は下記の部分を変更してください。JavaScript が OFF でも追記部分が読めるよう、noscript タグで追記を表示するようにしています。

変更前

<!--more-->
<%topentry_more>
<!--/more-->

変更後

<!--more-->
<div id="Link<%topentry_no>" class="ajax-entry-more-link"><a href="<%topentry_link>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return false;">続きを読む ≫</a></div>
<div id="Text<%topentry_no>" style="display: none">
<%topentry_more>
<div class="ajax-entry-more-link"><a href="<%topentry_link>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return false;">≪ 続きを隠す</a></div>
</div>
<noscript>
<div id="more" class="entry-more"><%topentry_more></div>
</noscript>
<!--/more-->

下のリストは、個別記事で下側に表示された「続きを隠す」をクリックして追記を閉じた時に、折りたたみマーク位置、または記事タイトルに戻したい時のバージョンです。追記が長文の場合に有効です。

変更後（閉じた時に折りたたみマーク位置に戻る）

<!--more-->
<div id="Link<%topentry_no>" class="ajax-entry-more-link"><a href="<%topentry_link>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return false;">続きを読む ≫</a></div>
<div id="Text<%topentry_no>" style="display: none">
<%topentry_more>
<div class="ajax-entry-more-link"><a href="#Link<%topentry_no>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return true;">≪ 続きを隠す</a></div>
</div>
<noscript>
<div id="more" class="entry-more"><%topentry_more></div>
</noscript>
<!--/more-->

変更後（閉じた時に記事タイトル位置に戻る）

<!--more-->
<div id="Link<%topentry_no>" class="ajax-entry-more-link"><a href="<%topentry_link>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return false;">続きを読む ≫</a></div>
<div id="Text<%topentry_no>" style="display: none">
<%topentry_more>
<div class="ajax-entry-more-link"><a href="#a<%topentry_no>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return true;">≪ 続きを隠す</a></div>
</div>
<noscript>
<div id="more" class="entry-more"><%topentry_more></div>
</noscript>
<!--/more-->

上記のスクリプトは貼り付けた後、編集しても構いませんが、div 開始タグと a 開始タグの間に改行を含まないようにしてください（Firefox で正常に動作しなくなります）。

６．CSS

「続きを読む」「続きを隠す」のリンクに class 属性 ajax-entry-more-link を与えています。必要に応じて設定してください。

.ajax-entry-more-link {
    /* 任意のプロパティを設定 */
}

７．その他

HTML ページの1行目に XML 宣言がある場合、IE6 では動作がややスムーズではありません（開く瞬間と閉じた瞬間にビクッとなります）。サンプルの公開テンプレートは XML 宣言を外しています。

2007.03.19 追記
追記を閉じた時に記事タイトルまたは折りたたみマーク位置に戻るリストを追加しました。

「WordPress における日付／時間の表示とフォーマット変更方法」でフォーマット文字の一覧を示しましたが、日本語版 WordPress では、月および曜日は日本語で表示されます。これを英語表記に変更する方法を紹介します。

１．変更対象のフォーマット文字

英語表記に変更するフォーマット文字は下記の4種類です。

２．変更方法

wp-includes/locale.php をダウンロードし、任意のエディタで開き、下記リストのように修正します（青色は修正した箇所）。修正が面倒な方は変更済のファイルを用意しましたので、下記のリンクよりダウンロードし、現在お使いの wp-includes/locale.php と入れ替えてください（locale.php は「ローカル.php」ではなく「ロケール.php」と読みます）。

locale.zip / locale.lzh

手修正で「'」や「;」がもれるとページが正常に表示されなくなりますので編集は十分注意して行ってください。

<?php
// Date and Time
 
// The Weekdays
$weekday[0] = 'Sunday';
$weekday[1] = 'Monday';
$weekday[2] = 'Tuesday';
$weekday[3] = 'Wednesday';
$weekday[4] = 'Thursday';
$weekday[5] = 'Friday';
$weekday[6] = 'Saturday';
 
// The first letter of each day.  The _%day%_initial suffix is a hack to make
// sure the day initials are unique.  They should be translated to a one
// letter initial.  
$weekday_initial['Sunday']    = 'Sun';
$weekday_initial['Monday']    = 'Mon';
$weekday_initial['Tuesday']   = 'Tue';
$weekday_initial['Wednesday'] = 'Wed';
$weekday_initial['Thursday']  = 'Thu';
$weekday_initial['Friday']    = 'Fri';
$weekday_initial['Saturday']  = 'Sat';
 
foreach ($weekday_initial as $weekday_ => $weekday_initial_) {
  $weekday_initial[$weekday_] = preg_replace('/_.+_initial$/', '', $weekday_initial_);
}
 
// Abbreviations for each day.
$weekday_abbrev['Sunday']    = 'Sun';
$weekday_abbrev['Monday']    = 'Mon';
$weekday_abbrev['Tuesday']   = 'Tue';
$weekday_abbrev['Wednesday'] = 'Wed';
$weekday_abbrev['Thursday']  = 'Thu';
$weekday_abbrev['Friday']    = 'Fri';
$weekday_abbrev['Saturday']  = 'Sat';
 
// The Months
$month['01'] = 'January';
$month['02'] = 'February';
$month['03'] = 'March';
$month['04'] = 'April';
$month['05'] = 'May';
$month['06'] = 'June';
$month['07'] = 'July';
$month['08'] = 'August';
$month['09'] = 'September';
$month['10'] = 'October';
$month['11'] = 'November';
$month['12'] = 'December';
 
// Abbreviations for each month. Uses the same hack as above to get around the
// 'May' duplication.
$month_abbrev['January'] = 'Jan';
$month_abbrev['February'] = 'Feb';
$month_abbrev['March'] = 'Mar';
$month_abbrev['April'] = 'Apr';
$month_abbrev['May'] = 'May';
$month_abbrev['June'] = 'Jun';
$month_abbrev['July'] = 'Jul';
$month_abbrev['August'] = 'Aug';
$month_abbrev['September'] = 'Sep';
$month_abbrev['October'] = 'Oct';
$month_abbrev['November'] = 'Nov';
$month_abbrev['December'] = 'Dec';
 
foreach ($month_abbrev as $month_ => $month_abbrev_) {
  $month_abbrev[$month_] = preg_replace('/_.+_abbreviation$/', '', $month_abbrev_);
}
 
?>

修正内容に誤りがありましたらご指摘ください。

このファイルを編集する方法が最適であるかという点については、今回は「WordPress のローカライズ機能を無効にする手法」という観点で、この方法を紹介しています。ローカライズ機能で用いる po ファイルを修正・コンパイルという、本来のお作法があることは認識しています。

なおローカライズについて書き始めると長くなりそうでしたので、また別の機会にエントリーしたいと思います。

６．参考・関連リンク

• WordPress Japan：日付、曜日の英語表記について
• WordPress Codex：Translating WordPress

WordPress への記事投稿日の日付および時間の表示方法と、日付／時刻フォーマットを変更するカスタマイズをご紹介します。

このエントリーのきっかけは、当サイトで配布しているテーマに表示される記事投稿時間を24時間表記に変更する方法についてのご質問だったのですが、それだけでは何なので一通り調べてみました。

１．概要

テンプレートの記事投稿時間を表示したい位置に

<p><?php the_time() ?></p>

を設定すると、下のように時刻情報に変換されてページに表示されます。

<p>21:07:51<p>

２．テンプレートタグ

日付表示用テンプレートタグには次の2つがあります。

２．１ the_time

記事の投稿時間を表示します。書式は次の通りです。

<?php the_time('format') ?>

format には２項以降に示す「表示フォーマット」を設定します。

カッコ内を省略すると、４項の管理画面に設定した表示フォーマットが適用されます。

２．２ the_date

記事の投稿時間を表示します。書式は次の通りです。

<?php the_date('format', 'before', 'after', echo) ?>

the_time との違いは、

• 同一日に複数記事がある場合は最初の記事にだけ表示
• 日付／時間の前後に表示するテキストの指定が可能
• PHPの変数として取得可能（その場合、表示されません）

が挙げられます。特に一つ目の振る舞いが大きな違いですので、使用する場所に応じて使い分けると良いでしょう。

format は３項以降に示す「表示フォーマット」を設定します。before は日付／時間の前に表示するテキスト、after は日付／時間の後に表示するテキスト、echo は、日付／時間を表示する場合は true、変数として取得する場合は false を設定します。

変数として取得する場合のサンプルを以下に示します。

<?php $my_date = the_date('', '', '', false); ?>

カッコ内を全て省略すると、４項の管理画面に設定した表示フォーマットが適用されます。
管理画面に設定した表示フォーマットを適用し、なおかつ日付／時間の前後にテキスト（ここでは p 要素をサンプルとして設定）を表示したい場合は、次のようにします。

<?php the_date('', '<p>', '</p>') ?>

このタグのパラメータに前後のテキストが設定できる理由は、仮にタグの外側に HTML タグを設定した場合、（同一日付のエントリーが複数あると）このタグが表示されないことがあり、外側に設定した HTML タグが残ってしまいます。これを避けるためにパラメータとしてタグを設定できるようにしています。

３．表示フォーマット

表示フォーマットは、時間を表示するフォーマット文字（後述）と、任意の文字列で構成されます。
１項のように the_time を利用して

<p>21:07:51</p>

という表示にしたい場合は、時分秒のフォーマット文字「h」「i」「s」と、それぞれを区切る文字「:」で、

<p><?php the_time('h:i:s') ?></p>

というフォーマットをパラメータに設定します。

４．フォーマット設定方法

フォーマットは次のいずれかの方法で設定することができます。

• 管理画面の [オプション] - [一般設定] - [日付のフォーマット/時間のフォーマット]
• テンプレートタグに直接記述

「テンプレートタグに直接記述」というのは、２．１項の例では

<?php the_time('h:i:s') ?>

という風に、カッコ内にパラメータとして表示フォーマットを設定することを指します。

管理画面での設定箇所は下のスクリーンショットの通りです。「日付のフォーマット：」フィールドの内容が the_date、「時刻のフォーマット：」フィールドの内容が the_time に対応しています。

フィールドに設定されたフォーマットを利用するには、２項に記した通り、テンプレートタグの the_date 、the_time のパラメータが空きであることが条件となります。

当サイトで配布しているテーマでは日付フォーマットを直接テンプレートに埋め込んでますので、管理画面から設定できるようにするには、テンプレートの下記の部分をそれぞれ変更してください。

日付表示（変更前） *1

<?php the_date('Y.m.d', '<p class="date">', '</p>') ?>

日付表示（変更後）

<?php the_date('', '<p class="date">', '</p>') ?>

時間表示（変更前）

Posted at <?php the_time('h:i') ?>

時間表示（変更後）

Posted at <?php the_time() ?>

５．フォーマット文字一覧

PHP：date より、よく使われそうなフォーマット文字を抜粋し、下記にまとめてみました。

なお、日本語版 WordPress の場合、表中の月表示および曜日表示は日本語になります（英語表記にする場合の変更方法は「WordPress の月・曜日を英語表記にする」を参照）。

以下は年月日・時分秒の設定早見表です。

６．参考・関連リンク

• WordPress Codex：Template Tags/the date

2007.03.13 追記
テンプレート改修に伴い、４項の記述を修正しました。

*1：2007.03.13 以前にテンプレートをダウンロードされた場合、メインページ／アーカイブページについては下記の変更を行ってください。

日付表示（変更前）

<p class="date"><?php the_time('Y.m.d') ?></p>

日付表示（変更後）

<p class="date"><?php the_date() ?></p>

FCブログの一部のテンプレートで利用されているツリー化スクリプトを修正し、ツリー化された「最近のコメント」のリンクから該当のコメントに直接ジャンプする方法を紹介します。

ご質問された方が利用されているテンプレートは [simple-w] というものですが、カスタマイズ自体は Jugem カスタマイズ講座から継承された汎用的なもので、下記のサイトで同じスクリプトが公開されています。

• ヒヨコ君増殖中 想 FC2版：FC2ツリー化の手引き簡易バージョン
• 初心者でもできる簡単FC2ブログの作り方：最近のコメントのツリー化

１．「最近のコメント」タグの変更

抜粋で変更箇所を掲載します。a 要素にコメント番号を示すための id 属性を追加しています。

変更前

　　　　：
<!--rcomment--> 
<li>
<%rcomment_etitle><br/>
<a href="<%rcomment_link>#comment_head"><%rcomment_name><span class="day"> (<%rcomment_month>/<%rcomment_day>)</span></a>
</li> 
<!--/rcomment-->
　　　　：

変更後

　　　　：
<!--rcomment--> 
<li>
<%rcomment_etitle><br/>
<a href="<%rcomment_link>#comment_head" id="comment<%rcomment_no>"><%rcomment_name><span class="day"> (<%rcomment_month>/<%rcomment_day>)</span></a>
</li> 
<!--/rcomment-->
　　　　：

２．スクリプトの修正

こちらも抜粋で変更箇所を示します。追加した処理で、コメントリストに付与した id 属性値を取得し、それを各コメントリンクの href 属性の # の後方に設定しています。

変更前

　　　　：
if (idName.indexOf('comment') > -1 || idName.indexOf('tb') > -1) { 
  var tmpText = objList.innerHTML.split("⇒"); 
  tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i)); 
  this.base = Array('<a href="',linkUrl,'">',tmpText[0],'</a>').join(''); 
  this.elem = objLink.innerHTML; 
} else if (idName.indexOf('entry') > -1) {
　　　　：

変更後

　　　　：
if (idName.indexOf('comment') > -1 || idName.indexOf('tb') > -1) { 
  var tmpText = objList.innerHTML.split("⇒"); 
  tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i)); 
  this.base = Array('<a href="',linkUrl,'">',tmpText[0],'</a>').join(''); 
  var linkId = objLink.getAttribute('id'); 
  var tmpLink = linkUrl.split("#"); 
  this.elem = '<a href="' + tmpLink[0] + '#' + linkId + '">' + objLink.innerHTML + '</a>';
} else if (idName.indexOf('entry') > -1) {
　　　　：

このエントリーは、先日の「300万アクセス特別企画」で見事 2999999 をゲットされた方のサイト紹介です。
111万1111 アクセス以降、キリ番ゲットのご連絡がしばらく途絶えていたので、私自身、番号が揃ったカウンタを久しぶりに拝見させて頂きました。

サイト名は Scuderia Ogapietti。運営者は Ogapie さんです。サイトは Movable Type により構築されており、シンプルで精悍なデザインが印象的です。

コンテンツは Ogapie さん所有のミニカーコレクションがメインとなっており、各ページは Lightbox Plus による写真集になっています。リアルの世界でディスプレイできないものをネットで鑑賞できるようにされたらしく、ミニカーマニア垂涎のサイトではないでしょうか。

画像は、アルファ・ロメオ／デ・トマソ／フィアット／フェラーリ／ポルシェ／マセラティ／ランボルギーニ等、往年の名車が勢ぞろい。私も車は好きなので楽しく拝見させて頂きました。
その他、クルマ趣味に関わる話題等も掲載されています。

運営者ご本人は「Alfa Romeo 156 Twin Spark」からお分かりの通り、アルファロメオ（156ツインスパーク）を所有されており、故障も少なく快適なカーライフを送られています。私自身も一応外車に乗っているので、「故障が少ない」ということは羨ましい限りです。

ちなみにマフラーはかなり渋いエキゾーストノートのものに交換されているようで、

夜中に帰ってきた時は、自宅の約30メートル手前でエンジンを切り、車から降りて押して帰る

らしいです。

さて、お気づきになった方も少なくないと思われますが、このサイト、ページ表示が非常に快適です。ご本人に伺ったところ、「手書きの HTML は一切なく、サイト全体に使用しているページ分割は自作の CGI で実現しています」とのことです（以前、別サイトでこの CGI も配布されていたようです）。

さらに、各ページの更新も全て自作（あるいは既存）のプラグインや、それらの組み合わせで実現されており、Movable Type の拡張性を感じさせるサイトといえるでしょう。

「Ajax 月送りカレンダー」を複数ブログで利用している場合の変更方法です。

2007.03.20 この方法は元記事に反映しました。

月送りカレンダーは表示月を cookie で保存することで、リロードや次回のブラウザ起動時に前回と同じ月を表示するようにしていますが、複数ブログで利用した場合、同じ cookie データ（=カレンダーの表示年月）にアクセスしてしまうため、一方のブログがもう一方のブログの表示年月を取得してしまう可能性があります。

仮に、ブログAに2007年3月（のエントリー）があり、ブログBにはその月のエントリーが存在しない場合、ブログBの表示でブログAの「2007年3月」という cookie データを取得した場合、ブログBではカレンダーが正常に表示されないという不具合が生じます。

ということで、とりあえずテーブル型カレンダーで複数ブログに対応するためのカスタマイズを紹介します。ここでは「Ajax 月送りカレンダー」との差分のみ説明します。

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

下記のリンクより ajaxCalendar.js をダウンロードしてください。

ajaxCalendar.js

このファイルを編集する必要はありませんので、そのままメインページと同じディレクトリにアップロードしてください。

４．２ カレンダー表示部分の設定

カレンダーを表示させたい位置に下記を追加します。
これまでと異なり、パラメータに MTBlogURL と MTBlogID を渡しています。cookie は MTBlogID を付与して保存するようにしているので、他のブログの cookie を取得することはありません。

<div id="calendar"></div>
<script type="text/javascript">
getCalendar("<$MTBlogURL$>", "<$MTBlogID$>", "<$MTBlogURL$><MTEntries lastn="1" sort_order="descend"><$MTEntryDate format="calendar/%Y/%m/" $></MTEntries>");
</script>

アーカイブパス（3.2 以降であれば管理画面の「設定」→「公開」→「アーカイブの設定」）を設定している場合は、上記リストの赤色部分を修正します。
例えば archives というアーカイブパスを設定している場合は下記のようにします。

getCalendar("<$MTBlogURL$>archives/", "<$MTBlogID$>", "<$MTBlogURL$><MTEntries lastn="1" sort_order="descend"><$MTEntryDate format="archives/calendar/%Y/%m/" $></MTEntries>");

以上です。

2007.03.21 追記
元記事の「Ajax 月送りカレンダー」に本カスタマイズを反映させました。

Movable Type のオーソドックスなカスタマイズのひとつ、「追記文章の折りたたみ」の Web2.0 版カスタマイズをご紹介します。

１．特徴

• JavaScript エフェクトライブラリ script.aculo.us（スクリプタキュラス）を利用し、「続きを読む」リンクをクリックすると追記文章をスライドダウンで表示します。
• JavaScript が無効の場合はエントリー・アーカイブにジャンプします。
• 「続きを隠す」リンクは追記文章の前後に表示されますので、長い追記文章でも折りたたみやすくなっています。
• ライブラリファイルを編集せずに折りたたみ速度の変更が可能です。

２．サンプル

追記文章の折りたたみ 2.0 サンプル

３．script.aculo.us のインストール

script.aculo.us のページの「get it already!」の下にある「Downloads page」のリンクをクリック。

次のページで「current version」の下にある「scriptaculous-js-1.7.0.zip（または拡張子が tar.gz / tar.bz2）」のリンクをクリック。バージョン 1.7.0 は2007年3月現在です。

ダウンロードアーカイブを解凍して内容をサーバのメインページと同じディレクトリにアップロード。ここでは下記のような配置になっていることを前提に話を進めます。

/scriptaculous
　　　/lib
　　　　 　prototype.js
　　　/src
　　　　　 controls.js
　　　　 　effects.js
　　　　 　scriptaculous.js

scriptaculous というディレクトリは解凍後のディレクトリ名を変更しています。lib と src はアーカイブのままの構成です。src 配下にはここで利用しないファイルも含まれていますので、まとめてアップロードしておくといいでしょう。

４．テンプレートの修正1（HTMLヘッダ修正）

折りたたみをしたいテンプレートの編集画面を開き、</head> の直前に下記を追加します。

<script type="text/javascript" src="<$MTBlogURL$>scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>scriptaculous/src/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<$MTBlogURL$>scriptaculous/src/effects.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>scriptaculous/src/controls.js"></script>
 
<script type="text/javascript">
Effect.DefaultOptions = {
  transition: Effect.Transitions.sinoidal,
  duration:   0.5,   // seconds
  fps:        60.0,  // max. 60fps due to Effect.Queue implementation
  sync:       false, // true for combining
  from:       0.0,
  to:         1.0,
  delay:      0.0,
  queue:      'parallel'
}
function ajaxShowHide(entryID) {
  element = $('Text' + entryID);
  if(element.style.display == 'none') {
    options = {
        afterFinish: function(effect) {
            $('Link' + entryID).firstChild.innerHTML = '≪ 続きを隠す';
            Element.show(effect.element);
        }
    };
    Effect.BlindDown(element, options);
  } else {
    options = {
        afterFinish: function(effect) {
            $('Link' + entryID).firstChild.innerHTML = '続きを読む ≫';
            Element.hide(effect.element);
        }
    };
    Effect.BlindUp(element, options);
  }
}
</script>

6行目以降は script 開始・終了タグを外して外部ファイルにしても構いません（その場合インクルードするための script タグは effct.js をインクルードしている script 要素の下に記述してください）。

折りたたみ速度を変更する場合は、

duration:   0.5,   // seconds

の数値を変更します。0.5 はスライドアップ・スライドダウンに 0.5 秒かかることを意味します。
この Effect.DefaultOptions = { … } の部分は scriptaculous ライブラリの設定の上書きですので、速度を変更しない場合はここから削除しても構いません。ちなみにデフォルトは1秒に設定されています。

５．テンプレートの修正2（追記文章表示用 MT タグ修正）

追記部分を修正します。デフォルトテンプレートと公開テンプレートの変更例を示します。

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

<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
<p class="entry-more-link">
   <a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>" &raquo;</a>
</p>
</MTIfNonEmpty>

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

<MTEntryIfExtended>
<div class="entry-more">
   <a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>"</a>
</div>
</MTEntryIfExtended>

変更後（デフォルトテンプレート／公開テンプレート共通）

<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
<div id="Link<$MTEntryID$>" class="ajax-entry-more-link"><a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="ajaxShowHide('<$MTEntryID$>');return false;">続きを読む ≫</a></div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
<div class="ajax-entry-more-link"><a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="ajaxShowHide('<$MTEntryID$>');return false;">≪ 続きを隠す</a></div>
</div>
</MTIfNonEmpty>

エントリー・アーカイブは下記の内容を利用してください。JavaScript が OFF でも追記部分が読めるよう、noscript タグで追記を表示するようにしています。

変更後・エントリーアーカイブ（デフォルトテンプレート／公開テンプレート共通）

<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
<div id="Link<$MTEntryID$>" class="ajax-entry-more-link"><a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="ajaxShowHide('<$MTEntryID$>');return false;">続きを読む ≫</a></div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
<div class="ajax-entry-more-link"><a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="ajaxShowHide('<$MTEntryID$>');return false;">≪ 続きを隠す</a></div>
</div>
<noscript>
<div id="more" class="entry-more"><$MTEntryMore$></div>
</noscript>
</MTIfNonEmpty>

上記のスクリプトは貼り付けた後、編集しても構いませんが、div 開始タグと a 開始タグの間に改行を含まないようにしてください（Firefox で正常に動作しなくなります）。

６．CSS

「続きを読む」「続きを隠す」のリンクに class 属性 ajax-entry-more-link を与えています。必要に応じて設定してください。

.ajax-entry-more-link {
    /* 任意のプロパティを設定 */
}

７．その他

HTML ページの1行目に XML 宣言がある場合、IE6 では動作がややスムーズではありません（開く瞬間と閉じた瞬間にビクッとなります）。サンプルの公開テンプレートは XML 宣言を外しています。

2007.03.08 追記
JavaScript ライブラリのインクルード順を変更しました（エラーになるため）

オーソドックスなカスタマイズとして、昔紹介した「追記文章の折りたたみ用スクリプト（改）」ですが、「折りたたみを閉じた時にページトップに戻る方法はないでしょうか」というご質問を頂きましたので、本エントリーでその方法を紹介致します。

１．方法

実は、下記リンクに示すオリジナルのスクリプト、

• scriptygoddess： another revision to the show/hide script

は、閉じた時にページトップに戻る動作になっており、「追記文章の折りたたみ用スクリプト（改）」は、それをトップに戻らないように変更したものです（そのことを忘れてました、すいません）。

したがってオリジナルの内容に戻せば期待する動作になりますので、追記部分のMTタグの赤色部分の "false"

<MTEntryIfExtended>
<div id="Link<$MTEntryID$>">
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,'<$MTEntryPermalink$>',this);return false;">続きを読む ≫</a>
</div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this);return false;">≪ 続きを隠す</a>
</div>
</MTEntryIfExtended>

を、青色の "true" に修正してください。

<MTEntryIfExtended>
<div id="Link<$MTEntryID$>">
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,'<$MTEntryPermalink$>',this);return false;">続きを読む ≫</a>
</div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this);return true;">≪ 続きを隠す</a>
</div>
</MTEntryIfExtended>

２．備考

このように、onclick 属性で実行されたスクリプトの戻り値が true（ここでは "return true;" と記述されている部分が該当）であれば、href 属性に記述された URL に遷移します。
折りたたみを開いた時にページトップに遷移しないのは、開く時の onclick 属性の最後に "return false;" と記述されているからです。

ちなみにこのカスタマイズをエントリーしたのが約2年半前。乏しい知識の中で折りたたみ動作がうまくカスタマイズできた時の喜びは今でも覚えています。
で、「今なら Ajax もありだな」と思い立ったので、明日は Ajax 版を公開したいと思います。

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

下記のリンクをクリックし、リンク先のページにある menufolder.js のリンクをクリックしてダウンロードしてください。

download

２．menufolder.js の設定変更

ダウンロードした menufolder.js を任意のエディタで開き、下記のように該当部分を青色の内容に変更してください。

// サブカテゴリー用折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
var openMarkForSubCategories  = '<img src="close.png" style="border:none;vertical-align:middle;" />';
var closeMarkForSubCategories = '<img src="open.png" style="border:none;vertical-align:middle;" />';
 
// サブカテゴリー用折りたたみマーク挿入位置
// カテゴリー前に折りたたみマークを配置：true
// カテゴリー後に折りたたみマークを配置：false
var preMarkForSubCategory = true;
 
// サブカテゴリーのタイトルとマークのスペース
var offsetForTitleAndMarkOfSubcategory = 1;

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

menufolder.js の修正が終わったら保存し、メインページと同じディレクトリにアップロードしてください。

４．テンプレートに script 要素追加

サブカテゴリーリストの折りたたみを利用する各テンプレートの </head> の直前に下記のタグを追加してください。charset 属性は menufolder.js の文字コードを指定してください（分からなければとりあえずサンプルのまま貼り付けてください）。

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

５．テンプレートにサブカテゴリーリスト表示用タグを追加

デフォルトテンプレートの場合は５．１項、公開テンプレートの場合は５．２項のサブカテゴリーリスト表示用タグを、表示したいテンプレートの任意の位置に追加します。

５．１ 公開テンプレート

<div class="sidetitle">
Categories
</div>
<div class="side">
<div id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
 
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','off',false);</MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>

５．２ デフォルトテンプレート

<div class="module-categories module">
<h2 class="module-header">カテゴリー</h2>
<div class="module-content" id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul class="module-list"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="module-list-item"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li class="module-list-item"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
 
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','initState',false);</MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>

６．スタイルシート変更

デフォルトテンプレートの場合は６．１項、公開テンプレートの場合は６．２項の CSS をスタイルシートに追加してください。

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

#categories ul {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}
#categories ul li {
    padding-left: 15px;
}
div .subcategories {
    margin-left: -15px;
}

６．２ 公開テンプレート

#categories ul {
    margin: 0 0 0 2px;
    padding: 0;
    list-style: none;
}
#categories ul li {
    margin: 2px 0 2px 5px;
    padding-left: 10px;
    list-style: none;
}
#categories li li {
    margin: 2px 0 2px 5px;
    padding-left: 10px;
    list-style: none;
}
div .subcategories {
    margin-left: -15px;
}

公開テンプレートの場合は、すでに設定されている下記の CSS を削除してください。

.side #categories ul {
    padding-left: 16px;
}
.side #categories ul ul {
    padding-left: 10px;
}
.side #categories li {
    list-style-type: circle;
}

７．画像のアップロード

下記の折りたたみマーク画像をダウンロード（Windows であれば右クリックして「名前を付けて画像を保存」を選択）し、メインページと同じディレクトリにアップロードしてください。

画像はお好みのものをご利用ください。

以前ご紹介した Slider を利用して、ページのフォントサイズを変更するカスタマイズをご紹介します。

下のサンプルをクリックし、ページ左上にある Slider を操作すると、中央カラムおよびサイドバーにある文字のフォントサイズをダイナミックに変更することができます。
Slider は矢印キー・PageUp/PageDown・マウススクロール（これは IE のみ）でも操作可能です。IE より Firefox の方がよりスムーズに動きます。

フォントサイズ変更サンプル

ここでは Movable Type 用公開テンプレートを用いて、フォントサイズ変更用 Slider の設定方法をご紹介します。Slider および本カスタマイズはブログツールやテンプレートに依存するものではありませんので、他のブログツールや異なるテンプレートでも利用可能です。
Slider のダウンロード・インストールについては「Slider の利用方法」の２項をご覧ください。

１．Slider 用ライブラリ・CSSのインクルード

テンプレートの /head の直前に下記のタグを追加します。

<link type="text/css" rel="stylesheet" href="slider/css/bluecurve/bluecurve.css" />
<script type="text/javascript" src="slider/js/range.js"></script>
<script type="text/javascript" src="slider/js/timer.js"></script>
<script type="text/javascript" src="slider/js/slider.js"></script>
<style type="text/css">
.horizontal {
    width: 155px;
    height: 20px;
}
</style>

.horizontal は Slider をサイドバーの幅に合わせるため、slider/css/bluecurve/bluecurve.css の設定を上書きしています。

２．Slider の設定

テンプレートのサイドバー部分に下記のタグを追加します。この部分に Slider が表示されます。

<div class="slider" id="slider-1" tabIndex="1">
<input class="slider-input" id="slider-input-1" name="slider-input-1" />
</div>

３．フォントサイズ用スクリプトの設定

下記のスクリプトをテンプレートの /body の直前に追加します。

<script type="text/javascript">
//<![CDATA[
var s = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"));
s.onchange = function () {
    document.body.style.fontSize = (100 + (s.getValue()*2)) + '%';
};
s.setValue(25);
window.onresize = function () {
    s.recalculate();
};
//]]>
</script>

フォントサイズを決定しているのは、

document.body.style.fontSize = (100 + (s.getValue()*2)) + '%';

の部分で、s.getValue() がスライドバーの移動によって実際に値を取得している部分です。
また、スライドバーのデフォルト位置については、

s.setValue(25);

で設定しています。この両者を変更することで、フォントサイズの増減率やスライドバーのデフォルト位置を変更することができます。色々試してみてください。

４．CSS 修正

スタイルシートで設定している font-size プロパティの値を px 指定から % 指定に変更します。フォントサイズ変更方式については下記の記事を参考にさせて頂きました。ありがとうございました。

Ogawa::Memoranda：prototype.jsを用いたフォントサイズ変更スクリプト

以下、サンプルで使用している公開テンプレートにおける変更箇所です。青は追加または変更を示します。.blog セレクタの font-size プロパティは削除してください。
カスタマイズに無関係のプロパティは省略していますので予めご了承ください。

body {
    font-size: 100%;
}
.blog {
    font-size: small;
}
.date { 
    font-size: 55%;
}
.entry {
    font-size: 62%;
}
.entry-header {
    font-size: 93%;
}
.entry-footer {
    font-size: 72%;
}
.sidetitle {
    font-size: 52%;
}
.side {
    font-size: 52%;
}

あまり話題に上がりませんが、サーバにインストールしたひとつの Movable Type から複数のブログを作成することができます。このエントリーではその方法、および関連情報についてご紹介します。

１．利用シーン

これにより、ブログを複数運用するケースはもちろんのこと、

• カスタマイズした結果を誰にも知られないように確認したい
• デフォルトテンプレートはどうなっていたか *1

等、ブログを複数作成できるのはなにかと便利です。

２．最大ブログ作成数について

ダウンロードした Movable Type からブログをいくつまで作成できるか？ということですが、個人ライセンス（無償）の場合、ダウンロードページの「利用許諾契約書」の最後に、「ブログ数： 無制限」と記載されています（3.2x の時はたしか3つまで）。

その他の利用条件については「利用許諾契約書」をご確認ください。

３．複数ブログ作成方法

mt.cgi を起動し、管理画面にログイン

ページ右側にあるシステムメニューの「ブログ」をクリック。

ページ右上にある「ブログを新規作成」をクリック。

次ページで

• サイト名
• サイトURL
• サイト・パス

を設定して、下にある「変更を保存」をクリック。

これら3つの情報は後で変更することができますが、最低「サイト名」は何か文字を入力する必要があります（入力しない状態で「変更を保存」をクリックするとエラーのダイアログが表示されます）。

また、複数ブログを作成する目的がデフォルトテンプレートの参照だけであれば、URLとパスの設定はそのままにして「変更を保存」をクリックしてください（この後再構築は行わないよう、十分気をつけてください）。

これで新しいブログが作成されました。後の操作は一番最初のブログと同じです。

４．ブログの切り替え

管理画面の「システム・メニュー > ブログ」のページで切り替えられますが、スクリーンショットのように、管理画面上部にあるショートカットを利用するのが便利です。

５．新たに作成したブログのディレクトリ

再構築を実行すれば「サイトパス」に設定したディレクトリ、つまり新しく作成したブログのディレクトリが自動的に生成されます。以前のバージョンではディレクトリを予め作成しておかないと再構築できない仕様になっていましたが、この点は変更されたようです。
したがって、サイトパスの設定には充分ご注意ください。

６．ディレクトリに生成されるファイル

エントリーを投稿していない状態ですべてを再構築した場合、新しく作成したディレクトリには下記のファイルが生成されます。

archives.html
atom.xml
index.html
index.xml
mt-site.js
mtview.php
nav-commenters.gif
rsd.xml
styles-site.css

つまり mt-static やデータベース、インストールディレクトリには一番最初にインストールした設定が継承されます。

７．エントリーIDについて

またエントリーIDは複数ブログで一意となります。例えば、ブログAでエントリーを投稿するとそのエントリーIDは「1」となり、次にブログBでエントリーを投稿するとそのエントリーIDは「2」、さらにブログAでエントリーを投稿するとそのエントリーIDは「3」となります。

試していませんが、他のID（コメントIDやトラックバックID等）も同様と思われます。

*1：初期化をすればデフォルトテンプレートに戻せますが、運用中にそういう操作をしたくない場合を想定しています。

現在公開中の「Seesaa ブログテンプレート」に一部不具合がありましたのでお知らせ致します。

１．不具合の事象

タグクラウドをクリックした次のページで JavaScript エラーが発生する場合があります。

２．原因

HTML に埋め込んでいるタグクラウド用 JavaScript のコメント文誤りです。

３．対処

この不具合を解消するためには、HTML の下記の部分

<script type="text/javascript" language="javascript"><!--
tag_cloud("tag_cloud");
--></script>

を

<script type="text/javascript"><!--
tag_cloud("tag_cloud");
//--></script>

に修正してください。
元記事の「Seesaa ブログテンプレート」は修正済ですので、HTML をカスタマイズされていないのであれば全て入れ替えても結構です。

４．その他

script 要素の language 属性は、仕様で非推奨（あるいは廃止）の属性ですので、ついでに削除しておきました。

以上です。
ご迷惑をおかけして申し訳ございませんがよろしくお願い致します。

このサイトの右下に表示しているカウンタがまもなく 3000000 に到達します。現在のアクセスからすると今週末辺りに超えそうです。3/3 15:20 頃越えました。

200万アクセス特別企画を行ったのが昨年の9月15日でしたので、約5ヶ月半で100万アクセスという計算になります。Google Analytics で確認すると、9/15?2/28 の PV は 1,202,302 でした。
ということで、このサイトを訪問くださっている皆様には大変感謝しております。

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

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

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

先日エントリーした「CSS 変更（2007.02.11）」でお知らせした通り、サブカテゴリーリストの親カテゴリーだけ異なる画像を表示させるカスタマイズをご紹介致します。

この変更を行なえば、ツリー画像が各親カテゴリー内に閉じた形で表示されるようになります。またカテゴリー表示が長大になる場合、従来の表示では親カテゴリーのツリー画像が途切れる可能性が高かったのですが、この方法であればある程度問題なく表示されると思います。

変更方法は、CSS の修正と親カテゴリー用の画像の用意です。

元のサンプルは「サブカテゴリーリストの折りたたみ+ツリー化 for Movable Type」を利用していますが、CSS についてはブログツール・ブログサービスに依存しませんので、変更箇所を確認しながら修正してください。

スクリーンショットの完成例で使用している親カテゴリーのリストマークは、下記から頂きました。

Stylegala：Bullet Madness

全く同じマークは下から 30 番目あたりにあります。

下記にスクリーンショットと同じ変更をした CSS を示します。変更箇所は赤、追加は青で示していますが、お好みに応じて適宜修正してください。

変更前

ul.tree {
    margin: 0 0 0 5px;
    padding: 0;
    font-size: 9px;
    list-style: none;
}
ul.tree ul {
    margin: 0;
    padding: 0;
}
ul.tree li {
    margin: 0;
    padding: 0 0 0 13px;
    background: url(tree_lst.gif) no-repeat 2px 0;
    list-style: none;
}
ul.tree li.tree_end {
    background: url(tree_end.gif) no-repeat 2px 0;
    list-style: none;
}

変更後

ul.tree {
    margin: 0 0 0 3px;
    padding: 0;
    font-size: 9px;
    list-style: none;
}
ul.tree ul {
    margin: 0;
    padding: 0;
}
ul.tree li {
    margin: 0px;
    padding: 0 0 0 17px;
    background: url([親カテゴリー用画像ファイル]) no-repeat 1px 0.15em;
    list-style: none;
}
ul.tree li li {
    margin: 0;
    padding: 0 0 0 15px;
    background: url(tree_lst.gif) no-repeat 4px 0;
    list-style: none;
}
ul.tree li li.tree_end {
    background: url(tree_end.gif) no-repeat 4px 0;
    list-style: none;
}

ご覧の通り、親カテゴリー用の li 要素セレクタと、子カテゴリー用の li 要素セレクタを分割しています。子カテゴリーは、li 要素セレクタを重ねて指定し、li 要素が再帰的に出現する場合のみ、ツリー画像を表示するようにしています。

参考までにサンプルのHTMLマークアップも掲載しておきます。折りたたみ用の div 要素が含まれてやや複雑になってますが予めご了承ください。

<ul class="tree">
  <li class="tree">
    <div class="subcategories" id="subcategories9name"><a href="..." title="9">ブログ</a> [1]</div>
    <div id="subcategories9list">
      <ul class="tree">
        <li class="tree_end">
          <div class="subcategories" id="subcategories10name"><a href="..." title="10">Movable Type</a> [1]</div>
          <div id="subcategories10list">
            <ul class="tree">
              <li class="tree"><a href="..." title="11">カスタマイズ</a> [1]</li>
              <li class="tree_end"><a href="..." title="12">テンプレート</a> [2]</li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </li>
  <li class="tree">
    <div class="subcategories" id="subcategories1name"><a href="..." title="1">日記</a> [1]</div>
    <div id="subcategories1list">
      <ul class="tree">
        <li class="tree_end"><a href="..." title="2">食事</a> [1]</li>
      </ul>
    </div>
  </li>
  <li class="tree_end">
    <div class="subcategories" id="subcategories3name"><a href="..." title="3">趣味</a> [1]</div>
    <div id="subcategories3list">
      <ul class="tree">
        <li class="tree">
          <div class="subcategories" id="subcategories5name"><a href="..." title="5">パソコン</a> [1]</div>
          <div id="subcategories5list">
            <ul class="tree">
              <li class="tree"><a href="..." title="7">Linux</a> [1]</li>
              <li class="tree_end"><a href="..." title="8">Windows</a> [1]</li>
            </ul>
          </div>
        </li>
        <li class="tree_end">
          <div class="subcategories" id="subcategories4name"><a href="..." title="4">車</a> [1]</div>
          <div id="subcategories4list">
            <ul class="tree">
              <li class="tree_end"><a href="..." title="6">VW</a> [1]</li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </li>
</ul>