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

MTPaginate プラグインを利用することで、テキスト検索・タグ検索のページ分割が可能ですが、Movable Type 3.3x ではメインページや他のアーカイブと同じような設定では、例えばデフォルトテンプレートでは 2カラム表示が崩れるという問題が発覚しました。*1

ということで、3.3x 版の検索結果のページ分割方法について改めて説明致します。

なお、テンプレートの修正内容が複雑なため、今回は理由を説明しながらタグの設定を行っていきます。作業をスキップしたい方は1項、２項を実施した後、５項のタグをそのまま検索結果ページの該当部分と置き換えてください。

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

プラグイン配布サイト

MT Extensions：MTPaginate

よりプラグインをダウンロードします（ページ上方にある「Download」をクリック）。

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

ダウンロードしたファイルを解凍し、その中の MTPaginate ディレクトリを下記のディレクトリ構成になるように plugins ディレクトリに丸ごとアップロードします。

plugins/MTPaginate/lib/MTPaginate.pm
plugins/MTPaginate/MTPaginate.pl

３．ページ分割用タグを挿入

検索結果テンプレートを修正していきます。
最初に、ページ分割用のタグ

• MTPaginate
• MTPaginateContent
• MTPaginateSectionBreak

と、ナビゲーション表示の

• MTPaginateIfMultiplePages
• MTPaginateIfPreviousPage_
• MTPaginateNavigator
• MTPaginateIfNextPage_

を追加します（青色部分）。挿入位置は他の既存タグを参考にしてください。基本的には

• <MTSearchResults> の前
• </MTSearchResults> の前後

の辺りです。

　　　　：
<MTIgnore>
    ##########  検索結果表示
</MTIgnore>
 
<MTPaginate mode="cgi">
    <MTPaginateIfMultiplePages>
        <div class="paginate">
            <MTPaginateIfPreviousPage_>
                <a href="<$MTPaginatePreviousPageLink$>" title="previous page link">&#65308;</a>
            </MTPaginateIfPreviousPage_>
            <$MTPaginateNavigator format_all="All Pages" place_all="after"$>
            <MTPaginateIfNextPage_>
                <a href="<$MTPaginateNextPageLink$>" title="next page link">&#65310;</a>
            </MTPaginateIfNextPage_>
        </div>
    </MTPaginateIfMultiplePages>
    <MTPaginateContent max_sections="3">
 
        <MTSearchResults>
            <MTBlogResultHeader>
                <h3 class="search-results-header">
                <MTIfStraightSearch>
                    ブログ: <$MTBlogName$> での検索結果
                </MTIfStraightSearch>
                <MTIfTagSearch>
                    <$MTBlogName$>でタグ <$MTSearchString$> が指定されているエントリー
                    </MTIfTagSearch>
                </h3>
                <div class="search-results-container">
            </MTBlogResultHeader>
        
                <h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
                <p><$MTEntryExcerpt$> <$MTEntryEditLink$></p>
                <MTIfTagSearch>
                    <div class="entry-tags">
                        <h4 class="entry-tags-header">タグ:</h4> 
                        <ul class="entry-tags-list">
                            <MTEntryTags>
                                <li class="entry-tag"><a href="<$MTTagSearchLink$>&amp;IncludeBlogs=<$MTSearchIncludeBlogs$>" rel="tag"><$MTTagName$></a></li>
                            </MTEntryTags>
                        </ul>
                    </div>
                </MTIfTagSearch>
        
                <p class="entry-footer">
                    <span class="post-footers"><MTIfNonEmpty tag="EntryAuthorDisplayName">投稿者: <$MTEntryAuthorDisplayName$>  </MTIfNonEmpty>日時: <$MTEntryDate$></span>
                </p>
        
            <MTBlogResultFooter>
                </div>
            </MTBlogResultFooter>
 
            <$MTPaginateSectionBreak$>
 
        </MTSearchResults>
 
    </MTPaginateContent>
</MTPaginate>
 
<MTIgnore>
  ##########  検索結果がないときのメッセージ
</MTIgnore>
　　　　：

MTPaginateContent の max_sections 属性（赤色部分）の「3」が1ページの表示件数です。この部分はお好みの値に変更してください。

ナビゲーションを後方に表示したい場合は、<MTPaginateIfMultiplePages>～</MTPaginateIfMultiplePages> を </MTPaginate> の直前に追加してください。

４．検索結果ヘッダおよび検索結果フッタ用タグを削除

MTSearchResults の中に記述された検索結果ヘッダおよび検索結果フッタ用タグ

• MTBlogResultHeader
• MTBlogResultFooter

を削除します（赤色部分）。タグで括られた内容は後で利用しますので、メモ帳にでもペーストしておいてください。

　　　　：
<MTIgnore>
    ##########  検索結果表示
</MTIgnore>
 
<MTPaginate mode="cgi">
    <MTPaginateIfMultiplePages>
        <div class="paginate">
            <MTPaginateIfPreviousPage_>
                <a href="<$MTPaginatePreviousPageLink$>" title="previous page link">&#65308;</a>
            </MTPaginateIfPreviousPage_>
            <$MTPaginateNavigator format_all="All Pages" place_all="after"$>
            <MTPaginateIfNextPage_>
                <a href="<$MTPaginateNextPageLink$>" title="next page link">&#65310;</a>
            </MTPaginateIfNextPage_>
        </div>
    </MTPaginateIfMultiplePages>
    <MTPaginateContent max_sections="3">
 
        <MTSearchResults>
            <MTBlogResultHeader>
                <h3 class="search-results-header">
                <MTIfStraightSearch>
                    ブログ: <$MTBlogName$> での検索結果
                </MTIfStraightSearch>
                <MTIfTagSearch>
                    <$MTBlogName$>でタグ <$MTSearchString$> が指定されているエントリー
                    </MTIfTagSearch>
                </h3>
                <div class="search-results-container">
            </MTBlogResultHeader>
        
                <h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
                <p><$MTEntryExcerpt$> <$MTEntryEditLink$></p>
                <MTIfTagSearch>
                    <div class="entry-tags">
                        <h4 class="entry-tags-header">タグ:</h4> 
                        <ul class="entry-tags-list">
                            <MTEntryTags>
                                <li class="entry-tag"><a href="<$MTTagSearchLink$>&amp;IncludeBlogs=<$MTSearchIncludeBlogs$>" rel="tag"><$MTTagName$></a></li>
                            </MTEntryTags>
                        </ul>
                    </div>
                </MTIfTagSearch>
        
                <p class="entry-footer">
                    <span class="post-footers"><MTIfNonEmpty tag="EntryAuthorDisplayName">投稿者: <$MTEntryAuthorDisplayName$>  </MTIfNonEmpty>日時: <$MTEntryDate$></span>
                </p>
        
            <MTBlogResultFooter>
                </div>
            </MTBlogResultFooter>
 
            <$MTPaginateSectionBreak$>
 
        </MTSearchResults>
 
    </MTPaginateContent>
</MTPaginate>
 
<MTIgnore>
  ##########  検索結果がないときのメッセージ
</MTIgnore>
　　　　：

この2つのタグは、検索結果全体の最初と最後に1度しか実行されません。ページ分割処理に含めると、1ページ目の最初と最後のページの最後にしか適用されないため、削除します。

５．検索結果ヘッダと検索結果フッタを移動

４項で削除した検索結果ヘッダと検索結果フッタの内容を MTPaginateContent の外側に設定します（青色部分）。注：</MTPaginateContent> の下にもあります。

　　　　：
<MTIgnore>
    ##########  検索結果表示
</MTIgnore>
 
<MTPaginate mode="cgi">
    <MTPaginateIfMultiplePages>
        <div class="paginate">
            <MTPaginateIfPreviousPage_>
                <a href="<$MTPaginatePreviousPageLink$>" title="previous page link">&#65308;</a>
            </MTPaginateIfPreviousPage_>
            <$MTPaginateNavigator format_all="All Pages" place_all="after"$>
            <MTPaginateIfNextPage_>
                <a href="<$MTPaginateNextPageLink$>" title="next page link">&#65310;</a>
            </MTPaginateIfNextPage_>
        </div>
    </MTPaginateIfMultiplePages>
 
    <h3 class="search-results-header">
    <MTIfStraightSearch>
        ブログ: <$MTBlogName$> での検索結果
    </MTIfStraightSearch>
    <MTIfTagSearch>
        <$MTBlogName$>でタグ <$MTSearchString$> が指定されているエントリー
        </MTIfTagSearch>
    </h3>
    <div class="search-results-container">
 
    <MTPaginateContent max_sections="3">
 
        <MTSearchResults>
        
                <h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
                <p><$MTEntryExcerpt$> <$MTEntryEditLink$></p>
                <MTIfTagSearch>
                    <div class="entry-tags">
                        <h4 class="entry-tags-header">タグ:</h4> 
                        <ul class="entry-tags-list">
                            <MTEntryTags>
                                <li class="entry-tag"><a href="<$MTTagSearchLink$>&amp;IncludeBlogs=<$MTSearchIncludeBlogs$>" rel="tag"><$MTTagName$></a></li>
                            </MTEntryTags>
                        </ul>
                    </div>
                </MTIfTagSearch>
        
                <p class="entry-footer">
                    <span class="post-footers"><MTIfNonEmpty tag="EntryAuthorDisplayName">投稿者: <$MTEntryAuthorDisplayName$>  </MTIfNonEmpty>日時: <$MTEntryDate$></span>
                </p>
        
            <$MTPaginateSectionBreak$>
 
        </MTSearchResults>
 
    </MTPaginateContent>
 
    </div>
 
</MTPaginate>
 
<MTIgnore>
  ##########  検索結果がないときのメッセージ
</MTIgnore>
　　　　：

MTPaginateContent の外側に設定することで、検索結果ヘッダと検索結果フッタがページ分割に依存せず常に表示されるようになります。

６．検索結果ヘッダと検索結果フッタに MTSearchResults を適用

５項で設定した検索結果ヘッダと検索結果フッタを MTSearchResults で括ります。

　　　　：
<MTIgnore>
    ##########  検索結果表示
</MTIgnore>
 
<MTPaginate mode="cgi">
    <MTPaginateIfMultiplePages>
        <div class="paginate">
            <MTPaginateIfPreviousPage_>
                <a href="<$MTPaginatePreviousPageLink$>" title="previous page link">&#65308;</a>
            </MTPaginateIfPreviousPage_>
            <$MTPaginateNavigator format_all="All Pages" place_all="after"$>
            <MTPaginateIfNextPage_>
                <a href="<$MTPaginateNextPageLink$>" title="next page link">&#65310;</a>
            </MTPaginateIfNextPage_>
        </div>
    </MTPaginateIfMultiplePages>
 
    <MTSearchResults>
        <h3 class="search-results-header">
        <MTIfStraightSearch>
            ブログ: <$MTBlogName$> での検索結果
        </MTIfStraightSearch>
        <MTIfTagSearch>
            <$MTBlogName$>でタグ <$MTSearchString$> が指定されているエントリー
            </MTIfTagSearch>
        </h3>
        <div class="search-results-container">
    </MTSearchResults>
 
    <MTPaginateContent max_sections="3">
 
        <MTSearchResults>
        
                <h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
                <p><$MTEntryExcerpt$> <$MTEntryEditLink$></p>
                <MTIfTagSearch>
                    <div class="entry-tags">
                        <h4 class="entry-tags-header">タグ:</h4> 
                        <ul class="entry-tags-list">
                            <MTEntryTags>
                                <li class="entry-tag"><a href="<$MTTagSearchLink$>&amp;IncludeBlogs=<$MTSearchIncludeBlogs$>" rel="tag"><$MTTagName$></a></li>
                            </MTEntryTags>
                        </ul>
                    </div>
                </MTIfTagSearch>
        
                <p class="entry-footer">
                    <span class="post-footers"><MTIfNonEmpty tag="EntryAuthorDisplayName">投稿者: <$MTEntryAuthorDisplayName$>  </MTIfNonEmpty>日時: <$MTEntryDate$></span>
                </p>
        
            <$MTPaginateSectionBreak$>
 
        </MTSearchResults>
 
    </MTPaginateContent>
 
    <MTSearchResults>
        </div>
    </MTSearchResults>
 
</MTPaginate>
 
<MTIgnore>
  ##########  検索結果がないときのメッセージ
</MTIgnore>
　　　　：

MTSearchResults で括らないと、検索文字列がヒットしなかった場合や、検索文字列が設定されていない場合にも検索結果ヘッダと検索結果フッタが表示されてしまうためです。

７．検索結果ヘッダと検索結果フッタに Counter プラグインを適用

６項で設定した検索結果ヘッダと検索結果フッタを、さらに Counter プラグインのタグを追加します（青色部分）。

　　　　：
<MTIgnore>
    ##########  検索結果表示
</MTIgnore>
 
