小粋空間  -  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-2.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-2.fc2.com/k/o/i/koikikukan/tree_end.gif) no-repeat 2px 0;
    list-style: none;
}

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

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="