<MTPaginate mode="cgi">
    <MTPaginateIfMultiplePages>
        <div class="paginate">
            <MTPaginateIfPreviousPage_>
                <a href="<$MTPaginatePreviousPageLink$>" title="previous page link">&#65308;</a>
            </MTPaginateIfPreviousPage_>
            <$MTPaginateNavigator format_all="All Pages" place_all="after"$>
            <MTPaginateIfNextPage_>
                <a href="<$MTPaginateNextPageLink$>" title="next page link">&#65310;</a>
            </MTPaginateIfNextPage_>
        </div>
    </MTPaginateIfMultiplePages>
 
    <MTCounter>
    <MTSearchResults>
        <$MTCounterPlus$>
        <MTCounterIfEqual value="1">
            <h3 class="search-results-header">
            <MTIfStraightSearch>
                ブログ: <$MTBlogName$> での検索結果
            </MTIfStraightSearch>
            <MTIfTagSearch>
                <$MTBlogName$>でタグ <$MTSearchString$> が指定されているエントリー
                </MTIfTagSearch>
            </h3>
            <div class="search-results-container">
        </MTCounterIfEqual>
    </MTSearchResults>
    </MTCounter>
 
    <MTPaginateContent max_sections="3">
 
        <MTSearchResults>
        
                <h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
                <p><$MTEntryExcerpt$> <$MTEntryEditLink$></p>
                <MTIfTagSearch>
                    <div class="entry-tags">
                        <h4 class="entry-tags-header">タグ:</h4> 
                        <ul class="entry-tags-list">
                            <MTEntryTags>
                                <li class="entry-tag"><a href="<$MTTagSearchLink$>&amp;IncludeBlogs=<$MTSearchIncludeBlogs$>" rel="tag"><$MTTagName$></a></li>
                            </MTEntryTags>
                        </ul>
                    </div>
                </MTIfTagSearch>
        
                <p class="entry-footer">
                    <span class="post-footers"><MTIfNonEmpty tag="EntryAuthorDisplayName">投稿者: <$MTEntryAuthorDisplayName$>  </MTIfNonEmpty>日時: <$MTEntryDate$></span>
                </p>
        
            <$MTPaginateSectionBreak$>
 
        </MTSearchResults>
 
    </MTPaginateContent>
 
    <MTCounter>
    <MTSearchResults>
        <$MTCounterPlus$>
        <MTCounterIfEqual value="1">
            </div>
        </MTCounterIfEqual>
    </MTSearchResults>
    </MTCounter>
 
</MTPaginate>
 
<MTIgnore>
  ##########  検索結果がないときのメッセージ
</MTIgnore>
　　　　：

MTSearchResults はループ処理用のタグで、上記までの設定ではヒットした回数分タグの内容が繰り返して表示されるためです。

Counter プラグインについては「Counter プラグイン」を参照してインストールまで行ってください。
カウンタ系のプラグインは他にも出回ってますので、そちらを利用しても構いません。

これでページ分割の設定は完了です。

８．その他

• ナビゲーションを後方に設定した場合は下マージンが若干少ないので適宜追加してください。
• 検索で「現在検索中です。検索が終わるまでお待ちください。」というメッセージが表示されて困る方は「Movable Type の検索でエラーになる問題について」を参照願います。

*1：以前の検索結果ページは 1カラムであったため、たまたま正常に動作しているようにみえていただけかもしれません。

１．動作確認環境

動作確認は下記の環境で行っています。

• OS：Windows2000/XP
• ブラウザ：IE6/IE7/Firefox2/Opera9

Mac環境はありませんので Safari での確認はできておりません。予めご容赦ください。

２．利用規定

ご利用の前にテンプレートのページを必ずご覧くださいますよう、よろしくお願い致します

３．カラムレイアウト変更方法

このテンプレートではカラムレイアウトのバリエーションとして、

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

の計8種類を用意しています（それぞれのサンプルはちょっと下にある画像をご覧ください）。

カラムレイアウトは、HTMLテンプレートの body 要素の class 属性を書き換えることで変更することができます（カラム数を変更する場合はHTMLテンプレートの修正が必要ですがこれについては後述します）。例えば、3カラムレイアウトから2カラム・リキッドレイアウト（右サイドバー）に変更したい場合は、HTMLテンプレートの

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

の赤色部分を

<body class="layout-two-column-liquid-right">

と、青色の内容に変更します。このテクニックは Designing with Web Standards でも紹介されています。

個別エントリー用HTMLありのテンプレートをお使いの場合、ベースHTMLと個別エントリー用HTMLで異なるレイアウトを設定することができます。例えばベースHTMLで3カラム、個別エントリー用HTMLで1カラムという設定も可能です。

以下にそれぞれのレイアウトに対する class 属性値を示します。なおサンプル画像は Movable Type のものを流用しておりますので予めご了承ください。

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

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

<body class="layout-two-column-left">

<body class="layout-two-column-liquid-left">

<body class="layout-two-column-right">

<body class="layout-two-column-liquid-right">

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

<body class="layout-one-column-liquid">

公開テンプレートは一番上の3カラムレイアウトで配布しております。

カラム数を変更、例えば3カラムから2カラム（左サイドバー）に変更した場合、管理メニューの「デザイン」→「コンテンツ」で右サイドバーに表示するものがなくなれば自動的に2カラム表示になります。
非表示にするサイドバーにコンテンツが残っている場合は、

<!-- 右カラム開始 -->
<div id="links-right-box">
<dl id="links-right">
　　　　　　　　　：
</dl><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->

を丸ごと削除してください。1カラムに変更される場合は左右両方のカラムをごっそり削除してください（いずれもサイドバーの復活が面倒なのでお勧めできません）。

４．1カラムレイアウトについて

1カラムレイアウトはポータル的な要素を排除して、個人の日記サイトとして気軽に書けるデザインにしています（言い換えると単にサイドバーをとっぱらっただけです）がアーカイブページ等のリンクは考慮しておりませんのでご注意ください。

５．クレジットバナーについて

当サイトのクレジットバナーはデフォルトで右サイドバー下に表示するようにしています。バナー画像は別のサイトから取得するようにしていますが、テンプレートのページよりダウンロードしてお使いくださっても結構です（src 属性は適宜修正してください）。なお右カラムを削除される場合は、下記のタグを左サイドバーに挿入してください。

<dd class="powered">
<ul><li>Powered by<br />
<a href="http://www.blogn.org/" target="_blank"><img src="images/blogn3.gif" alt="BLOGNPLUS（ぶろぐん＋）" border="0" /></a></li>
<li><a href="http://www.koikikukan.com/"><img src="http://blog42.fc2.com/k/koikikukan/file/banner.gif" alt="小粋空間" width="128" height="22" /></a><p><br /></p></li></ul>
</dd>

６．その他

基本的な動作は確認したつもりですが、ぶろぐんの機能を全て把握できていない状態ですので、不具合等ございましたらご連絡ください。

７．テンプレート

2009.07.16 Movable Type 用のタグがあったため削除しました。

このサイトもとりあえず3年続いたので、続かなくなる前に（笑）ブログを続けるためのノウハウを書いてみることにしました。3年の経験にもとづいているので、まあまあの信憑性かもしれません。

ブログを始めた時は「楽しい」という気持ちが強いので「続かない」というケースは少ないと思いますが、書き始めてしばらく経ち、続けることへの意欲がなくなりかけてきた頃に思い起こしてもらえると有難いです。

続けるための観点は人によって違うと思います。ここでは経験上「こうしておけば続けやすい」というものをまとめてみました。「3つのポイント」というタイトルは、たまたま思いついたのが3つだった、というだけです。思いついたらまたエントリーします。

またアクセスを増やす方法については言及していませんので、「アクセスが増えないので続かない」という対処について触れてません。アクセスについては別の機会にエントリーします。

１．続けることに対する目標を作る

「ブログをX日続ける」という目標を作りましょう。

「続ける」ということは日々の積み重ねの結果ですので「目標にするのはちょっと…」と思われるかもしれませんが、「日々積み重ねる」ということは継続するという行為のミクロな視点である訳なので、個人的には違和感ありません。

それはさておき、目標はいきなり「3年」とか、そんな大きな目標は立てる必要はありません。例えば「1週間」という目標を立てます。そうすることで、直近のスケジュールをどうすれば良いかという、具体的な行動が起こせるきっかけになります。

私の場合、まず日曜の夜に5日?1週間分のおぼろげなエントリー予定を立てるようにしています。とりあえず週末はダジャレの日が1回あるので（笑）、それを除いた残りの日のエントリーのスケジュールを考えます。これまでの下書きの公開や、頂いたご質問の情報展開、新ネタ等。
アクセスは週明けが多いので、読んで欲しい記事はできるだけ月・火に出すようにしています。

そして週の間にまた別のネタが見つかるかもしれません。それは緊急性の高い情報であれば優先して投稿し、スケジュールから外れたエントリー予定だった分は次週回しにします。最近はこういうサイクルでやりくりしています。

話を戻して、「10年続ける」といった壮大な目標でも構わないのですが、大きい目標に対しては必ず「小さい目標」も同時にたてて、それを繰り返すようにしましょう。あるマラソン選手（誰か失念）も「42.195km走る切るために『次の電柱まで』を繰り返して走っている」と言ってました。
小さいことの積み重ねが大きな結果に結びつきます。

それから、目標を達成する直前に次の目標を立てることも大事です。例えば「3年続けました！」という達成感で満足してしまうと、そこで立ち止まってしまう可能性があります。
目標達成目前のところで次の目標を決めておけば、達成感を味わいながら、同時に次の目標に向かって心の準備も整っているという訳です。

２．ネタはできるだけ溜めておく

私の場合、2年経った頃、「今日は何を書こう？」という、いわゆるネタ切れの状態がよくおきました。前の日のエントリーに注力し過ぎて、次の日に時間的余裕がない場合がそうです。

そういう訳で3年目から、とにかく思いついたネタは極力メモすることにしました。例えばカスタマイズ記事であれば、グダグダなタグまたはソースコードでもとりあえず本文に貼り付けておき、未公開状態のエントリーとして保存しておきます。
ダジャレも同じで、どんなくだらないものでも忘れないうちに書き留めておきます。

そうこうするうちに、ピンキリの内容ながらかなりの量の未公開エントリーが溜まりまして、ネタ切れで悩むというストレスからはほぼ解放されました。

また予めエントリーを書く時間がとれないことが分かっている時は、公開できる状態までエントリーをまとめて書き溜めておき、指定日投稿をしています。最大で5日分書いたこともあります。
飲み会等で、その日の晩はパソコンに向かう状態ではない、という時も事前にエントリーを書くようにしています。

タイムリー性が問われる記事についてはこのテクニックを適用できませんが、例えば日常の出来事などは、その日に起こったことをまとめて投稿せず、小出しにする手もあります。また投稿日をずらせば、後から投稿する分については推敲することが可能です。

今更ですが今年の3月頃、風邪をひいて39度の高熱で寝込んでいたことがありました。その時は事前の準備をしていなかったため、その時だけはさすがに参りました（それでもエントリーしましたが）。「備えあれば憂いなし」です。

３．マイナス要因はうまく対処する

楽しく続けているブログも、コメントやソーシャルブックマークに誹謗・中傷が起きると、正直凹みます。あるエントリーに対して100件がプラス評価でも、1件のマイナス評価で全てを覆しかねません。それが原因でエントリーする意欲がなくなってしまうのが一番良くないことです。
ちなみに、「アドバイス」的な内容はマイナス評価とは別物なので、その点は誤解なきようお願い致します。

対処法は、エントリーの内容にもよるので一意の解ではありませんが、仮にマイナスな評価が多数ではなく一部であれば、その評価に対して過敏に反応しない、あるいは大人の対応をすること。逆に多数の場合は記事の内容が誤っている可能性があるので、冷静に受け止め、相当の対応をすることが最善策と思います。

いずれにしても、そのことによるストレスはブログ上ではなく、リアルの世界でお酒でも飲んで発散しましょう。

またこういう時も、投稿するだけの状態になっているエントリーが用意されていれば「今日は書く気分にならない」という精神状態でも、表向きにブログは粛々と続けることができます。

「最近のエントリー」の各エントリーの右側に「X日前」という経過日数をするカスタマイズです。

指定した経過日数を超えたエントリーに対し、任意のテキストをエントリーリスト横に表示することができます。JavaScript で書きましたのでテンプレートにタグを追加するだけで動作します。また JavaScript OFF の場合は何も表示されないようにしています。

動作はエントリーの投稿時間を span で予め埋め込んでおき、CSSで非表示にします。そして JavaScript でその投稿時間を取得し、現在時刻との差を計算し、テキストに置き換えて表示するという仕組みです。

Windows2000/XPのIE6/7・Firefox2.0・Opera9.0で動作確認しています。また XHTML1.0 valid です。

なお、本カスタマイズは以前ご要望を頂いていたもので、公開が大変遅くなりましたこと、この場をお借りしてお詫び申しあげます。

１．テンプレートの修正

「最近のエントリー」にテキストを表示したいテンプレートに、span 要素（青色部分）を追加します。

<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> <span class="new"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></span></li>
      </MTEntries>
      </ul>
      <a href="<$MTBlogURL$>atom.xml">このブログのフィードを取得</a><br />
      [<a href="http://www.sixapart.jp/about/feeds">フィードとは</a>]
   </div>
</div>

２．スクリプトの追加

１項と同じテンプレートについて、body 要素の終了タグの直前に、下記のスクリプトを追加します。

<script type="text/javascript">
//<![CDATA[
// passage day
var pass = 1;
 
// display content
var content = '日前';
  
var currentDate = new Date(); 
var spans = document.getElementsByTagName('span');
for (i = 0, len = spans.length; len > i; i++) {
    if (spans[i].getAttribute('class') == 'new' ||
       spans[i].getAttribute('className') == 'new') {
        time = spans[i].childNodes[0].nodeValue.split(":");
        var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]); 
        var now = (entryDate.getTime() - currentDate.getTime())/(60*60*1000); 
        now = Math.ceil(now/24);
        if (-now > (pass - 1)) {
            spans[i].innerHTML = -now + content;
            spans[i].style.display = 'inline';
        }
    }
}
//]]>
</script>

３．CSS設定

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

span.new {
    display: none;
    color: red;
}

最初の display プロパティで１項の要素に設定したタイムスタンプを非表示にします。その下の color プロパティは、「X日前」という文字が表示された場合に適用される設定です。

４．表示開始日数を変更する

表示開始日数を変更するには、

// passage time
var pass = 1;

の赤色部分の値を変更してください。

デフォルトの「1」は、投稿後1日経過分からのエントリーが表示対象となります。「10」にすると10日経過したものから表示対象になります。
数字は必ず半角文字で設定してください。

５．表示文字列を変更する

表示内容を変更するには、

// display content
var content = '日前';

の赤色部分を変更してください。

Movable Type では MTPaginate を利用して、各アーカイブをページ分割することが可能ですが、MTPaginate は検索結果画面のページ分割も可能です。

• 関連記事：検索結果ページのページ分割

ですが、デフォルトテンプレートの検索結果画面にある検索フォームから検索を実行した場合、その後のページ分割機能が有効にならない、というご質問を頂きました。ご本人は既にお分かりのようでしたが、折角なので情報展開しておきます。

１．問題

下記のような検索結果画面の状態から、ページ送りのリンク（赤枠部分）をクリックすると、

下のように、検索文字列が何も設定されていない状態で検索した結果画面になります。

２．対処方法

検索結果テンプレートの form の method 属性、

<form method="post" action="<$MTCGIPath$><$MTSearchScript$>" id="search-form">

を

<form method="get" action="<$MTCGIPath$><$MTSearchScript$>" id="search-form">

に変更するだけです。これで正常にページ送りができるようになります。

なおメインページの検索フォームは get になっていますので、修正の必要はありません。

３．原因

フォームの method 属性が get の場合は、フォームデータを URL の後ろにクエリー（URLエンコードしたデータ）として送信します。つまり post になっていたため、ページ送り時に検索文字列やブログID等、必要な情報が全て欠落していた、というのがこの問題の原因です。

GET と POST については下記のページが参考になるでしょう。

• フォームデータの送信

４．その他

ということで、GET メソッドを用いれば問題は解消しますが、フォームデータを URL として表示させたくない場合は post にしてください（ページ分割が機能しないとう制約が残りますが）。

また、Movable Type の検索はどちらの method 属性も対応しているということが分かりました。

慣れない

「トラックバック」とは Web サイト間のピアツーピア通信/通知のためのフレームワークです。

• 技術仕様書「TrackBack Technical Specification（日本語訳）」

もう少し分かりやすく説明すると、

リンク元サイトに「このような記事からリンクを張った」という情報を通知する仕組み

です（これも分かりにくいですが）。
ちなみに「トラックバック Ping」とは「トラックバック Ping URL に対する HTTP POST リクエスト」です。

それはともかく、ブログを始めた時に最初に戸惑うのがこの「トラックバック」で、実際にトラックバック機能を利用して一番不思議に思われる事象が、

「エラーになったのに相手のブログにちゃんと送信されている」

ことではないでしょうか。

その結果、誤解してトラックバックを重複送信したり、Movable Type では送信失敗したトラックバックURLを再送信用に保存するため、それに気づかず記事を再保存すると、誤って送信するといったケースが絶えません。*1

このエントリーでは、そのようなケースを引き起こす原因を理解できるよう、トラックバックの動作について図解します。

１．トラックバック処理（正常）

ブログAからブログBにトラックバックを送信すると、ブログBはトラックバック受信処理を開始します。送信したブログAはタイマを起動して、ブログBからの完了通知を待ちます。
ブログBが受信処理を終えるとブログAに完了通知を送信します。ブログAがタイマ起動中に完了通知を受信するとタイマを解除し、ブログAは「トラックバックを正常に送信した」と判断します。

２．トラックバック処理（異常）

ブログAからブログBにトラックバックを送信して、何らかの原因でブログBにトラックバックが到達しなかった場合、ブログAが起動したタイマがタイムアウトし、その契機にブログAは「トラックバックを正常に送信できなかった」と判断します。このケースではブログBは何も受信していません。

３．トラックバック処理（準正常１）

このケースは、ブログAからブログBにトラックバックを送信して、１と同様にブログBでトラックバック受信処理を開始、完了通知を送信したにもかかわらず。何らかの原因でブログAに完了通知が到達しなかった場合です。
ブログAが起動したタイマがタイムアウトし、その契機にブログAは「トラックバックを正常に送信できなかった」と判断します。ただしこのケースでは、ブログAには「エラー」と見えるにも関わらずブログBはトラックバックを正常に受信しています。

４．トラックバック処理（準正常２）

３のケースとほぼ同じですが、ブログBの処理が遅延してブログAのタイムアウトにひっかかってしまう場合です。「エラーになったのに相手のブログに送信されている」というのは、このケースが一番多いのではないでしょうか。

その他、トラックバック先のファイルが見つからない、ブログBで受信してエラーレスポンスを返却した等のケースが考えられます。

なお説明では便宜上、「正常・異常・準正常」と分けていますが、個人的な解釈に基づいています。

*1：ただし自ブログで「トラックバック成功」と認識させるには、重複送信する手しかありません（ブログによって動作は異なるかもしれません）

サムネイル画像を拡大させる HighSlide JS（関連記事「Highslide JS でサムネイル画像を拡大表示する」）には、

• ブラウザのウィンドウサイズに収まるように拡大（右下のアイコンをクリックすると 100% 表示）

という機能があり、この場合、拡大した画像の右下に最大化するアイコンが表示されます。

このアイコンをクリックすると、ブラウザのウィンドウサイズに関わらず画像が最大化されます。最大化された画像は最大化前と同じようにドラッグや縮小することができます。

１．問題点

この最大化をすると別のページにジャンプをして元画像が表示されてしまうケースがあります。

２．原因

Highslide JS と prototype.js を同時に利用している場合、prototype.js が Array に対して拡張を行っているため、Highslide JS で使用している配列が汚染され、

for (var i in array) {
　　　　：
}

の処理で余計なものが含まれてしまうようです。
これが原因で最大化処理に不具合が発生します。

• 最速インターフェース研究会：prototype.jsのObject汚染を回避する方法
• 最速チュパカプラ研究会：Re: あれこれポップアップとprototype.jsを同時に使うには

具体的には、highslide.js の下記の部分が汚染されている模様です。

// reposition overlays
for (x in this.overlays) {
        hs.purge(this.overlays[x]);
        this.overlays[x].parentNode.removeChild(this.overlays[x]);
}

３．対処方法

for 文を

for (var i = 0; i  < array.length; i++) {
　　　　：
}

に変更すると解消するらしいので、問題となる処理が含まれる関数のみをオーバーライドしてみました。

まず、下記の内容を丸コピーし、highslide-custom.js という名称で highslide.js と同じディレクトリに保存してください。

HsExpander.prototype.doFullExpand = function () {
    try {
        hs.purge(this.fullExpandIcon);
        this.fullExpandIcon.parentNode.removeChild(this.fullExpandIcon);
        this.focus();
        this.x.min = parseInt(this.wrapper.style.left) - (this.fullExpandWidth - this.content.width) / 2;
        if (this.x.min < hs.marginLeft) this.x.min = hs.marginLeft;        
        this.wrapper.style.left = this.x.min +'px';
        var borderOffset = this.wrapper.offsetWidth - this.content.width;        
        this.content.width = this.fullExpandWidth;
        this.content.height = this.fullExpandHeight;
        this.x.span = this.content.width;
        this.wrapper.style.width = (this.x.span + borderOffset) +'px';
        this.y.span = this.wrapper.offsetHeight - 2 * this.offsetBorderH;
        this.positionOutline(this.x.min, this.y.min, this.x.span, this.y.span);
        // reposition overlays
        for (x = 0; x < this.overlays.length; x++) {
            hs.purge(this.overlays[x]);
            this.overlays[x].parentNode.removeChild(this.overlays[x]);
        }        
        if (hs.showCredits) this.writeCredits();
        this.createCustomOverlays();
        this.redoShowHide();
    } catch (e) {
        window.location.href = hs.expanders[this.key].content.src;
    }
};

そして、ご利用のサーバにアップロードして、テンプレートに下記の青色の行を追加してください。

　　　　　　　　　　　：
<script type="text/javascript" src="highslide/highslide.js"></script>
<script type="text/javascript" src="highslide/highslide-custom.js"></script>
　　　　　　　　　　　：

この1行は、元の highslide.js を読み込む script 要素の後に記述してください。
また、src 属性部分の記述は例ですので、ご利用になっている highslide を読み込んでいる script 要素の src 属性に合わせてしてください。
例は highslide というディレクトリ配下にある場合を想定しています。

４．注意事項

IE6/iE7 では2回目以降の拡大処理がスムーズに動作しない事象が確認されています（Firefox / Opera は OK）。
またこの対処はサンプルを作って実験したものですので、動作しない場合があるかもしれません。適正な対処方法がありましたらご教示ください。

Movable Type 3.2 / 3.3 で、コメント投稿および、トラックバック送信のレスポンスが遅くなる事象が発生しています。原因は、標準プラグイン「SpamLookup」がデフォルトで参照しているサーバーのひとつ、「opm.blitzed.org」が停止したためです。

Six Apart - Movable Type サポート: コメントの投稿が急に遅くなりました

標準プラグイン「SpamLookup」がデフォルトで参照しているサーバーのひとつ、「opm.blitzed.org」が停止したため、コメントの投稿の際、非常に長い時間がかかったり、タイムアウトとなる現象が発生しています。

具体的には、コメント投稿や、他のブログから Movable Type のブログにトラックバックを送信した際、このサーバに対し、受信したコメントやトラックバックがブラックリストに含まれているかどうか問い合わせるのですが、サーバーからの応答がない（アクセスできない）ため、処理遅延が発生し、結果的にコメント・トラックバック処理が遅延します。

上記の引用記事に修正方法が掲載されていますが、当サイトでも修正手順を下記に記しておきます。

修正手順

管理画面にログインして、右側にあるメニューより「プラグイン」をクリック。

プラグイン一覧の後方にある「SpamLookup - Lookups」の右側にある「設定を表示」をクリック。

設定画面に切り替わるので、一番上の「アドレスのチェック」欄の「ブラックリスト」に記載された「opm.blitzed.org」と、その前にあるカンマを削除。

削除するとこのようになります。

削除したら、少し下にある「変更を保存」をクリック。再構築する必要はありません。

以上です。なお、

ブログごとにSpamLookupの設定を変更している場合は、上記手順での修正がそれぞれのブログに反映されません。念のため、各ブログの「設定」>>「プラグイン」から、変更が反映されているかを確認してください。 また、ブログの設定に変更が反映されていない場合には、各ブログについても上記手順での修正を行ってください。

とのことです。

QR コードの進化系、ColorCode^TM（カラーコード^TM）を紹介します。

ちなみに下が同じ URL の QR コード。

他にも美しいデザインの ColorCode^TM があります。

• カラーコードTMギャラリー

BlogPeople の被リンクを頂いた下記のサイトから知りました。ありがとうございました。

• Via：sohoウェブデザイナーの試行錯誤な日々：携帯のカラーコード？
• colorzip

もしかしたらどこかでみかけたことはあるかも知れませんが、私も知られた技術としての認識は全くありませんでした。
もともとは韓国で開発された技術です。

• 白黒のQRコードから「カラーコード」へ──韓国発の新規格
• 次世代型バーコードシステム『カラーコード(TM)』が本格運用へ

ColorCode の基本構造は下記が参考になります。

• 基本構造について

また、QRコードとの違いは見た目だけでなく、下記のようなアドバンテージがあります。

最近の携帯であれば、4キャリア（DoCoMo/au/ソフトバンク/WILLCOM）ともほぼ対応しています。私は DoCoMo P505is という古い機種ですがギリギリセーフでした。
対応している機種でもカラーリーダーをダウンロードする必要があるかもしれません。

• カラーリーダーダウンロード方法

ダウンロードしたアプリを起動・カラーコードを撮影すれば情報を認識して該当の URL にジャンプします（通信はオンで）。

なお、あまり普及していないのは無料でないからでしょうか。

• カラーコードの販売に関して

昨日エントリーした「WordPress でステータスコード 404（Not Found）を返却するエラーページを作る」で HTTP ヘッダのスクリーンショットを掲載しましたが、これはブラウザに表示されたページの HTTP ヘッダを表示・確認できる「LiveHTTPHeaders」を利用していますので、紹介しておきます。

ブログツールで静的な HTML ファイルを出力しているのであれば問題ないと思いますが、ページをダイナミックに生成している場合は HTTP ヘッダ、特にレスポンスを一度確認することをお勧めします。ページキャッシュ機能（一度アクセスされたページは一次ファイルとしてキャッシングしておき、サーバ負荷を回避する）等を利用している場合も同様です。
例えば、ページが存在するにもかかわらずステータスコード 200（OK）を返却していないと、検索エンジンの順位が上がらないとか、インデクシングされなくなる可能性があります。

以下、Firefox をご利用でない方向けに、Live HTTP Headers のインストールおよび利用方法について説明します。Firefox は予めインストールしておいてください。

１．Live HTTP Headers のインストール

「Live HTTP Headers :: Firefox Add-ons」にある「インストール」のアイコンをクリック。この操作は Firefox で行ってください。

「ソフトウェアインストール」ダイアログが開く（数秒待つと「今すぐインストール」のボタンが表示されます）ので、「今すぐインストール」をクリック。

アドオン画面が開き、インストールが開始します。終了したら右下の「Firefox を再起動」をクリック。

Firefox を再起動すればインストール完了です。

２．利用方法

メニューより [ツール] - [Live HTTP Headers] を選択。

これで HTTP ヘッダ表示用のウィンドウが開きます。

この状態でブラウザにお好きなサイトの URL を入力して表示させてください。これで表示したサイトの HTTP ヘッダ（リクエスト/レスポンス）が表示されます。

表示内容は、

• リクエストURL
• リクエストヘッダ
• レスポンスヘッダ

という順序の繰り返しで並んでいます。その一番先頭に表示されているURLのレスポンス（の1行目）が適正、つまり 200 OK や 304 Not Modified であることを確認してください。
ページが存在するのに 404 Not Found や、404 エラーページで 200 OK を返しているのは問題です。

また、スタイルシートやスクリプト、画像をふんだんに使用していると、それらは全て異なるリクエスト URL としてヘッダが表示されます。ただしユーザがブラウザで一度読み込むと、ブラウザのキャッシュにデータが保存されますので、

• そのユーザがキャッシュをクリアしない
• レスポンスのステータスコードに 304（Not Modified）を返却する

という条件を満たしていれば、サーバからデータをダウンロードすることはありません。

話を戻して、表示された HTTP ヘッダの内容を消去したい場合は、ウィンドウ右下の「Clear」をクリックします。

３．カスタマイズ

Config タブで設定を変更することができます。たとえば、Use Style Sheet をチェックしてください。

元の Headers タブに切り替えると、ヘッダにスタイルが設定されます。

Config タブの設定内容は下記の通りです。*1

• POST：ポストデータの扱いを選択
  • none：非表示
  • fast：「Fast Code」方式で POST データを表示（ファイルアップロード時は動作しない）
  • accurate：全 POST データ表示
  • max 1k：POST データの先頭 1キロバイトを表示
• Use style sheet：スタイルシートを適用
• Open LiveHTTPHeaders in a new tab：新しいタブで LiveHTTPHeaders を開く
• Filter URLs with regexp：正規表現で抽出する URL を指定
• Exclude URLs with regexp：正規表現で除外する URL を指定

HTMLページのヘッダを普通に参照するだけであれば、これらを設定する必要は特にありません。

Headers タブの下には「Save All...」と「Replay」があります。
「Save All...」は表示されているヘッダの保存で、「Replay」は、URL を選択した状態でクリック。

これで「Live HTTP Replay」画面が表示されるので、右下の「Replay」をクリックするとブラウザが再読み込みされます。ヘッダのキャプチャも行われます。

その他、ページ上を右クリックして、「ページの情報を表示」を選択して表示されたウィンドウにも HTTP ヘッダが表示されます。

*1：Landscape - エンジニアのメモ：Live Http headers - HTTP ヘッダ表示ツールよりポストデータ部分の表記を引用させて頂きました。ありがとうございました。

WordPress のサイトで、「指定された URL が存在しない場合、テーマ（テンプレート）で用意した 404 エラーページ（404.php）の内容を返却します」というようなことが関連書籍等に記されていますが、サーバの設定によっては 404 エラーページを表示したにもかかわらず、HTTP レスポンスにステータスコード 200（OK）を付与してしまうケースがあります。

また、「指定された URL が存在しない場合」についてもバリエーションがあり、例えば、WordPress が解釈できるクエリー文字列が付与され、かつ存在しない URL であれば、適正なサーバの設定を行っても 404 エラーページが表示されない可能性が高いです。

このエントリーでは、指定された URL が存在しない場合、可能な限り 404 エラーページを返却させると同時に、スクリーンショットのように HTTP レスポンスのステータスコードに 404（ Not Found）を返却する方法を紹介します。

この内容は 2.1.x から、先日リリースされた WordPress 2.2 まで確認しています。また内容について認識不足・認識誤り等ありましたらご指摘ください。適宜修正したいと思います。

１．ステータスコード 200 と 404 について

基礎知識として、HTTP レスポンスのステータスコード 200（OK）は「リクエストは成功」を意味しますので、404 エラーページを返却する場合は「リクエストURIと一致するリソースが見つけられなかった」ことを意味する 404（Not Found）を付与する必要があります。

ちなみに 404 は 4xx レスポンス（クライアントエラー）に含まれます。

• Hypertext Transfer Protocol -- HTTP/1.1
• [Studying HTTP] HTTP Status Code

２．ステータスコード 404 を返却する・対処その1（.htaccess の作成）

下記の内容を .htaccess の先頭に記述します。

ErrorDocument 404 /index.php?error=404

ドキュメントルート以外の場所に WordPress をインストールしている場合は、 "/" の前にドキュメントルートからのディレクトリを記述します。

下記のようにした場合は、エラーページの URL によって若干動作が異なります。

ErrorDocument 404 /404.php

「WordPress標準ガイドブック―導入&基本操作からフルチューンまで」では、クエリーによる設定（前者）が推奨されています。

WordPress標準ガイドブック―導入&基本操作からフルチューンまで マクラケン 直子 WordPress Japan 毎日コミュニケーションズ 2006-09 売り上げランキング : 14469 Amazonで詳しく見る by G-Tools

３．ステータスコード 404 を返却する・対処その2（テーマ修正）

.htaccess をアップロードしてエラーの動作を確認したところ、存在しない URL を指定すると 404.php がハンドリングされるようになりました。しかしながら、例えばデフォルト設定の個別ページやカテゴリーページの URL の末尾の数字に、存在しない ID を指定した場合は、そのテンプレートに記述したエラー処理の内容が表示されます。

例えば、個別記事の URL（デフォルト）は、末尾に "?p=記事番号" というクエリーが付与されますが、

http://user-domain/?p=10000

と、記事が存在しない URL を指定した場合は、404.php が起動されるのではなく、正しいクエリー文字が URL に含まれていると判断してシングルポスト（single.php）がハンドリングされます。

次に、起動されたシングルポストのテンプレートが下記の構造になっていると仮定します。

<?php get_header(); ?>
 
<?php if (have_posts()) :  while (have_posts()) : the_post(); ?>
　　　　　　　　　　　　　：
　（記事がある場合はここに記述されたテンプレートが展開）
　　　　　　　　　　　　　：
<?php endwhile; else: ?>
　　　　　　　　　　　　　：
　（記事がない場合はここに記述されたテンプレートが展開）
　　　　　　　　　　　　　：
<?php endif; ?>
 
<?php get_footer(); ?>

つまり、記事が存在しない ID が付与された正しいクエリーの URL で、上記の構造になっているテンプレートでは、「記事がない場合」の部分（赤色）が実際に処理されることになります。

ここには2つの問題があります。

• テンプレートを正常に処理しているので、ステータスコード 200（OK）を返却する
• 404 エラーであるにもかかわらず 404 エラー用テンプレートがハンドリングされない

この事象は、アーカイブ（archive.php）やページ（page.php）も同様です。アーカイブとして認識されるクエリーが URL に付与されると、アーカイブテンプレート内のエラー処理が起動します。

ステータスコード 404 を返却したいのはもちろんですが、できればエラーページについてはエラーとなる URL に関わらず、一意のページ、つまり 404.php に処理を委ねた方が良い場合もあるのではないでしょうか（例えば 404 エラーページをカスタマイズしたい場合）。

この認識が間違っていないという前提で、下記にそれぞれの対処案を示します。

３．１ ステータスコード 404 を付与する

テーマファイルに含まれる、

• シングルポスト（single.php）
• アーカイブ（archive.php）
• ページ（page.php）

の先頭に、下記の青色の内容を追加します。

<?php if (!have_posts()) { 
header("HTTP/1.1 404 Not Found"); } ?>
<?php get_header(); ?>
　　　　　：

この設定は、処理すべき記事が存在しない場合、ステータスコード 404 を付与し、その後テンプレート後方に出現するエラー処理（前出リストの赤色部分）が実施されます。

３．２ 404 エラー用テンプレートをハンドリングする

ここでは2つの方法を提示していますが、基本的に３．２．１を実施してください。

３．２．１ テンプレートを修正する（推奨）

３．１ 項の修正内容と一部重複しますが、テーマファイルに含まれる

• シングルポスト（single.php）
• アーカイブ（archive.php）
• ページ（page.php）

の先頭に、下記の青色の内容を追加します。

<?php if (!have_posts()) { 
header("HTTP/1.1 404 Not Found");
include (TEMPLATEPATH . '/404.php');
return; } ?>
<?php get_header(); ?>
　　　　　：

この行を加えることで、処理すべき記事が存在しない場合は、テンプレートの通常処理を実行する前にレスポンスヘッダに 404 を付与し、404.php に処理を移します。

３．２．２ ソースコードを修正する（非推奨）

今回のカスタマイズは、WordPress のソースコードを解析していて、先にこの方法に辿りつき、それからテンプレートに記述する案が思いつきました。
この方法を用いればテンプレートの修正をせずに、404.php の内容を表示することができます。が、これは覚え書きレベルですので、実際には３．２．１項の修正を推奨します。

/wp-includes/classes.php を任意のエディタで開き、下記の青色部分を追加します。

function handle_404() {
    global $wp_query;
    // Issue a 404 if a permalink request doesn't match any posts.  Don't
    // issue a 404 if one was already issued, if the request was a search,
    // or if the request was a regular query string request rather than a
    // permalink request.
    if ( (0 == count($wp_query->posts)) && !is_404() && !is_search() && ( $this->did_permalink || (!empty($_SERVER['QUERY_STRING']) && (false === strpos($_SERVER['REQUEST_URI'], '?'))) ) ) {
        $wp_query->set_404();
        status_header( 404 );
        nocache_headers();
    }    elseif( !have_posts() ) {
        $wp_query->set_404();
        status_header( 404 );
    }    elseif( is_404() != true ) {
        status_header( 200 );
    }
}

４．まとめ

WordPress でエラーとなる URL でリクエストされた場合に、正しいレスポンスを返却するためには、.htaccess の設定と、テンプレートの修正が必要です。どの部分の修正がどこに適用されるかについては下記の表を参考にしてください。

「サーバ依存」の部分は、自宅サーバとレンタルサーバで結果が異なったため、このような表記にしています。

５．その他

エラーページの表示に、常に 404.php を利用するのであれば、各テンプレートの構造は（おおざっぱですが）、

<?php if (!have_posts()) { 
header("HTTP/1.1 404 Not Found");
include (TEMPLATEPATH . '/404.php');
return; } ?>
<?php get_header(); ?>
 
<?php if (have_posts()) :  while (have_posts()) : the_post(); ?>
　　　　　　　　　　　　　：
　（記事がある場合はここに記述されたテンプレートが展開）
　　　　　　　　　　　　　：
<?php endwhile; endif; ?>
<?php get_footer(); ?>

と、エラー処理を省略したフォーマットで統一できそうな気がします。

また上記までの修正で、ステータスコード 404 が付与されるようになりますが、レスポンスヘッダ全体を眺めた場合、X-PingBack ヘッダが付与されることついては懸念が残ってます。

• PingBack（日本語訳）

まず、現在のブログ運営状況は下記の通りです。

• エントリー：1584（約1エントリー/日）
• コメント：10451
• トラックバック：3761
• アクセス数：約8700PV/日・約26万PV/月（Google Analytics による直近1ヶ月分）

そして3周年記念ということで、2周年記念の時よりさらにみかけなくなった「TB（トラックバック）企画」を行いたいと思います。
「TB企画」とは、TB企画者が出したお題でエントリーを書き、それをTB企画者の元エントリーへトラックバックするというもので、私がブログを始めた2004年にはあちこちでTB企画をやってました。

昨年、一昨年のTB企画の模様は下記の通りです。TB企画をご存じない方の参考にどうぞ。

• ブログ開設2周年記念・【TB企画】あなたのサイトのお勧めエントリー（結果）
• ブログ開設1周年記念・【TB企画】あなたのサイトのお気に入りカスタマイズ（結果）

今回のお題は

あなたのサイトのお勧めサービス・ツール

にしてみました。

ここ最近、Web2.0 の潮流にのって様々なサービスやツールが登場しています。私はブログにどっぷり浸かっている割には新しいサービスに乗り遅れている方だと感じてますが、それはともかく、あなた自身が気に入って利用している、あるいは新しく使い始めたサービスやツールをひとつかふたつ（いくつでもいいです）取り上げ、気に入っている点や役に立った点、あるいは思い出等をご自身のサイトで紹介し、このエントリーにトラックバックしてください。

「サービスやツールが何か分からない」という方のために説明しておきますと、「サービス」は「ネットのあちら側」で用意されたもの、「ツール」は「ネットのこちら側（PCやレンタルサーバにインストール）」で利用するものを想定しています。「新しいサービス」と書きましたが、レガシーなものでも自分で作ったものでも、なんでも構いません。

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

ちなみに、私のお勧めサービスは「feedpath Rabbit」と「FeedBurner」です。「feedpath Rabbit」はネット上での購読スタイルを大きく変えてくれたと同時に、リニューアルによる一括表示機能がなくなった時、このサービスがいかに便利であったかを思い知らされました。
またブログから1つのフィードを生成するだけで複数のRSSフォーマットに対応してくれて、さらにあれこれと分析してくれる「FeedBurner」は、サイト運営に欠かせないサービスのひとつになっています。

という訳で、2年目を超えた辺りから「いつまでこのペースでカスタマイズ記事を投稿できるのだろう？」という日が続いてますが、過ぎてみると早いものでなんとか4年目に突入することができました。
とはいえ、開設当初のエントリーと最近のエントリーを比較するとどう考えても破綻しそうなペースです。カスタマイズネタが尽きた時は日常ネタに逃げると思いますが、よろしくお付き合いください。

ギターを少しかじったことがある。

Firefox 機能拡張の定番、All-In-One Sidebar を紹介します。

この機能の「マルチパネル」を利用することで、「Google 検索結果」や「はてなブックマーク」のリンク先のページを、ブラウザやタブを新たに開かず、いわゆる「フレーム」を使ったような振る舞いをさせることができ、快適なブラウジングを実現することができます。

• All-In-One Sidebar - Mozilla Firefox まとめサイト
• Via：FIFTH　EDITION：そろそろブラウザにはマルチパネルを常備すべきじゃないだろうか・・・

ということで、Firefox をご利用でない方向けに、All-In-One Sidebar のインストールおよび「マルチパネル」利用方法について説明します。Firefox は予めインストールしておいてください。

１．All-In-One Sidebar のインストール

「All-in-One Sidebar :: Firefox Add-ons」にある「インストール」のアイコンをクリック。この操作は Firefox で行ってください。

「ソフトウェアインストール」ダイアログが開く（数秒待つと「今すぐインストール」のボタンが表示されます）ので、「今すぐインストール」をクリック。

アドオン画面が開き、インストールが開始します。終了したら右下の「Firefox を再起動」をクリック。

Firefox を再起動するとブラウザ左側に図のようなサイドバーが表示されます。

サイドバー全体を非表示にしたい場合は、左端の細い部分（切り替えトグル）をクリックするか、メニューの[表示] - [サイドバーグリップ]のチェックを外します。

２．「マルチパネル」利用方法

下から2番目の「マルチパネル」アイコンをクリック（ツールチップはとりあえず気にせずに）。

下がマルチパネルが開いた状態です。
次の作業に進む前に、検索結果やソーシャルブックマーク等のページを表示させておいてください。ここでは「はてなブックマーク」を表示している前提で話を進めます。

マルチパネル上部にある「ページ」をクリック。

これで右側と同じページがマルチパネルに表示されます。
マルチパネル内のページの任意のリンクをクリックすると、リンク先の内容は常に右側のエリアに表示されますので、履歴を戻ったり、見終わったページのブラウザやタブを閉じる必要がなくなります。

先程クリックした「ページ」の右側にある▼をクリックすると、ページの表示方法を変更することができます。ここでは「縮小描画モードにする」を選択します。

これでマルチブラウザの表示が縮小されます。スクリーンショットでは判別できないのですが、文字だけでなく、ページ内にある画像等も全て縮小されます。

上部の「マルチパネル」のをクリックすると、他の情報（ブックマーク・履歴・ダウンロード・アドオン・ページの情報・ページソース・エラーコンソール等）に切り替えることができます（左側アイコンと同じ）。一番下の「All-In-One Sidebar 設定」を選択すればさらに詳細なカスタマイズが可能です。

マルチパネルは、最後に表示したコンテンツが記憶されます。記憶を解除したい（ブラウザ再起動時に何も表示しない）場合は上部右側にある歯車のアイコンをクリックして「最後に表示したコンテンツを記憶する」のチェックを外しましょう。

先日公開した XHTML タグ一覧表示ツールの中の説明で、「<br /> は空タグではありません」というご指摘を頂きました。勉強不足だったことを反省して、改めて XHTML の「タグ」と「要素」の違いや使い方について調べてみました。

まず、W3C で公開されている「XHTML 1.0」の仕様は下記です。

• XHTML? 1.0 The Extensible HyperText Markup Language (Second Edition)
• XHTML? 1.0: 拡張可能ハイパーテキストマークアップ言語

上記の「4. Differences with HTML 4（HTML4との相違点）」に

Well-formedness is a new concept introduced by [XML]. Essentially this means that all elements must either have closing tags or be written in a special form?（整形式性は、[XML] によって導入された新しい概念である。本質的には、これは、すべての要素が終了タグを持つか(後述のとおり)特殊な形式で書かれるかしなければならず、?）

とあり、XML の仕様を参照するようになっています。「XML 1.0」の仕様は下記です。

• Extensible Markup Language (XML) 1.0 (Second Edition)
• 拡張可能なマーク付け言語 (XML) 1.0

和訳は「W3C勧告 1998年2月10日」版のものですが、以降で参照する部分に差分はないと思います。

XML 1.0 仕様の「3. Logical Structures（論理構造）」に解説がありますので、そこから理解した内容を記したいと思います。認識に誤りがありましたらご指摘ください。

要素（Element）

要素の論理構造 *1 は下記の通りです。

[39] element ::= EmptyElemTag 
                 | STag content ETag [WFC: Element Type Match] 
                                     [VC: Element Valid]

ここから「要素」という用語が示すのは「空要素タグ（EmptyElemTag）」、または「開始タグ（STag）＋要素の内容（content）＋終了タグ（ETag）」ということになります。
例えば「body 要素」と言えば「<body>～</body>」全体を指します。

開始タグ（Start-tag）

開始タグの論理構造は下記の通りです。

[40] STag      ::= '<' Name (S Attribute)* S? '>' [WFC: Unique Att Spec] 
[41] Attribute ::= Name Eq AttValue [VC: Attribute Value Type] 
                                    [WFC: No External Entity References] 
                                    [WFC: No < in Attribute Values]

Name（名前）、または0個以上の属性名と属性値の対を '<' と '>' で括ったものが「開始タグ」です。「body 要素の開始タグ」と言えば「<body class="hogehoge">」を指します。

終了タグ（End-tag）

終了タグの論理構造は下記の通りです。

[42] ETag ::= '</' Name S? '>' 

Name（名前）を '</' と '>' で括ったものが「終了タグ」です。「body 要素の終了タグ」と言えば「</body>」を指します。

要素の内容（Content of Elements）

要素の内容の論理構造は下記の通りです。

[43] content ::= CharData? ((element | Reference | CDSect | PI | Comment) CharData?)* /* */

ある要素の、開始タグと終了タグの間にあるテキストを、その要素の「内容」と言います。「<body>～<body>」で例えると、 "?" の部分が「body 要素の内容」となります。

空要素のためのタグ（Tags for Empty Elements）

空要素のためのタグの論理構造は下記の通りです。

[44] EmptyElemTag ::= '<' Name (S Attribute)* S? '/>' [WFC: Unique Att Spec]

Name（名前）、または0個以上の属性名と属性値の対を '<' と '/>' で括ったものが「空要素タグ（Empty-element tags）」です。「空要素タグ」は内容をもたない要素に使用することができます。
先の「要素」の論理構造より、要素は空要素タグに等しいので、「br 要素」と言えば、「<br />」全体を指します。

その他

補足として、XHTML? 1.0 The Extensible HyperText Markup Language (Second Edition)の「C. HTML Compatibility Guidelines（HTML互換性ガイドライン）」より引用しておきます（「XHTML? 1.0: 拡張可能ハイパーテキストマークアップ言語」より引用）。

C.2 空要素

たとえば <br /> や <hr />, <img src="karen.jpg" alt="Karen" /> といったように、空要素の末尾の / と > との前にスペースを1個組み込むこと。また、たとえば <br /> といったように、空要素には最小化タグ文法を使うこと。これは、XMLで許容されている代わりの文法 <br></br> は、多くの既存のユーザエージェントでは与えられる結果が一定しないからである。

C.3 要素最小化と空要素内容

内容モデルが EMPTY ではない要素に空インスタンスが与えられる場合(たとえば空のタイトルや段落)には、最小化形式は使わないこと(たとえば <p /> は使わず <p> </p> を使う)。

まとめ

用語とマークアップ例の対応は下記の通りです。赤色（または強調文字）が対応部分です。*2

• 要素：<body>～</body>
• 開始タグ：<body>～</body>
• 終了タグ：<body>～</body>
• 内容：<body>～</body>
• 空要素タグ：<br />

上記より、「タグ」という定義には3種類しか存在ないため、「body 要素の開始タグ」や「body 開始タグ」という用い方が適切で「body タグ」や「br タグ」という使い方は（仕様的に）適切でないように思われます。

しかし日本では「ウェブサイト」を「ホームページ」と呼ぶのが一般的である（あった？）ように、「要素」や「内容」の代わりに「タグ」を用いるのが定着した用法になってしまっています。
それは、google サジェストやキーワードアドバイスツールで「XHTML」を入力すると「タグ」が上位に表示されることからも明らかです。また「はてなダイアリー：キーワード：タグ」には「開始タグと終了タグをまとめて『タグ』と呼ぶ」と書かれています。たしかにそういう意味合いで使われているケースが多いのではないでしょうか。

このエントリーではそこに言及するつもりはありません。少なくとも私自身が過去の記事や初心者の方からの質問の回答で「タグ」を多用しています（「開始タグ・終了タグ」は最近使うようになりました）ので、まずは今回勉強した内容を記事に活かせるよう、気をつけたいと思います。

*1：論理構造の記法にはBNF（バッカス・ナウア記法）が使用されています。詳細は「BNF記法入門（1） ─XML関連仕様を読むために─」が参考になるでしょう。

*2：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。赤色部分が二重下線で表示されます（IEではグレースケール表示になります）。

livedoor ブログのサイドメニュー（プラグイン）を折りたたむカスタマイズ（その2）を紹介します。

前回紹介した「サイドメニューの折りたたみ for livedoorブログ」ではスクリプトをテンプレートに貼り付けるだけで動作するように試みましたが、JavaScript の影響で IE では折りたためないという不具合がありました。
今回は影響のある部分を取り除き、その部分を手動で設定するように手順を変更しました。

このカスタマイズを行うことでサイドメニューのプラグインのタイトル部分に折りたたみのリンクが与えられ、そのリンクをクリックすることでプラグインを折りたたむことができます（下）。また、折りたたみ状態は cookie で保持しますので、ブラウザ再起動やページ遷移をしても直前の折りたたみ状態で表示されます。

また前回のカスタマイズより手順が若干増えますが、その分下記のメリットがあります。

• プラグイン別に折りたたみ有無を設定することができます
• プラグイン別に折りたたみ状態を変更することができます

折りたたみのサンプルは下記をご覧ください。「livedoor NEWS」は折りたたみ対象外です。

サンプル

以下、カスタマイズ方法です。
ここでは当サイトで配布している lividoor ブログテンプレートをサンプルに説明します。他のテンプレートでもスタイルシートを修正すれば適用可能です。

１．トップページ/個別記事ページ/カテゴリアーカイブ/月別アーカイブ

まずトップページだけカスタマイズし、正常に動作した時点で他のアーカイブに同じ設定を行います。

１．１ スクリプトの設定

トップページの body 終了タグの直前に下記のスクリプトを設定してください。

<script type="text/javascript" src="http://koikikukan.up.seesaa.net/js/menufolder.js" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
var elements = document.getElementsByTagName('div');
var folddata = new Array();
var foldname,foldlist,fold,flag;
var counter = 1;
for (var j = 0,len = elements.length; len > j; j++) {
  if (elements[j].className == 'sidetitle') {
    if ((elements[j].innerHTML).indexOf('livedoor NEWS') != -1) {
      flag = 0;
    } else {
      foldname = 'fold' + counter + 'name';
      elements[j].setAttribute('id',foldname);
      flag = 1;
    }
  }
  if (flag && elements[j].className == 'side') {
    foldlist = 'fold' + counter + 'list';
    elements[j].setAttribute('id',foldlist);
    counter++;
  }
}
FoldNavigation('fold1','off',false);
//]]>
</script>

１．２ スクリプトの修正

貼り付けた後、末尾にある赤色部分の

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

をメニュー（=プラグイン）数分、並べてください（これが折りたたみを起動する部分になります）。
例えば折りたたみたいメニューが3つある場合は

FoldNavigation('fold1','off',false);
FoldNavigation('fold2','off',false);
FoldNavigation('fold3','off',false);

とします。
注：livedoor NEWS はメニューとしてカウントしないでください。

この行を追加する場合の注意点として、カッコ内にある "fold" の後ろの数字（上記の例では fold1/fold2/fold3 の部分）をインクリメント（=加算）するのを忘れないでください。

この数字はメニューの出現順序と対応しています。 当サイトのテンプレートをご利用であれば左上から右下に向かって表示されるメニューと数字が対応していますが、ご利用のテンプレートによっては表示順序と HTML ソースでの出現順序が異なる場合があるため、対応も異なる場合があります。

また折りたたみたくないメニューがある場合は、そのメニューに対応する番号の行を記述しないでください。例えばメニューが3つ表示されていて、2つめのメニューを折りたたみたくない場合は

FoldNavigation('fold1','off',false);
FoldNavigation('fold3','off',false);

と、2番目の行を記述しなければOKです。

これで保存・再構築を実施して折りたたみが正常に動作することを確認してください。

動作が正常であれば、トップページに貼り付けたスクリプトをコピーして、個別記事ページ/カテゴリアーカイブ/月別アーカイブのbody 終了タグの直前に下記のスクリプトを設定してください。

２．スタイルシート（CSS）

下記をスタイルシートの最後の方に追加してください。

.sidetitle {
    width: auto;
    margin: 3px 0 0;
    padding: 0;
    text-align: center; /* テキスト配置 */
    line-height: 200%;
}
.sidetitle a {
    width: auto;
}
/* リンク */
.sidetitle a:link,
.sidetitle a:visited {
    display: block;
    color:#666666; /* 文字色 */
    background-color:#f6f6f6; /* 背景色 */
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    text-decoration: none;
}
/* マウスポイント時 */
.sidetitle a:hover {
    color:#ffffff; /* 文字色 */
    background-color: #999999; /* 背景色 */
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    text-decoration: none;
}

前述した通り、カスタマイズは当サイトで配布しているテンプレートをサンプルにしていますので、他のテンプレートをご利用の場合は上記の CSS を参考に、最適な設定に変更してください。

３．折りたたみを開いた状態にしたい場合

デフォルトは全てのプラグインを折りたたんだ状態で表示するようにしています。これを最初から開いた状態で表示するには、１項で追加したスクリプトの

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

を

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

に変更してください。on / off はメニュー別に設定することができます。

折りたたまれた状態は cookie に保持されますので、後で本項の設定を行っても cookie が有効になって変更できていないようにみえるかもしれません。その際はブラウザの cookie を一旦削除してから、再表示してみてください。

先日コンサートに出演する機会があり、iPod nano と、最近購入した「iTalk Pro」を使って演奏を録音してみました。

「iTalk Pro」は iPod 5G、または、第二世代 iPod nano 用のステレオボイスレコーダー。コンパクトなボディの左右にステレオマイクが内蔵されているので、iPod に接続するだけで簡単に録音できます。

「ボイスレコーダー」というと、それなりの音質という印象しかないのですが、iTalk Pro はCD並みに高音質なステレオ デジタルレコーディング（16bit / 44.1KHz）が可能です。ファイルサイズを抑えるモノラル録音（16bit / 22.05KHz）も可能です。

iTalk Pro の存在を知ったのは「住 太陽のブログ：IT業界でライターになるために必要な3つの条件」です。ブログを始めた頃のエントリー「新型iPodに」で、iPod にマイクが装着できるという記事を書いたのですが、「iPod nano で録音が可能」という認識がうすっかり欠落していました。

以下、操作概要と簡単な使用レポートです。

操作概要

下は iTalk を差し込んだところ。差し込むと即録音できる状態になります。iPod の横幅にあわせたサイズなので、iPod nano ではややはみ出します。

この状態で iTalk の中央にある大きな丸いボタンを押すと録音が開始します（下は録音している状態）。ディスプレイに録音時間が表示されると同時に中央ボタン部分が赤く光り、録音中であることを示します。

メニューから iTalk Pro のメニューに進むには、「iPod（メインメニュー） → エクストラ → ボイスメモ」を選択。

これで iTalk Pro 用のメニューになります（下）。
「iPod（メインメニュー） → 設定 → メインメニュー」で「ボイスメモ」を「オン」にしておけば、メインメニューから直接ボイスメモにショートカットできます。

品質は「高（ステレオ）」と「低（モノラル）」のいずれかが表示されます。「品質」を選択してセンターボタンをクリックすると「高」「低」が切り替わります。

iTalk Pro 本体の中央ボタンを長押しすると iTalk が外せる状態になり、録音レベルの設定画面が表示されます。

録音レベルは「High Gain（大）」「Low Gain（小）」「Automatic（自動）」の3種類があり、会議等は「Automatic（自動）」、レベルを一定に保って録音する場合で小さい音を録る時は「High Gain（大）」、大きい音を録る時は「Low Gain（小）」がいいでしょう。「High Gain（大）」で大きなレベル入力があると音飛びするような録音になります。

設定の効果については後述しますが、この項目についてはネット上で情報があまりなく、販売サイトでも「3種類の設定があります」という程度で、購入するのに一番悩んだところです。参考になれば幸いです。

なお iTalk Pro 本体の抜き差しをするとデフォルト値（Automatic）に戻りますので注意が必要です。

下は「Low Gain」に切り替えたところ。元のメニューに戻るには、中央ボタンを長押しします。

iTalk Pro 本体下にあるマイクジャックに外部マイクを接続することもできます。

データは iTunes 経由で、非圧縮の WAVE 形式で保存されます。個人的には WAVE で編集をするので非常に便利です。

使用レポート

今回は本体マイク＋ステレオ＋録音レベル「Low Gain（小）」で収録しました。

聴いた印象は、やや高音が目立つ感じは否めませんが、全体的に大変クリアな音。「CD並みの高音質」というのも納得できます。また音量の大きな場面でも歪むことなく録れており、外部マイクを接続すればより原音に近い音で録音できるのではないでしょうか。

また30分程度の録音でしたが、バッテリーは1段階減った程度です。駆動時間・録音時間等についての詳細は下記のページをご覧ください。

• iTalk Pro：よくあるお問い合わせ 一覧
• iTalk Pro：サポートQ&A 一覧

これで練習の録音等で重たい機材（といってもMDウォークマンですが）から解放され、重宝しそうです。

GriffinTechnology iTalk Pro GRI-IP-000063 Griffin Technology 2006-11-10 売り上げランキング : 423 Amazonで詳しく見る by G-Tools

XHTMLタグを書く時の参考用ドキュメントとして、シンプルなツールを作ってみました。

• XHTMLタグ一覧表示ツール

ページに表示されている要素（タグ）をクリック（またはマウスオーバー）すると、その下にクリックした要素の子要素と親要素、および属性を表示します。要素の意味や具体的な使い方については一切触れていません。
今のところ XHTML 1.0 Transitional と XHTML 1.0 Strict を対象にしています。XHTML 1.1 もそのうち追加する予定です追加しました。

XHTML 初心者の方向けに、ページ一番下にXHTMLの規則も列挙しています。

テクノラティの自サイトのリンク状況を眺めていると、サイドバーに「リンクカウントグラフ」なるものが表示されているのに気がつきました（下）。

ということで、当サイトでも表示してみることにしました。サイドバーに一度貼り付けたのですがスタイルの調整が間に合わなかったので、とりあえずここに表示しておきます。上のスクリーンショットと違いが分からないので30日表示にしています。

このグラフについて調べてみると、テクノラティジャパンサイトリニューアルでお知らせがあり、4月20日頃に追加された機能のようです。

グラフはサイトに表示させることができるようですので、本エントリーで設置方法を紹介します。

１．大きなグラフを表示する

Technorati でサイト検索した結果画面の左側にグラフが表示されます。グラフは画像リンクになってますので、クリックすると設定画面に遷移します。ここで設定画面（下）が表示されますので、計測期間を「7日/30日/90日/180日」のいずれかから選択し、「グラフ作成」をクリックして、下に表示されたコードをブログで表示させたい位置に貼り付けます。

２．小さなグラフを表示する

上の大きいグラフはさすがにブログ上で表示スペースがありません。で、元々の検索結果画面に表示されているものと同じグラフは出せないだろうかとソースを調べたところ、表示できました。公式な設定方法ではないので予め謝っておきます。ごめんなさい。

下記のコードを貼り付ければ小さいグラフを表示できます。

<a href="http://charts.technorati.jp/chart/[表示サイトのドメイン]?chartdays=30&amp;language=ja&amp;authority=n"><img alt="Technorati リンクカウントグラフ" src="http://charts.technorati.jp/chartimg?q=[表示サイトのドメイン]&amp;width=180&amp;height=160&amp;days=180&amp;type=url" width="180" height="150" /></a>

赤色の[表示サイトのドメイン]は適宜変更してください。設定例として、当サイトであれば「www.koikikukan.com」となります。また赤色の 180 は計測期間ですので、「7日/30日/90日/180日」に対応した数字を設定すれば表示が切り替わります。
画像リンクの青枠を消去する等のスタイルは各自調整してください。

このコードをブログに貼り付けると、冒頭に表示したグラフが Technorati のクレジット付きで表示されます。

当サイトで配布中の Movable Type テンプレートを 3.3 用にバージョンアップしました。新しいテンプレートは下記の「Movable Type テンプレート」のページからダウンロードしてご利用ください。

Movable Type テンプレート

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

１．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 を考慮して「記事名」が先頭に表示されるよう変更しました。タイトルやアーカイブ名に検索キーワードが含まれていると有利です。

３．サイドバーの XHTML マークアップ変更

div 要素を多用していたサイドバー、および各メニューリストのマークアップを定義リスト（dl/dt/dd）に変更しました。（X）HTMLでは文書の構造を明確にするためのもので、無意味に div を多用することは推奨されていません。この点に関しては反省を踏まえて見直しを行ないました。

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

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

関連記事：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 の値には単位なしが良いとされる理由

７．エントリータイトルにパーマリンクを設定

これまでエントリー本文下の投稿時刻にのみパーマリンクを設定していましたが、ユーザビリティおよびSEO（内部リンクには意味のある文言があう方が良い）を考慮し、エントリータイトルにもアンカーを追加しました。

８．エントリータイトルの目印を border プロパティに変更

ある意味このテンプレートのトレードマークだった「●」印から border プロパティによる罫線に変更しました。

９．pre 要素用 CSS 追加

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

１０．バナーの class 属性名変更

先人の方々の意見を参考に「banner」から「header」に変更しました。

１１．カレンダーのマークアップおよびセレクタ名変更

thead および tbody を追加。またセレクタ名が混沌としていたので全面的に見直しました。

１２．追記部分の MTEntryIfExtended タグを MTIfNonEmpty に変更

3.3 では MTIfNonEmpty が推奨されているので変更しました。

１３．エントリー画像用CSS設定削除

エントリーに表示する画像を想定して CSS を設定していましたが、左上に表示する場合しか対応していなかったので削除しました。

１４．コメントエリアの div 要素整理

コメント部分のマークアップはデフォルトテンプレートの構造をある程度継承していましたが冗長な div 要素を削除しました。なおコメント・トラックバックに関してはサイドバー並みのマークアップ見直しはできておりません。予めご容赦ください。

１５．コメントアウトされたマークアップをMTIgnoreで括る

コメント・トラックバックのポップアップ画面用のアンカーを簡単に切り替えられるよう、コメントアウトした状態で記述していましたが、冗長なマークアップとして残ってしまうのを避けるため、MTIgnore を利用して、ページに表示されないように変更しました。

１６．その他

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

Movable Type のダイナミック・パブリッシングを利用する際、外部で配布されているMTプラグインの適用にあたっては制約があります。このエントリーではこれを解消する方法をいくつか紹介したいと思います。

ダイナミック・パブリッシングのメリットとスタティック・パブリッシングの併用

Movable Type のダイナミック・パブリッシング機能を利用することで、再構築処理が大幅に削減、あるいは不要になることについて、ご存知の方も多いと思います。これを利用すればブログでよくみかける「再構築に時間がかかる」とか「500エラーになる」という問題が減るかもしれません。*1

ただし、ダイナミック・パブリッシングはページ表示時にデータベースから情報を収集し、再構築を行なうため、アクセスが多いとその分サーバに負荷がかかります。「キャッシュ機能」や「条件付きGET」を利用すればこの問題を解消することは可能ですが、本来的にはアクセスの多いメインページやRSSフィードはスタティック・パブリッシング（静的なファイルを出力）にすることが望ましいと考えます。

特にレンタルサーバを使用する場合、この条件が重要になってきます。ダイナミック・パブリッシングはページ表示を PHP で処理するのですが、PHP が CGI で稼動するレンタルサーバでは、モジュール版で動作する場合よりレスポンスがやや遅く、サーバにも負荷がかかります。詳細は「PHP における「モジュール版」と「CGI 版」の比較 + WordPress の適用例」をご覧ください。

Movable Type の良い点は、アーカイブ別にダイナミック・パブリッシング/スタティック・パブリッシングを選択できることです。
先に述べたように、メインページやRSSフィードはスタティック・パブリッシングにし、カテゴリー・アーカイブや日付アーカイブ等をダイナミック・パブリッシングにするといった、アクセスに応じて柔軟な対応が可能です。

ダイナミック・パブリッシングの問題

ここからが本題です。そういう訳で個人的には Movable Type のダイナミック・パブリッシング機能は非常に優れていると感じているのですが、利用するにあたっては問題がひとつあります。それは

ダイナミック・パブリッシング対応のMTプラグインが少ない

ということです。ここで言う「MTプラグイン」は、変数タグ・コンテナタグ・条件タグといった、テンプレートに記述するMTタグを提供するものを指します。

ダイナミック・パブリッシングを行う場合、標準のMTタグは Perl で実装されたプログラムを処理するのではなく、PHP（Smarty）が動作します。Movable Type のインストールアーカイブに php/lib ディレクトリがあると思いますが、この配下にダイナミック・パブリッシング用のタグおよびグローバルアトリビュートのプログラムが配置されています。

したがって、MTタグを提供するプラグインをダイナミック・パブリッシングで利用する場合、標準のMTタグと同様に PHP の実装が条件となります（プラグインに php ディレクトリが存在すれば多分対応しています）。
現在、当サイトで公開している「Movable Type プラグイン一覧」で挙げているプラグインは 200 を越えていますが、多くのプラグインが対応していないのではないかと推測します（私自身然り）。またこれがダイナミック・パブリッシングがメジャーにならない要因のひとつでかもしれないと懸念しています。

前置きが長くなりましたが、この問題を解消する方法等についていくつか紹介したいと思います。同時にダイナミックパブリッシングに精力的に活動されているサイトも紹介させて頂きます。

１．MTIncludeタグを利用する

これは、ダイナミック・パブリッシングに対応していないMTタグを使ったリスト等を、一旦インデックス・テンプレートにモジュール（部品）として追加し、それをダイナミック・パブリッシングしたアーカイブから MTInclude タグ+ file 属性を利用して引き込むというテクニックです。

このテクニックは下記のサイトで詳しく紹介されています。

• WingMemo：MTIncludeタグの使い方とモジュール化
• WingMemo：ダイナミック・パブリッシング下でperlのプラグインを使う方法

「WingMemo」さんのところではダイナミック・パブリッシングに関する記事が多く掲載されています。ダイナミック・パブリッシングを検討されている方の手助けになると思いますので是非ご利用ください。

なお、このテクニックで作成したインデックス・テンプレートは必ず「インデックス・テンプレートを再構築するときに、このテンプレートを自動的に再構築する」にチェックを入れてください。
試しに MTCollate を使った「最近のコメント」を出力してみたところバッチリでした。

２．PHP化されたプラグインを利用する

「あんちもん2.Lab」さんは、個人プロジェクトとして Perl 版プラグインをダイナミックパブリッシング対応にリファクタリング（PHPize）されているサイトです。

これまでにもいくつかの既存プラグインをダイナミック・パブリッシング対応にされており、先の MTInclude で対応できないケースもこのリファクタリングで解決することができます。個人的には大変期待しておりますので、「このプラグインをダイナミック・パブリッシング対応して欲しい！」とお願いすれば作ってもらえるかもしれません。*2

３．Perl 版ダイナミックパブリッシングを利用する

「The blog of H.Fujimoto」さんで配布されている、Perl 版のダイナミック・パブリッシングを利用することで、ダイナミック・パブリッシングに対応していないプラグインをそのまま利用することができます。

• The blog of H.Fujimoto：再構築不要化カスタマイズ（MT3.3専用版）

ダイナミックパブリッシングの今後

サイトを訪問する側からすればストレスなくページが表示されることが好ましいので、全ページをスタティック・パブリッシングとするのが望ましいのですが、大量の記事を有するサイトでの運営の効率化を考慮すると、ダイナミック・パブリッシングは今後益々有効な手段として利用されていくのではないでしょうか。

私自身、サイトのダイナミック・パブリッシング化を検討していますし（それ以前に3.3にアップグレードしなければですが）、冒頭に述べたモジュール版 PHP がレンタルサーバ界に普及することが、Movable Type に限らず、ページを動的生成するブログがスタティック・パブリッシングに近づくための重要な要素のひとつであると思います。

*1：サーバのスペックによっては解消しない場合もあります。
*2：元サイトの配布プラグインのライセンスによっては対応できないものもあります。

livedoor ブログのサイドメニュー（プラグイン）を折りたたむカスタマイズを紹介します。

このカスタマイズを行うことでサイドメニューのプラグインのタイトル部分に折りたたみのリンクが与えられ、そのリンクをクリックすることでプラグインを折りたたむことができます（下）。また、折りたたみ状態は cookie で保持しますので、ブラウザ再起動やページ遷移をしても直前の折りたたみ状態で表示されます。

折りたたみのサンプルは下記をご覧ください。

サンプル

注： 本カスタマイズでは IE は動作対象外です（理由は後述）。IEで動作させる場合は「サイドメニューの折りたたみ for livedoorブログ（その2：IEで折りたためるようにする）」をご覧ください。

livedoor ブログの折りたたみについては以前にご質問を頂いていたもので、エントリーが大変遅くなりましたこと、この場をお借りしてお詫び申し上げます。

以下、カスタマイズ方法です。
ここでは当サイトで配布している lividoor ブログテンプレートをサンプルに説明します。他のテンプレートでもスタイルシートを修正すれば適用可能です。

１．トップページ/個別記事ページ/カテゴリアーカイブ/月別アーカイブ

トップページ/個別記事ページ/カテゴリアーカイブ/月別アーカイブのbody 終了タグの直前に下記のスクリプトを設定します。

<script type="text/javascript" src="http://koikikukan.up.seesaa.net/js/menufolder.js" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
var isIE = (document.documentElement.getAttribute("style") ==
            document.documentElement.style);
if(!isIE) {
var elements = document.getElementsByTagName('div');
var folddata = new Array();
var foldname,foldlist,fold,flag;
var counter = 1;
for (var j = 0,len = elements.length; len > j; j++) {
  if (elements[j].className == 'sidetitle') {
    if ((elements[j].innerHTML).indexOf('livedoor NEWS') != -1) {
      flag = 0;
    } else {
      foldname = 'fold' + counter + 'name';
      elements[j].setAttribute('id',foldname);
      flag = 1;
    }
  }
  if (flag && elements[j].className == 'side') {
    foldlist = 'fold' + counter + 'list';
    elements[j].setAttribute('id',foldlist);
    fold = 'fold' + counter;
    folddata[folddata.length] = 'FoldNavigation(\'' + fold + '\',\'off\',false)\;';
    counter++;
  }
}
var head = document.getElementsByTagName('head').item(0);
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.appendChild(document.createTextNode(folddata.join("\n")));
head.appendChild(script);
}
//]]>
</script>

２．スタイルシート（CSS）

下記をスタイルシートの最後の方に追加してください。

.sidetitle {
    width: auto;
    margin: 3px 0 0;
    padding: 0;
    text-align: center; /* テキスト配置 */
    line-height: 200%;
}
.sidetitle a {
    width: auto;
}
/* リンク */
.sidetitle a:link,
.sidetitle a:visited {
    display: block;
    color:#666666; /* 文字色 */
    background-color:#f6f6f6; /* 背景色 */
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    text-decoration: none;
}
/* マウスポイント時 */
.sidetitle a:hover {
    color:#ffffff; /* 文字色 */
    background-color: #999999; /* 背景色 */
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    text-decoration: none;
}

前述した通り、カスタマイズは当サイトで配布しているテンプレートをサンプルにしていますので、他のテンプレートをご利用の場合は上記の CSS を参考に、最適な設定に変更してください。

３．折りたたみを開いた状態にしたい場合

デフォルトは全てのプラグインを折りたたんだ状態で表示するようにしています。これを最初から開いた状態で表示するには、１項のスクリプトの

folddata += 'FoldNavigation(\'' + fold + '\',\'off\',false)\;\n';

を

folddata += 'FoldNavigation(\'' + fold + '\',\'on\',false)\;\n';

に変更してください。

折りたたまれた状態は cookie に保持されますので、後で本項の設定を行っても cookie が有効になって変更できていないようにみえるかもしれません。その際はブラウザの cookie を一旦削除してから、再表示してみてください。

４．その他

1. プラグイン別に折りたたみ有無を設定することはできません
2. プラグイン別に折りたたみ状態を変更することはできません
3. 「livedoor NEWS」は折りたたみません

1と2については、IEで動作させる方法と併せて別エントリーする予定です。

５．IE で動作しない理由

このカスタマイズは、JavaScript で script タグを動的に生成します。この script タグ生成が　IE では正常に動作しません。具体的には、生成したスクリプトの

var script = document.createElement('script');

の行で「予期しないメソッドの呼び出し、またはプロパティ アクセスです」というエラーが発生します。

ちなみに 'script' の部分を別のタグ名にすると OK になります（それでは正常に動作しませんが）。

色々調べたところ、下記の記事に「別なDOMエレメントのinnerHTMLはOK」と書かれてましたが、残念ながら正常に動作しませんでした。こちらは innerHTML で設定した script 要素（の含まれる文字列）を alert で表示すると、空の文字列として表示されます。

• IE7のinnerHTMLに関する仕様変更
• IE、組込みのスクリプト要素を追加実行できない

Firefox/Opera はいずれの方法も正常に動作します。

2007.05.15
ソースコードを修正しました（機能差分はありません）。また「サイドメニューの折りたたみ for livedoorブログ（その2：IEで折りたためるようにする）」へのリンクを追加しました。

Movable Type のテンプレート編集画面を開くと、MT3.x の場合、下に示すスクリーンショット赤枠の「このテンプレートにリンクするファイル」、MT4,x の場合、「ファイルへのリンク」がありますが、このフィールドについての利用方法をご存知ない方が少なくないのではないでしょうか。

Movable Type 3.x

Movable Type 4.x

このフィールドはオーサリング・ツールを利用する方、あるいはテンプレートをカスタマイズする方にとってはかなり役に立つ機能を有しています。
ということで、本エントリーではこの「このテンプレートにリンクするファイル」および「ファイルへのリンク」の使い方を紹介します。説明に使用しているスクリーンショットは Movable Type 3.x のものですが、Movable Type 4.x の動作も同じです。

１．外部ファイルを Movable Type と同期させる

このフィールドの本来的な使い方は、Dreamweaver、GoLive等のオーサリング・ツールで作成したテンプレートを Movable Type の再構築あるいはテンプレート編集と同期させることです。オーサリング・ツールで作成したテンプレートは編集画面のテキストエリアにペーストするのではなく、このフィールドに外部ファイル名として指定するだけで自動的に読み込ませることができます。
以下、「このテンプレートにリンクするファイル」を設定されたファイルを、便宜上「リンクファイル」と記します。

例えば、作成したテンプレートを下記のようにリンクファイルとして指定します。指定する時にファイルの実体はなくても構いませんが、後で「リンクファイル」となるファイルは指定したパスにアップロードします。

この状態で、Movable Type の管理画面から（いきなり）再構築を実行すると、リンクファイルの内容をHTMLページやCSSに反映することができます。

またテンプレート編集画面を開くと、リンクファイルの内容がテキストエリアに反映された状態で表示されます。もちろんデータベースにも反映されます（編集画面を表示した時にデータベースに設定されるようです）。

上記をまとめると、次のような振る舞いになります。

*1：リンクファイルの実体があり、その内容が空（0 バイト）のファイル

つまり、データベースの内容とリンクファイルに差分がある場合は、リンクファイルの内容が空でない限り、リンクファイルが優先されます。

改めて図で示します。
リンクファイルがない場合のテンプレート編集や再構築時の動作は次の通りです。

上図のように、テンプレート編集や再構築を実行すると、Movable Type のテンプレート情報は基本的にデータベースから取得し、そのデータを元に HTML や CSS ファイルを出力します。

これと異なり、リンクファイルが存在する場合は、リンクファイルの情報を先に取得してページを生成し、同時にリンクファイルの内容をデータベースに反映する、という訳です（下図）。

リンクファイルは、インデックス/アーカイブ/システム/モジュール、すべてのテンプレートに設定することができます。またこのフィールドにはファイル名だけでなく、パスを設定することができます。Movable Type 配布元の Six Apart は、絶対パス（"/"から開始）による指定を推奨しています。

この仕組みを理解しておけば、テンプレート編集画面を利用せずに、テンプレートの内容を効率的にHTMLやCSSの内容に反映させることができます。
オーサリング・ツールとの具体的な連携方法例については下記のサイトが参考になるでしょう。

• Mathatelle：Movable Type のテンプレートを Dreamweaver で編集する
• 21世紀のアフィリエイト通販生活：DreamweaverでMovableTypeのテンプレートを編集！

２．テンプレートをバックアップする

本来の利用方法ではありませんが、このフィールドを利用してテンプレートをバックアップする方法がかなり有名です。他のサイトでこのフィールドをそのように利用する方法が多く紹介されてますし、私自身、当初はそういう使い方をするフィールドと思い込んでました。

設定方法は１項と同様、「このテンプレートにリンクするファイル」に任意のパスを設定するだけです。ファイル名はテンプレートと対応がとれるよう、分かりやすい名称にしておくと良いでしょう。まバックアップ用のパス（tmpl 等）を作っておき、そこに出力するようにしておくとサーバ上にファイルが煩雑にならずにすみます。

この設定をしておくことで、テンプレート編集画面上での修正内容がデータベース以外に、リンクファイル、つまり物理的なファイルをサーバ上に保存しておくことができます。
リンクファイルはテンプレート編集画面の「保存」または「保存および再構築」をクリックした時に更新されます。MTタグも変換されず、そのまま出力されます。

万が一、データベースが壊れて、Movable Type にアクセスできなくなってしまっても、テンプレートはファイルに残ってますので、Movable Type を改めてインストールした時に、リンクファイルの内容をテキストエリアにペーストするか、「このテンプレートにリンクするファイル」に保存されているリンクファイルのパスとして設定すれば、簡単に復活させることができます。

2009.05.02
Movable Type 4.x の説明を追加しました。

「小粋空間」とは別に、以前から運用しているサイト（ブログ）がひとつあります。そのサイトは独自ドメイン+DDNSで自宅サーバで運用しているのですが、PCを1日中稼動させないといけないため電気代がバカになりません。

それよりもうんざりなのが部屋の温度。夏はまだ遠いというのにもう暑くなってきています。これでエアコンを入れたりするのは地球環境上良い訳がなく、いい加減レンタルサーバに移転することにしました。

１．XREA について

今回選んだレンタルサーバは「XREA（XREA+）」です。「エクスリア（エクスリアプラス）」と読みます。XREA は無料サーバ（広告あり）。XREA+は有料で広告なしです。XREA から XREA+ への移行も可能です。

XREA+ の料金は200?400円/月（契約期間によって変動）、ディスク容量2GBで、現在当サイトで利用しているさくらのレンタルサーバ（スタンダード：月500円、1GB）と比較してもかなりお得です。また、PHP をモジュール版として動作させることができる数少ないレンタルサーバです。モジュール版についての詳細は下記の記事をご覧ください。

PHP における「モジュール版」と「CGI 版」の比較 + WordPress の適用例

２．XREA とバリュードメイン

さて、サーバをレンタルしようと登録ページに進み、下の方を見ると「VALUE-DOMAINでドメインを取得された方云々...」という文言が目に入りました。
実は、取得しているドメインは「バリュードメイン（VALUE DOMAIN）」 を利用してまして、XREA もバリュードメインも同じ「株式会社デジロック」が運営していることにその時気がつきました。

そういう訳で、VALUE DOMAIN を利用されている方であれば、その文言のリンクからバリュードメインのページにジャンプして、そこから登録することができます。

また現在、一般向けの無料レンタルサーバは募集していないようですが（下）、

申し訳ございません。 現在、一般向け無料サーバーの募集は行っておりません。 次期募集をお待ち下さい。

VALUE DOMAIN でドメインを取得していれば無料サーバーを利用することができます。

３．XREA で Movable Type インストールエラー

とりあえずお試しで、無料の XREA サーバを取得し、Movable Type 3.35-ja のファイルをアップロード。Wizard を利用したインストールでログイン名・パスワード設定画面までは順調に進んだのですが、そこから先に進もうとするとエラーに遭遇。

IE ではDNSエラー、Firefox では「included というプロトコルはどのプログラムにも関連づけられておらず、Firefox でこのアドレスを開く方法が分かりません。」という上のダイアログが表示されました。

４．対処方法

調べてみると、XREA の自動広告挿入が影響しているようで、CGI が正常に動作しないことが判明。http://? を included://? という URL に変換しているのが原因らしいです。
そういう訳でヒットした対処方法を挙げておきます。対処についてはレンタルサーバーの利用規約に反しないよう、ご自身の責任で行ってください。また全ての対処を試した訳ではありませんのであしからず。

４．１ ディレクトリ「x」に Movable Type をインストールする

これが XREA 特有の規定らしく、ディレクトリ「x」の下にあるデータは広告が挿入されません。

• XREA.COM：広告について

したがって、public_html の直下に手動で x というディレクトリを作成し、その配下に Movable Type をアップロードして実行させるといいようです。

• 黍若日記：広告がでる環境でMovable Typeをインストールする(included://の対策)
• 同：Movable Type 3.3のインストール

４．２ CGI の拡張子を .xcg にする

これも XREA 特有の規定です。CGI ファイルの拡張子を全て .xcg にすることで x ディレクトリに配置しなくても正常に動作するようになるようです。

• 瑠璃の森：続 Movable Type3.17日本語版

４．３ .htaccess に LayoutIgnoreURI を設定する

.htaceess を作成し、その中に下記の1行

LayoutIgnoreURI *.cgi

を記述して、サーバ（public_html 直下）にアップロードしておけば、CGI 実行で広告が表示されなくなるようです。

• サポートBBS - 無料レンタルスペース land.to：Movable Type 3.2の設置が上手くできません
• XREA&CORE SUPPORT BOARD：.htaccessに関する質問

４．４ CGI.pm を書き換える

extlib/CGI.pm を任意のエディタで開き、下記の赤色を削除し、青色を追加（3.35-ja では 1232行目辺り）。

# Maybe future compatibility.  Maybe not.
my $protocol = $ENV{SERVER_PROTOCOL} || 'HTTP/1.0';
my $protocol = $ENV{'SERVER_PROTOCOL'};
$protocol = 'HTTP/1.0' if (! $protocol || $protocol eq 'INCLUDED');

• くろねこのつぶやき：MovableTypeでリンクがincludedになる問題
• XREAでMTを！：included://対策

火がついた。

先日公開した「Updated Now プラグイン」を早速バージョンアップしました。バージョンアップ内容は下記の通りです。

追記：画像をオプション画面で選択できるようにしました。

• プラグインのオプション画面を追加
• バナーにリンクを設定している場合、トップページ以外のページでリンク先が最新記事にリンクしていない不具合を修正
• プラグインのオプション画面からバナー選択（v2.1）

オプション画面については、「Tips Community：ブログが更新されたことをバナーで知らせてくれるプラグインを変更」を読んでなるほどと思い、早速追加させて頂きました。ちなみに「オプション画面を組み込むのが面倒」だったのではなく、オプション画面の存在を知りませんでした（その程度の知識）。

それはさておき、初期バージョンご利用の方は2番目の不具合がありますので、お手数ですがバージョンアップをお願い致します。
バージョンアップしたプラグインをアップロード・有効化すると下記のリンクが表示されるのでクリック。

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

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

時間に余裕があればオプション画面からバナーを選択できるようにしたいと思います。

「BlogPeople 等のリンクリストによる表示の遅延を解消する（その2：Ajax編）」で「Safari で文字化けします」というご質問を頂き、不具合を修正致しました。

１．問題点

調べたところ、（今更ですが）Safari2.0 では UTF-8 でも Ajax の responseText で文字化けすることを知りました。

WEBプログラミング NOW!：Googleサジェスト--Safariで文字化け

XMLHTTPを使った簡単なプログラムでもSafariは日本語が文字化けします。正しくresponseTextを取得できないようです。本来UTF-8で返されているデータなのに、ISO-8859-1として取得しています。そのために文字化けが発生しています。

この問題は日本語が含まれていなければ顕在化しませんが、BlogPeople のリンクリストは当然日本語だらけなので、Safari で閲覧されている場合はリンクリストが文字化けして表示されます。
UTF-8で表示しているブログ等で、ブラウザの文字コードを「ISO-8859-1」にすれば同じ事象を体験できます。

２．対処

下記のサイトで対処方法が掲載されています。

Kawa.netブログ（川崎有亮）：Safari の responseText で UTF-8 コード文字化け回避

「BlogPeople 等のリンクリストによる表示の遅延を解消する（その2：Ajax編）」については、紹介されているコードを JavaScript に挿入することで文字化けを回避しましたので、本カスタマイズをご利用の方は、配布 JavaScript（bp.js）を差し替えてお使いになることをお勧めします。

当サイトで紹介している、responseText に日本語を含む Ajax カスタマイズについても別途修正したいと思います。また当サイト自体も Ajax を多用しているので JavaScript の実装を見直します。

３．参考・関連サイト

• JavaScript++かも日記：responseされる文字コードの調査
• ヘチマ_BLOG：Safari の XMLHttpRequest
• bricklife.weblog.*：Ajax で文字化けする条件を調査してみた
• escape()エンコード結果

FeedBurner パブリッシャーバズで紹介頂きました。下の画像リンクをクリックすると紹介ページにジャンプします。

FeedBurner パブリッシャーバズは、FeedBurner を利用されているパブリッシャーの声（＝バズ）を紹介するサイトです（バズとは「ざわめき声」を意味するそうです）。

パブリッシャーバズではすでに10サイト余りが紹介されています。そしてサイドバーに掲載されている連絡先にご意見やご感想を連絡することで、あなたのサイトがパブリッシャーバズに掲載してもらえるかもしれません。購読者を増やしたいと思われている方は是非チャレンジしてみてください。

パブリッシャーバズはRSSフィードも配信されています。

• パブリッシャーバズを購読する

当サイトのフィード購読もよろしくお願い致します（宣伝）。

• livedoor Reader で購読
• Bloglines で購読
• Google で購読
• はてな RSS で購読
• feedpath で購読

「フィード」がお分かりにならない方は下記の説明が参考になるでしょう。

• FeedBurner：フィード入門

１．機能

主な機能（Updated Today Plugin との違い）は次の通りです。

• 最新の記事投稿時刻をページ表示時刻と比較し、指定された時間内であればページ上（デフォルトは左上）にバナーを表示します
• 日付が変わってもバナーを表示します
• バナー表示期間を変更できます
• バナーに該当記事へのリンクを（多分）与えることができます
• 投稿時刻と現在時刻は秒まで比較・判定する高精度
• 更新時刻やトラックバック時刻等は取得・判定しません

２．利用方法

1. download のリンクをクリックしてアーカイブをダウンロードします。

   2007.05.02 v1.0
   2007.05.05 v2.0 オプション画面追加、バナーにリンクを設定している場合、トップページ以外のページでリンク先が最新記事にリンクしていない不具合を修正
   2007.05.05 v2.1 オプション画面に画像選択機能追加
   2007.05.07 v2.2 XHTML1.0 strict 対応、オプション初期画面で初期値が設定されていない不具合を修正
   2007.05.11 v2.3 プラグインパス取得方法変更

2. 解凍した中にある updatednow フォルダを wp-content/plugins/ にアップロードします。
3. バナーは３項の説明にしたがって設定してください。
4. プラグインを有効にします。
5. （バナーが表示されない場合）利用中のテーマの footer.php に下記の行があることを確認してください。

<?php wp_footer(); ?>

同梱の pngfix.js は下記で配布されているものです（updatedtoday と同様）。

The PNG problem in Windows Internet Explorer

３．オプション

Updated Now プラグインはいくつかのオプションを用意しています。
プラグインを有効化すると下記のリンクが表示されるのでクリックしてください。

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

各オプションの意味は次の通りです。お好みに応じて変更してください。

４．関連リンク

• usylog：利用中のWordPress Plugin一覧
• Tips Community：ブログが更新されたことをバナーで知らせてくれるプラグイン
• MovableType備忘録：MovableType版 Updated Today

ブログで配信する RSS/Atom フィード（index.xml や atom.xml）にスタイルシートを適用する方法です。
ブログを始めてちょっと経った頃、このテクニックについての記事を見たことはあったのですが、特にエントリーしていませんでした。今回ご質問を頂きましたので、このエントリーで紹介致します。

１．概要

RSSリーダーが普及した現在、RSS/Atom フィードのリンクをクリックして驚く人は少なくなったのかもしれませんが、ブログ（Movable Type）を始めた頃、ページ右下に表示されている「Syndicate this site」の index.rdf のリンクをクリックすると XML フォーマットの文書が表示され（あるいはダウンロードのダイアログが表示され）、「これは一体何だろう？」と不思議に思ったものです（下）。

このリンクは RSSリーダ／アグリゲータ等が認識するための（XMLフォーマットの） URL を指しているだけなので、そもそも人がクリックして読むものではないのですが、リンクがあるとクリックして読みたくなるのが人の常というものです。
で、もう少し読めるフォーマットになっていると親切かもしれないということで、本稿のようなカスタマイズを行ないます。読めることで「人が読むためのリンク」と勘違いされるのは困りますが、その辺りは言及しません。

フィード（というかXML）を読みやすくするための、スタイルシートを適用させる仕様（下）があり、これを利用することで RSS/Atomフィード等の XML 文書を （X）HTML と同じように CSS で整形することができます。厳密に言えば、この仕様が実装されているブラウザで閲覧することが前提です。

• Associating Style Sheets with XML documents
• スタイルシートをXML文書に結びつける

２．適用方法

XML 文書に xml-stylesheet 処理命令を追加します。これは（X）HTML における link rel="stylesheet" の挙動に従います。

フィード用テンプレートの XML 宣言

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

のすぐ下に、次のどちらか1行を追加してください。

RSS2.0 の場合

<?xml-stylesheet href="styles-rss2.css" type="text/css"?>

Atom1.0 の場合

<?xml-stylesheet href="styles-atom1.css" type="text/css"?>

CSSファイルの名称は何でも構いませんが、とりあえず上記の名称で話を進めます。また、CSS 以外にも XSL を扱うこともできます。その場合は type 属性を text/xsl にします。

そして、下記のいずれかのファイルをダウンロードし、フィードと同じディレクトリにアップロードします。

styles-rss2.css

styles-atom1,css

上記ファイルの内容を簡単に説明しておきますと、例えば RSS2.0 のフォーマットをかなりおおざっぱに書くと、

<rss version="2.0">
   <channel>
      <item>
　　　　　：
      </item>
      <item>
　　　　　：
      </item>
   </channel>
</rss>

となっており、これに適用させるスタイルシートの内容は

rss {
　：
}
channel {
　：
}
item {
　：
}

となっています。Atom は要素名が異なりますが大体同じような構成になっています。

HTML や CSS に慣れていればそれほど難しいものではありませんので配布 CSS をカスタマイズしてみてください。

３．適用例

CSS は慌てて作ったのでグダグダですが、RSS に適用すれば多分下のように表示されるようになります。

RSS2.0（適用前）

RSS2.0（適用後）

Atom1.0（適用前）

Atom1.0（適用後）

閲覧および、スタイルシートのカスタマイズの確認には Opera9 を推奨します。IE6/7 は完全に適用されず（IE6はキャッシュをクリアしないとCSS変更が適用されない）、Firefox2 はブラウザ自体の機能で整形してしまうようです（間違ってたらご指摘ください）。

４．複数のスタイルシートを扱う場合

仕様に記載されている通り、複数の xml-stylesheet 処理命令は、HTML4.0 の link rel="stylesheet" と全く同じです。

<link rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css">
<link rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css">
<link rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css">
<link rel="stylesheet" href="common.css" type="text/css">

は下記と等価です。

<?xml-stylesheet alternate="yes" title="compact" href="small-base.css" type="text/css"?>
<?xml-stylesheet alternate="yes" title="compact" href="small-extras.css" type="text/css"?>
<?xml-stylesheet alternate="yes" title="big print" href="bigprint.css" type="text/css"?>
<?xml-stylesheet href="common.css" type="text/css"?>

５．参考サイト

• Going My Way：index.rdfにスタイルシートを適用する。
• ADP：RSSがわからない
• ADP：RSS用のスタイルシート

2007.05.30
２項の「xml-stylesheet 要素」は誤記であったため、「xml-stylesheet 処理命令」に変更しました（４項の記述はそのまま）。