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

執筆もひと段落して、GW にも入って長期休暇に突入したので、ようやく自分のブログを修正する気力が湧いてきました。

ということで、とりあえず以前からやりたかった、フォントサイズの修正を行いました。ブログに表示されている多くの部分のフォントサイズを大きくしています。

１．ヘッダー部分

グローバルナビゲーション全体の高さを増やし、フォントサイズを大きくしました。このページはブログ記事ページですが、前後リンクのブログ記事へのリンクやパンくずリストのフォントサイズを大きくしました。左側のカレンダーのフォントサイズも大きくしました。

変更前

変更後

２．タイトル部分

タイトルのフォントサイズを大きくしました。またブログ記事情報（投稿日・カテゴリ・タグ）のフォントサイズも大きくしました。

変更前

変更後

３．エントリー本文

全体のフォントサイズを大きくしました。リストを表示する部分も同様です。

変更前

変更後

４．サイドバー

サイドバータイトルの高さを増やし、フォントサイズを大きくしました。メニューリストも同様です。

変更前

変更後

５．コメント投稿フォーム

フォーム全体のフォントサイズを大きくしました。

変更前

変更後

６．コメント確認・投稿ボタン

フォームボタンも大きくしました。画面は Firefox で表示したときのものです。

変更前

変更後

ということで、やや今風のサイトになった気がします（自己満足）。あと、タイトルの文字が一番小さくなった気がします。

Web creators (ウェブクリエイターズ) 2009年 06月号に Movable Type の記事が掲載されています。

Web creators (ウェブクリエイターズ) 2009年 06月号 [雑誌] インプレスコミュニケーションズ 2009-04-27 売り上げランキング : Amazonで詳しく見る by G-Tools

短期集中連載の「Movable Type 4.x デザインカスタマイズを極める（前編）」です。

シックス・アパート（株）が開発、提供している「Movable Type 4.x」を使って、「ブログとは思えない」レイアウトとデザインのWebサイトを制作するテクニックを解説!!　前編（vol.90）・後編（vol.91）に分け、2カ月連続で紹介します。記事の解説で使用したサンプルデータをダウンロードしてテクニックを理解し、Movable Type 4のデザインカスタマイズに挑戦しよう!!

ということで、次の3つのサンプルがダウンロードできるようになっており、Movable Type のテンプレートに貼り付けて再構築することでデザインを実際に確認できるようになっています。

• WebページをベースにしてSEOと使いやすさを実現する
• カテゴリアーカイブでBOX形式のブログ記事表示を行う
• 商品カテゴリを意識してビジュアルを強調する

サンプルの画像をお見せできないのが残念ですが、素敵なデザインのサイトが紹介されています。6ページの短い記事ですが、Movable Type を使ってデザインの勉強をしたい方にお勧めです。

キャッチアップが遅れましたが、Movable Type 4.25 で MTEntries タグに category モディファイアを利用している状態で、カテゴリー名に次の文字が含まれる場合、

• 半角丸カッコ（の閉じカッコ）：")"
• 半角アンパサンド："&"

再構築時に次のようなエラーが発生します。

上記の事象については、すでに下記の記事で公開されています。

Movable Type 備忘録 - Movable Type 4.25 リリース

ここでは、半角丸カッコや半角アンパサンドをカテゴリー名に利用している場合の暫定対処案を示します。

１．半角丸カッコを利用している場合

とりあえず、カテゴリ名に含まれる全角丸カッコに変更します。例えば、「(X)HTML」というカテゴリー名は、「（X）HTML」に変更します。

変更前

変更後

次にテンプレートを変更します。category モディファイアにカテゴリー名を直接記述している場合は、単にその部分を書き換えます。

変更前

<mt:Entries category="(X)HTML">
...中略...
</mt:Entries>

変更後

<mt:Entries category="（X）HTML">
...中略...
</mt:Entries>

カテゴリ名を出力する時に、全角の丸カッコを半角の丸カッコに変更して出力したい場合は、次のように MTSetVar タグと MTCategory タグに regex_replace モディファイアを利用すると良いでしょう。

<mt:setvar name="foo" value="/(.*)（(.*)）(.*)/" />
<mt:categoryLabel regex_replace="$foo","$1($2)$3" />

カテゴリアーカイブウィジェットに適用する場合は、次の青色部分を追加します。

<mt:IfArchiveTypeEnabled archive_type="Category">
<div class="widget-archive widget-archive-category widget">
    <h3 class="widget-header>カテゴリ</h3>
    <div class="widget-content">
    <mt:TopLevelCategories>
        <mt:SubCatIsFirst>
        <ul>
        </mt:SubCatIsFirst>
        <mt:If tag="CategoryCount">
            <li><a href="<$mt:CategoryArchiveLink$>"<mt:If tag="CategoryDescription"> title="<$mt:CategoryDescription remove_html="1" encode_html="1"$>"</mt:If>><mt:setvar name="foo" value="/(.*)（(.*)）(.*)/" /><mt:categoryLabel regex_replace="$foo","$1($2)$3" /> (<$mt:CategoryCount$>)</a>
        <mt:Else>
            <li><$mt:CategoryLabel$>
        </mt:If>
        <$mt:SubCatsRecurse$>
            </li>
        <mt:SubCatIsLast>
        </ul>
        </mt:SubCatIsLast>
    </mt:TopLevelCategories>
    </div>
</div>
</mt:IfArchiveTypeEnabled>

適用前

適用後

２．半角アンパサンドを利用している場合

とりあえず、カテゴリ名に含まれる全角アンパサンドに変更します。例えば、「foo & bar」というカテゴリー名は、「foo ＆ bar」に変更します。

変更前

変更後

次にテンプレートを変更します。category モディファイアにカテゴリー名を直接記述している場合は、単にその部分を書き換えます。

変更前

<mt:Entries category="foo & bar">
...中略...
</mt:Entries>

変更後

<mt:Entries category="foo ＆ bar">
...中略...
</mt:Entries>

カテゴリ名を出力する時に、全角のアンパサンドを半角のアンパサンドに変更して出力したい場合は、先ほどと同様、MTSetVar タグと MTCategory タグに regex_replace モディファイアを利用します。

<mt:setvar name="foo" value="/(.*)＆(.*)/" />
<mt:CategoryLabel regex_replace="$foo","$1&amp;$2" />

カテゴリアーカイブウィジェットに適用する場合は、次の青色部分を追加します。

<mt:IfArchiveTypeEnabled archive_type="Category">
<div class="widget-archive widget-archive-category widget">
    <h3 class="widget-header>カテゴリ</h3>
    <div class="widget-content">
    <mt:TopLevelCategories>
        <mt:SubCatIsFirst>
        <ul>
        </mt:SubCatIsFirst>
        <mt:If tag="CategoryCount">
            <li><a href="<$mt:CategoryArchiveLink$>"<mt:If tag="CategoryDescription"> title="<$mt:CategoryDescription remove_html="1" encode_html="1"$>"</mt:If>><mt:setvar name="foo" value="/(.*)＆(.*)/" /><mt:CategoryLabel regex_replace="$foo","$1&amp;$2" /> (<$mt:CategoryCount$>)</a>
        <mt:Else>
            <li><$mt:CategoryLabel$>
        </mt:If>
        <$mt:SubCatsRecurse$>
            </li>
        <mt:SubCatIsLast>
        </ul>
        </mt:SubCatIsLast>
    </mt:TopLevelCategories>
    </div>
</div>
</mt:IfArchiveTypeEnabled>

適用前

適用後

なお、半角のアンパサンドは、出力時に実体参照しておかないと valid な(X)HTML文書にならないので注意しましょう。

当サイトで公開しているサイドメニューの折りたたみを、Movable Type 4.2 のデフォルトテンプレートで利用する場合の設定方法を記します。

サンプルも用意しましたのでお試しください（最近のブログ記事／最近のコメント／タグクラウド／カテゴリ／月別アーカイブが折りたためます）。

デフォルトテンプレートの折りたたみサンプル

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

スクリプトのページから、折りたたみ用スクリプト menufolder.js のリンクを右クリックして「名前をつけてリンク先を保存」等でダウンロードして、同じ名前でローカルPCに保存してください。

ダウンロード後、menufolder.js をブログのディレクトリ（ブログのメインページとなる index.html があるディレクトリ）にアップロードしてください。

２．テンプレートの修正

ブログ管理画面より「デザイン」→「テンプレート」をクリックし、「HTMLヘッダー」テンプレートモジュールを選択して、下記の青色部分を追加します。

<meta http-equiv="Content-Type" content="text/html; charset=<$mt:PublishCharset$>" />
<meta name="generator" content="<$mt:ProductName version="1"$>" />
<link rel="stylesheet" href="<$mt:Link template="styles"$>" type="text/css" />
<link rel="start" href="<$mt:BlogURL$>" title="Home" />
<link rel="alternate" type="application/atom+xml" title="Recent Entries" href="<$mt:Link template="feed_recent"$>" />
<script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>
<script type="text/javascript" src="<$mt:BlogURL$>menufolder.js"></script>
<$mt:CCLicenseRDF$>

３．ウィジェットの修正

ブログ管理画面より「デザイン」→「ウィジェット」をクリックし、折りたたみたいウィジェットを選択します。「最近のブログ記事」の場合、次の青色部分を追加します。

<mt:If tag="BlogEntryCount">
    <mt:Entries lastn="10">
        <mt:EntriesHeader>
<div class="widget-recent-entries widget-archives widget">
    <h3 class="widget-header fold-header" id="entryname">最近のブログ記事</h3>
    <div class="widget-content" id="entrylist">
        <ul>
        </mt:EntriesHeader>
            <li><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li>
        <mt:EntriesFooter>
        </ul>
    </div>
</div>
        </mt:EntriesFooter>
    </mt:Entries>
<script type="text/javascript">
<!--
FoldNavigation('entry','off',false);
//-->
</script>
</mt:If>

赤色部分は追加したときに、ウィジェットによって書き換える部分です。FoldNavigation の第2パラメータの off は、ページを表示したときに、リストを閉じた状態で表示します。リストを開いた状態で表示したい場合は、on を設定してください。

id 属性値とFoldNavigation の第1パラメータは、ウィジェットによって変更します。「最近のコメント」の場合は次のようになります。

<mt:If tag="BlogCommentCount">
    <mt:Comments lastn="10" sort_order="descend">
        <mt:CommentsHeader>
<div class="widget-recent-comments widget">
    <h3 class="widget-header fold-header" id="commentname">最近のコメント</h3>
    <div class="widget-content" id="commentlist">
        <ul>
        </mt:CommentsHeader>
            <li><strong><$mt:CommentAuthor$>:</strong> <$mt:CommentBody remove_html="1" words="10"$> <a href="<$mt:CommentLink$>" title="<mt:CommentEntry><$mt:EntryTitle$></mt:CommentEntry>へのコメント">続きを読む</a></li>
        <mt:CommentsFooter>
        </ul>
    </div>
</div>
        </mt:CommentsFooter>
    </mt:Comments>
<script type="text/javascript">
<!--
FoldNavigation('comment','off',false);
//-->
</script>
</mt:If>

id 属性値は、ページ内に同じ値を設定してはいけない（例えば、id="hoge" という記述がページ内に2ヶ所以上あってはいけない）ので、設定するパーツによって id 属性値を変更してください。

また、「アーカイブ（月別アーカイブ）」ウィジェットを折りたたむ場合、タイトル部分（下記）から、

<h3 class="widget-header"><$mt:ArchiveTypeLabel$> <a href="<$mt:Link template="archive_index"$>">アーカイブ</a></h3>

リンクを削除して、class 属性と id 属性を追加してください（下記）。

<h3 class="widget-header fold-header" id="monthlyname"><$mt:ArchiveTypeLabel$> アーカイブ</h3>

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

ブログ管理画面より「デザイン」→「テンプレート」をクリックし、「スタイルシート」インデックステンプレートを選択して、下記を最後に追加してください。

.fold-header a {
    width: 100%;
}
.fold-header a:link,
.fold-header a:visited {
    display: block;
    padding-top: 2px;
    padding-bottom: 2px;
    text-decoration: none;
}
.fold-header a:hover {
    color:#fff;
    background: #AB0404;
    text-decoration: none!important;
}

配色は適宜修正してください。

これですべてを再構築すれば、サンプルのように折りたためるようになります。

(X)HTML の disabled 属性と readonly 属性の違いについて、どちらの属性もユーザーが値を変更できないのは同じですが、振る舞いが異なります。

<input name="a" type="text" value="hoge" disabled="disabled" />

<input name="b" type="text" value="hoge" readonly="readonly" />

最近、2つの属性の違いが気になって調べたので、以下、HTML 4.01仕様書（和訳）からの引用抜粋と、それぞれの違いを表にまとめました。文中の「選択不能指定」が disabled、「読み出し専用指定」がreadonly です。原文へのリンクも掲載しています。

17.12 選択不能指定と読み出し専用指定からの引用[原文]

ユーザによる入力が望ましくなかったり不適切だったりする場合、コントロールを選択不能にすることや読み出し専用にしておくことが重要である。例えば、ユーザが必要なデータを入力し終えるまでは提出ボタンを押せないようにしたいといったことがあるだろう。同様に、ユーザに読ませたい文章で、かつ他のフォームデータと共に返信されることを望むようなものもあろう。以下の各項では、このような選択不能指定と読み出し専用指定について説明する。

17.12.1 選択不能指定からの引用抜粋[原文]

フォームのコントロールに設定されていた場合、この論理型属性は当該コントロールについてユーザの入力を受け付けないようにする。このdisabled属性が設定されると、その要素には次のような効果がある。

• フォーカスの受け手とならない。
• タブ移動で飛び越される。
• 満足なコントロールとならない。

disabled属性をサポートする要素は、BUTTON、 INPUT、OPTGROUP、OPTION、SELECT、 and TEXTAREAである。disabled属性は継承されるが、個々の要素における宣言は継承値を上書きする。 選択不能の要素がどのようにレンダリングされるかは、ユーザエージェントに依存する。例えば、選択不能のメニュー項目やボタンラベルを「ぼかす」ユーザエージェントもあろう。

次の例では、INPUT要素が選択不能とされている。従って、ユーザの入力を受け付けることもなく、またこの値がフォームデータと共に提出されることもない。

<INPUT disabled name="fred" value="stone">

注意。各要素の disabled属性の値を動的に変更する唯一の方法は、スクリプトによるものである。

17.12.2 読み出し専用指定からの引用抜粋[原文]

設定されていた場合、この論理型属性は当該コントロールの変更を禁止する。 readonly属性は、ユーザによるコントロールの変更を許すかどうかを指定する。このreadonly属性が設定されると、当該コントロールには次の効果がある。

• フォーカスを受け取ることはできるが、ユーザが変更することはできない。
• タブ移動順の中に含まれる。
• 満足なコントロールとなり得る。

readonly属性をサポートする要素は、INPUTと TEXTAREAである。読み出し専用要素がどのようにレンダリングされるかは、ユーザエージェントに依存する。

注意。各要素の readonly属性の値を動的に変更する唯一の方法は、スクリプトによるものである。

まとめ

上記の仕様を表にまとめると次のようになります。

「満足なコントロール」とは、「17.13.2 満足なコントロール[原文]」に記載があります。誤解をおそれずに言えば、ここではフォームデータとして送信する要件が定義されています。

つまり、disabled 指定の場合は、「満足なコントロールとならない」ので、フォームデータとして送信されないことを意味します。disabled 指定したデータをフォームデータとして送信するには、hidden 指定した同じデータを用意するか、JavaScriptでdisabled を解除する等の方法が必要です。

参考：ARTS NET - フォーム送信前にJavaScriptでdisabled解除

ありました

Movable Type 4.2 向けのテンプレートデザインの書籍が5月に発売されます。

即戦プロ技 Movable Typeデザインテンプレートコレクション エクストラコミュニケーションズ 毎日コミュニケーションズ 2009-05-13 売り上げランキング : Amazonで詳しく見る by G-Tools

添付のCD-ROM から、Movable Type 4.2 に対応したデザインテンプレートを、「会社」「飲食」「医療・教育」「美容・スポーツ」「その他」の5つの分野別に選ぶことができます。以下は「MYCOM BOOKS - 即戦プロ技 Movable Typeデザインテンプレートコレクション」のページから、リンクの引用です。

• 会社
• 飲食
• 医療・教育
• 美容・スポーツ
• その他

テンプレートは商用利用も可能なようです。

MYCOM BOOKS - 即戦プロ技 Movable Typeデザインテンプレートコレクション

本CD-ROMに含まれるテンプレートデータは、本書購入者に限り、改変して個人利用または商用利用を問わず使用することが可能です。使用に際しては、使用許諾申請やクレジット表示は必要ありません。

簡単なカスタマイズ方法も掲載されているので、Movable Type を使ったサイト構築を簡単に行いたい方に向いているかも知れません。

chapter 1 テンプレートの使い方

Movable Type のセットアップ

データベースのセットアップ

Movable Typeのセットアップ

テンプレートの準備

CD-ROM内のテンプレートをアップロードする手順

アップロードしたテンプレートを使って新規サイトを作る手順

アップロードしたテンプレートを既存のブログに適用する手順

テンプレートの使用

メイン画像やメッセージなどを加えていく手順

メインメニューに項目を加えていく手順

ブログ部分に情報を追加する手順

カスタマイズの基本

デザインをカスタマイズするには

デザインをカスタマイズする手順

掲載内容や構造をカスタマイズする手順

chapter 2 分野別デザインテンプレート

会社

会社

工業

輸送

建築

リフォーム

飲食

カフェ

レストラン

旅館

医療・教育

医療

スクール

その他

プロフェッショナル

ちなみに、Movable Type 4.2 の書籍はすでに 15 冊ほど発売されています。

リンク管理サービス「BlogRolling」がリニューアルしました。

リンク管理サービスといえば、国内では「BlogPeople」が有名ですが、「BlogRolling」は、その草分け的存在といえるでしょう。これらのサービスを利用してリンクリストを作成すれば、更新順にリストを並び替えてくれたり、新着表示をしてくれます。

当サイトでも、BlogRolling を使って、テンプレート利用ユーザーの方を登録させて頂いてました。現在は多忙のため更新していませんが、そのままリンクのページに掲載していたところ、リスト全体が文字化けしている、という報告を頂きました。

今年初めに BlogRolling にログインしようとしたら、リニューアル中でしばらくログインできなかったのですが、先日ようやくリニューアルが完了したようです。

数年前からブログをやっている方には過去のサービスかもしれませんが、最近ブログを始めた方には意外に新鮮かもしれないという勝手な解釈で、一応紹介しておきます。

１．BlogRolling のアカウント登録

BlogRolling の左サイドバーにある、Create account をクリック。

メールアドレス・パスワード・セキュリティコード（表示されている画像の中の歪んだ文字）をそれぞれ入力して、「Register me」をクリック。

登録が成功したらダイアログの「OK」をクリック。

登録したメールアドレスに確認用のメールが送信されるので、メールに掲載されているURLをクリック。これで登録されます。

２．BlogRolling の設定

前の作業で表示された画面からログインします。

最初の画面で、まず、リンクリストを作成する前準備として、ブログロール名とリンクリストを使用するURLを設定し、「Submit」をクリックします。「Advanced Options」をクリックすれば、ブログロールの詳細な表示方法を設定できます。

次に、作成したブログロールに、リンクを追加します。「Add/Edit Links」をクリックします。

「Add」をクリックします。

追加したいサイトのサイト名やURLなどを設定して、「Save」をクリックします。

これで追加されました。リンクは好きなだけ追加できます。

３．BlogRolling をブログに表示

左メニューの「My BlogRolls」をクリックした後、「Get BlogRolling Code」をクリック。

「JavaScript」の「Click to select the code」をクリックし、すぐ下に表示されているscript 要素を選択状態にして、コピーします。

あとは、script 要素を、ブログのテンプレートなどの、リンクリストを表示したい位置に貼り付ければ完了です。下は、script 要素だけを index.html として作成した場合の表示です。さきほど登録したリンクが表示されます。

以上です。ブログのテンプレートなどにリンクを直接書いている方は是非お試しください。

Movable Type で周期的にバックグラウンド再構築を実行できるようにする「Bob the Rebuilder プラグイン」を紹介します。

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

配布サイト（下記）にある「download」のアイコンをクリックして、プラグインアーカイブをダウンロードします。

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

プラグインアーカイブを展開して、Bob フォルダを plugins ディレクトリにアップロード。

管理画面にアクセスすると、データベースのアップグレードが開始するので、「アップグレード開始」をクリック。

サインインするとアップグレードが開始します。アップグレードが完了したら、「Movable Typeに戻る」をクリック。

システム管理画面の「ツール」→「プラグイン」で「Bob the Rebuilder ～」が表示されればインストール完了です。

３．プラグインの設定

システム管理画面の「一覧」→「Rebuilder」をクリック。

「Create rebuilder job」をクリック。

表示された画面で、

• 再構築対象のブログ
• 再構築単位（Rebuild Type）
• 周期（Frequency）
• 有効/無効（チェックした場合のみ再構築を実施）

の各項目を設定します。再構築単位の「Entire Blog」はブログ全て、「All Indides」はインデックス全体、「All Archives」はアーカイブ全体を再構築します（多分）。設定が完了したら「変更を保存」をクリックします。

保存すると、画面右側に「Manage Rebuilder Job」のリンクが表示されます。

このリンクをクリックすると、設定したジョブの一覧が表示されます。「Rebuild Object」に表示されたリンクをクリックすれば設定を変更することができます。ジョブは複数設定することができます。

４．スケジュールタスクの設定

このプラグイン動作を有効にするにはスケジュールタスクの設定が必要です。

５．その他の方法

周期的に再構築を行なうには、mt-rebuild があります。これについては「MovableType逆引きデザイン事典[4.2/4.1対応]」の386ページに詳しい解説を行なっているので、興味のある方はご覧ください。

Movable Type逆引きデザイン事典[4.2/4.1対応] 荒木 勇次郎 翔泳社 2009-04-21 売り上げランキング : 2457 Amazonで詳しく見る by G-Tools

「MovableType逆引きデザイン事典[4.2/4.1対応]」が昨日か今日あたり、発売になっています。

Movable Type逆引きデザイン事典[4.2/4.1対応] 荒木 勇次郎 翔泳社 2009-04-21 売り上げランキング : 2457 Amazonで詳しく見る by G-Tools

本書は、Movable Type の概要、インストール、管理画面の基本的な操作、基本的なテンプレートタグの解説と使用例、そしてカスタマイズからプラグインまで、400ページというボリュームで、幅広く扱った内容に仕上がっています。フルカラーで、手順の解説には画面も多く使用しているので、読みやすいと思います。

私の担当のカスタマイズは、MTIf などの制御系テンプレートタグを多用しているので、まずカスタマイズの前置きとして、18章に制御系テンプレートタグの解説を行なってます（16ページ）。カスタマイズで利用している制御系テンプレートタグの意味が分からない場合は、18章をリファレンスにして頂ければと思います。

19章から26章の約110ページ分がカスタマイズです。オーソドックスなカスタマイズに加え、これまでの拙著のカスタマイズとできるだけ重複しないよう、このブログで公開していない新しいものを多く加えました。また、Movable Type 4.2 でバンドルされた「コミュニティ」、Movable Type 4.25 でバンドルされた「モーション」「アクションストリーム」の解説やカスタマイズも掲載しています。

なお、執筆中に他のブログで同じ（または類似した）内容のカスタマイズが公開されているものもありますが、パクリではありませんので、予めご了承ください。

プラグインは、インストールの解説から、拡張テンプレートタグ、管理画面の拡張など、実用的と思われるものを選んで掲載しています。スケジュールタスクを利用したツールの紹介も行なっています。

プラグインの掲載にあたっては、プラグイン開発者および制作会社にご協力頂きました。ありがとうｊございました。なおそれ以外に、カスタマイズの関連リンクとして、勝手ながらいくつかのURLを掲載させて頂いてます。こちらにつきましては大変申し訳ありませんが、この場をお借りしてご報告に代えさせてください。

11章～27章の解説については、サンプルテンプレートセット（コミュニティ機能対応）を使って、また19章～28章はサンプルデータをダウンロードできるようにしているので、実際に表示と動作を確認することができます（さきほど確認したところ、まだダウンロードサイトに用意できていないようなので、少々お時間頂く可能性があります）2009.4.22 用意されました。

巻末にはテンプレートタグリファレンスが計23ページ、4.25 までのテンプレートタグを掲載しています。

ということで、目次を掲載しておきます。

第1部 ブログを準備する

第1章 基本概念

001 Movable Typeとブログソフトについて知る

002 Movable Typeのしくみについて知る

003 Movable TypeをWordPressの違いを知る

004 Movable Type ProとMovable Typeの違いを知る

005 Movable Type4の新機能について知る

第2章 インストール

006 必要なサーバ構成を知る

007 Movable Typeを入手する

008 新規インストールする

009 ブログをバックアップする

010 旧バージョンからアップグレードする

011 他のブログから移行する

012 他のブログへ移行する

第3章 システム設定

013 新しいブログを作成する

014 ブログを複製する

015 システムメールアドレスを設定する

016 システム全体でコメント・トラックバックを受け付けないようにする

017 システム全体で更新通知を無効にする

018 システム全体でトラックバック送信の範囲を指定する

019 システムログを確認する

第4章 ユーザー

020 新規ユーザーを追加する

021 コメントの投稿者がブログのユーザーに登録できるようにする

022 新規ユーザーのデフォルトの設定を変更する

023 ユーザーを有効／無効にする

024 ユーザーを削除する

025 ロールと権限について知る

026 新しいロールを作成する

027 ユーザに権限を付与する

028 ユーザーのプロフィール画像を選択する

第5章 ブログの設定

029 ダッシュボードにウィジェットを追加する

030 ブログの名前と説明文を設定する

031 ブログのタイムゾーンを設定する

032 クリエイティブ・コモンズを設定する

033 ブログを公開するURLを設定する

034 アーカイブをブログと違うURLで公開する

035 アーカイブの拡張子を設定する

036 パーマリンク時に優先されるアーカイブのタイプを設定する

037 テンプレートモジュールをキャッシュする

038 サーバサイドインクルードを使用する

039 トップページなどで表示するブログ記事数と表示順を設定する

040 概要の文字数を設定する

041 日付の形式を設定する

042 ブログ記事などにつけられるファイル名の文字数を設定する

043 新しく作成するブログ記事の初期値を設定する

044 Wordで作成した文章を正しくコピー＆ペーストできるように設定する

045 ブログ記事作成画面の初期表示を設定する

046 コメント／トラックバックを受け付けないようにする

047 コメントを承認せずに公開する条件を設定する

048 コメントに使用できるHTMLを設定する

049 コメントとトラックバックに含まれるURLにnofollowを設定する

050 コメント／トラックバックがあったらメールで通知する

051 コメントの表示順を設定する

052 コメントに含まれるURLを自動的にリンクする

053 コメントのテキストフォーマットを指定する

054 コメント時に画像認証を必要にする

055 コメントに確認ページを表示する

056 承認したトラックバックだけ表示する

057 トラックバックの自動送信を有効にする

058 誰でも自由にユーザ登録できるようにする

059 コメントに認証が必要かどうか設定する

060 スパムコメントを自動的に削除する

061 スパムコメントの判断基準を設定する

062 ブログの更新をpingで通知する

063 ブログの更新をSixApartのサイトに掲載する

064 ユーザー登録しなくても投票できるようにする

065 ユーザのファイルアップロード先を設定する

066 カスタムフィールドを設定する

067 ブログのデザイン（スタイル）を設定する

068 テンプレートセットを初期化する

069 新しいスタイルを入手する

070 ブログを2段組／3段組に設定する

071 サイドバー（ウィジェット）を設定する

第2部 ブログを書く

第6章 ブログ記事、ウェブページ

072 ブログ記事を投稿する

073 ブログ記事を公開する日時を指定する

074 ブログ記事にアップロードした画像を掲載する

075 ブログ記事を任意のURLにする

076 クイックポストを利用して記事を投稿する

077 公開したブログ記事をまとめて非公開にする

078 ブログ記事にタグをまとめて追加する

079 ウェブページを作成する

第7章 アイテム

080 ファイルをアップロードする

081 アップロードしたアイテムのURLを確認する

082 アイテムにまとめてタグを追加する

083 アイテムの利用状況を確認する

第8章 カテゴリ、フォルダ、タグ

084 カテゴリを作成する

085 カテゴリを任意のURLにする

086 カテゴリでトラックバックを受け付ける

087 フォルダを追加する

088 フォルダを任意のURLにする

089 同じタグがつけられたブログ記事、ウェブページ、アイテムの一覧を表示する

090 タグ名を変更する

第9章 コメント、トラックバック

091 保留中のコメントを公開する

092 保留中のトラックバックを公開する

093 コメントを編集する

094 コメントをまとめてスパムにする

095 トラックバックをまとめてスパムにする

096 コメント投稿者を承認／承認を解除する

097 コメント投稿者を禁止／禁止を解除する

098 管理画面からコメントに返信する

第3部 ブログをデザインする

第10章 スタイルとテンプレート

099 スタイルとテンプレートの基本概念を知る

100 ウィジェットの役割を知る

101 テンプレートのカスタマイズ方法を知る

102 CSSの基本を知る

103 MTタグの基本を知る

104 ブログのパブリッシング方法を設定する

105 「メインページ」を編集する

106 「ウェブページ」を編集する

107 「ブログ記事」を編集する

108 「ブログ記事リスト」を編集する

109 「ウェブページの詳細」を編集する

110 「コメント」を編集する

111 「コンテンツのナビゲーション」を編集する

112 「サイドバー」を編集する

113 「トラックバック」を編集する

114 「ブログ記事の概要」を編集する

115 「ブログ記事の詳細」を編集する

116 「フッター」を編集する

117 「ヘッダー」を編集する

118 「タグ」を編集する

119 「コメント詳細」を編集する

120 「コメント入力フォーム」を編集する

121 「カテゴリ」を編集する

122 「ブログ記事のメタデータ」を編集する

第11章 ブログ・全体

123 ブログのタイトルや説明文を表示する

124 ブログの記事数やウェブページ数、コメント数を表示する

125 クリエイティブコモンズを表示する

126 カスタムフィールドの内容を表示する

第12章 ブログ記事、ウェブページ

127 記事のタイトルを表示する

128 記事の本文を表示する

129 記事の日付を表示する

130 記事の投稿者名を表示する

131 記事の概要を表示する

132 記事の詳細画面へのパーマリンクを表示する

133 記事の続き以下の内容を表示する

134 ひとつ前の記事へのリンクを表示する

135 ひとつ後の記事へのリンクを表示する

136 記事の一覧を表示する

第13章 ユーザー

137 ユーザーが公開した記事数を表示する

138 ユーザーのプロフィール画像を表示する

139 ひとつ前のユーザーアーカイブへのリンクを表示する

140 ひとつ後のユーザーアーカイブへのリンクを表示する

141 ユーザーの一覧を表示する

142 ユーザーのコメント一覧を表示する

143 ユーザー名を表示する

第14章 アイテム

144 アイテムの一覧を表示する

145 アイテムの概要を表示する

146 アイテムの日付を表示する

147 アイテムの投稿者名を表示する

148 アイテムのサムネールを表示する

149 全アイテム数を表示する

第15章 アーカイブ

150 アーカイブを表示する

151 アーカイブページのタイトルを表示する

152 アーカイブごとの記事数を表示する

153 次のアーカイブページへのリンクを表示する

154 前のアーカイブページへのリンクを表示する

第16章 カテゴリ、フォルダ、タグ

155 記事のカテゴリを表示する

156 カテゴリの一覧を表示する

157 カテゴリの説明を表示する

158 カテゴリ内の全ブログ記事数を表示する

159 ページのフォルダを表示する

160 フォルダの説明を表示する

161 フォルダ内にあるウェブページ数を表示する

162 記事につけられたタグを表示する

163 タグの一覧（タグクラウド）を表示する

第17章 コメント、トラックバック

164 コメントの日付を表示する

165 コメントの投稿者名を表示する

166 コメントの本文を表示する

167 コメントの一覧を表示する

168 記事のトラックバックURLを表示する

169 記事に対するコメント、トラックバックの合計数を表示する

170 トラックバックの本文を表示する

171 トラックバックもとのブログ名を表示する

172 トラックバックの日付を表示する

173 トラックバックのタイトルを表示する

第4部 カスタマイズ

第18章 変数と制御系タグ

175 変数

176 制御系タグ

177 テンプレートのインクルード

第19章 ブログ全体

178 著作権表示を自動的に更新する

179 グローバルナビゲーションをドロップダウンで表示する

180 パンくずリストを表示する

181 ソーシャルブックマークアイコンを表示する

182 はてなブックマークを表示する

183 Googleサイトマップを作る

第20章 ブログ記事、ウェブページ

184 ブログ記事一覧の背景色を交互に変更する

185 トップページに新着ブログ記事1件だけ全文表示し、残りをタイトルのみ表示する

186 ブログ記事の間にバナーを挿入する

187 最初のブログ記事に広告を挿入する

188 ブログ記事タイトルをカテゴリ別に一覧表示する

189 ブログ記事ページに同じカテゴリのブログ記事タイトル一覧を表示する

190 ブログ記事ページに同じタグのブログ記事タイトル一覧を表示する

191 ブログ記事ページのデザインを切り替える

192 ウェブページのデザインを切り替える

193 記事タイトルを番号順に並べる

194 カスタムフィールドで商品ページを作る

第21章 アーカイブ

195 年別のバックナンバーを作る

196 カレンダーの表示年月を月別アーカイブやブログ記事に連動させる

197 カテゴリ別にフィードを配信する

第22章 カテゴリ、タグ

198 特定のカテゴリの最新記事をトップページに表示する

199 カテゴリリストにブログ記事タイトルを表示する

200 カテゴリリストに最新更新日を表示する

201 カテゴリアーカイブにサブカテゴリのブログ記事を表示する

202 カテゴリ別にカテゴリアーカイブページのデザインを切り替える

203 プライベートタグで「お知らせ」のコーナーを作る

204 カスタムフィールドを使ってカテゴリリストに表示する画面を切り替える

205 カテゴリの新着履歴を表示する

第23章 コメント、トラックバック

206「最近のコメント」をブログ記事別に表示する

207 コメント一覧に番号を付与する

208 トラックバックURLを1クリックで取得できるようにする

209 返信コメントをスレッド形式で表示する

210 コメント投稿者の表示をXHTML validにする

第24章 ポータルブログ

211 ポータルブログの特徴

212 ポータルブログを設定する

213 サブブログの新着ブログ記事をブログ別にポータルブログに表示する

214 サブブログのブログ記事を新着順にソートしてポータルブログに表示する

215 ブログ名と投稿ユーザーのプロフィールをポータルブログに表示する

216 他のブログのテンプレートモジュールやウィジェットをポータルブログに表示する

第25章 コミュニティ

217 コミュニティ機能を知る

218 サインアップの準備をする

219 ブログ画面からブログ記事を投稿する

220 サインアップ画面に入力フィールドを追加する

221 ブログ記事作成ページにフィールドを追加する

222 ブログ記事の投票ランキングを表示する

223 お気に入りのブログ記事一覧を自分のプロフィールぺージに表示する

224 コミュニティのユーザー一覧を表示する

225 注目されているユーザーのランキングを見る

226 注目している人のブログ記事一覧を自分のプロフィールページに表示する

227 コミュニティ掲示板の機能を知る

第26章 モーション、アクションストリーム

228 モーションとアクションストリームの機能を知る

229 外部サービスを追加し、最新のアクションストリームを確認する

230 ユーザー別に利用サービス一覧を表示する

231 特定の利用サービスのアクションを表示する

232 日別にアクションを表示する

第5部 プラグイン、ツール

第27章 プラグイン

233 プラグインを利用する

234 本文の見出しタグラベルを最適化する

235 メインページ・アーカイブページをページ分割する

236 カテゴリの表示順序を入れ替える

237 アクセスランキングを表示する

238 ブログ記事投稿画面に編集用ボタンを追加する

239 ブログ記事を一括編集できるようにする

240 ブログ記事の更新履歴を管理する

241 サブカテゴリのブログ記事投稿時に親カテゴリアーカイブを再構築する

242 海外からのコメントスパム・トラックバックスパムを受け付けないようにする

243 利用中のテンプレートセットに別のテンプレートセットを追加する

244 テンプレートを他のMovable Typeで利用する

第28章 ツール

245 定期的にブログを再構築する

246 定期的にブログのバックアップを保存する

このサイトでは FeedBurner を利用して、フィードを全文配信していましたが、3月25日分のフィードからいつの間にか全文表示されなくなっています（下）。

全文配信されない代わりに、各記事の最後に次のようなメッセージが表示されるようになりました。

[[ This is a content summary only. Visit my website for full links, other content, and more! ]]

ちなみに、FeedBurner の設定はこれまで通り、「ブラウザ・フレンドリ」の「内容オプション」で「記事タイトルと内容」になっています。配信元のフィードも全文表示のままです。

ということで、全文表示方法については確認中です「キャッチコピー」が無効にすることで解決しました。

2009.04.25
文言を修正しました。

このブログの更新や管理は、主に Firefox3 を使って管理しています（2009年4月現在）が、今日管理画面にアクセスしたら、突然下記のようなエラーが発生してアクセスできなくなりました。

一瞬、サーバの不具合かと思ったのですが、他のブラウザではアクセスできます。で、ネットで検索したところ、該当サイトのクッキーを消去すれば直ることが分かりました。

１．対処方法

メニューバーから、「ツール」→「オプション」を選択。

「プライバシー」タグの「Cookieを表示」をクリック。

該当サイト（ここではkoikikukan.con）を選択して、「Cookieを削除」をクリック。

これで正常にアクセスできるようになりました。ブラウザの再起動は不要です。

２．参考

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

プログラマ 福重 伸太朗 ～基本へ帰ろう～ - とあるサイトにアクセスると 400 - Bad Request になるorz

当サイトへのコメント欄に、

再構築をすると、「日付アーカイブ「Monthly2009xxxxxxxxxx」の再構築中にエラーが発生しました: テンプレート「月別ブログ記事リスト」の再構築中にエラーが発生しました: <mtEntryXXXX>タグでエラーがありました: mtEntryXXXXをコンテキスト外で利用しようとしています。MTEntriesコンテナタグの外部で使っていませんか? 」というエラーが出るのですが、どうすればよいでしょうか？

という手の質問をときどき頂くので、このエントリーでまとめておきます。

１．コンテキストについて

多分、質問されてくる方の大半が「コンテキスト」の意味が分からないものと推測しています。

コンテキストとは人によって解釈が異なりますが、ここでは、「Movable Type のテンプレートの、ある場所における、特定の情報を扱える状態」と定義します。

簡単に言い換えると、MTEntries タグの中は、ブログ記事系のテンプレートタグが扱えるコンテキストになります。

<mt:Entries>
［ブログ記事用のテンプレートタグが扱えるコンテキスト］
</mt:Entries>

また、MTCategories タグの中は、カテゴリ系のテンプレートタグが扱えるコンテキストになります。

<mt:Categories>
［カテゴリ用のテンプレートタグが扱えるコンテキスト］
</mt:Categories>

また、テンプレートタグ内部だけでなく、例えばブログ記事テンプレートであれば、ブログ記事テンプレート内全体がブログ記事用のテンプレートタグが扱えるコンテキストになります。

２．再構築エラーの解析方法について

下記のような再構築エラーを例に解説します。

Movable Type の再構築時のエラーメッセージは、先頭から順番にメッセージ内容を辿っていけば、原因が分かるようになっています。

まず、再構築でエラーが発生したページは、日付アーカイブ「Monthly20090401000000」ですが、「テンプレート「月別ブログ記事リスト」の再構築中にエラーが発生しました」とあるので、その元になるテンプレートが「月別ブログ記事リスト」であることが分かります。

次に、「<mtEntryDate>タグでエラーがありました」とあり、ここから「月別ブログ記事リスト」に記述された <mtEntryDate>タグが再構築エラーの原因であることが分かるので、テンプレート内に記述した、<mtEntryDate>タグを探してください。

エラーメッセージの最後に、「mtEntryDateをコンテキスト外で利用しようとしています。MTEntriesコンテナタグの外部で使っていませんか? 」とあります。<mtEntryDate>タグが使えるコンテキストは、

• MTEntries タグ内
• ブログ記事テンプレート

のいずれかなので、上記以外の場所で使われていることが再構築エラーの原因であることが分かります。

ちなみにこのエラーは、「月別ブログ記事リスト」の枠線で示した部分に、<mtEntryDate>タグを埋め込んだことが原因です。

３．エラーの解析のポイント

テンプレートモジュールやウィジェットを使っていると、エラーメッセージが長くなる場合がありますが、エラーメッセージの長さによらず、

• 元のテンプレート（モジュールやウィジェットではなく、インデックステンプレートやアーカイブテンプレート）
• エラーになっているテンプレートタグ（モジュールやウィジェットに記述されている場合もある）
• エラー種別（コンテキスト外での利用など）

の3つをエラーメッセージから抽出できれば、大体解決できると思います。

1つめの「元のテンプレート」は、テンプレート種別によってコンテキストが異なるので、コンテキスト関連のエラーであれば解析するために重要な情報となります。

なお、2つめの新しいブログを作った直後は、ブログ記事がひとつも存在しないので、テンプレートタグの使い方に誤りがあっても、出力すべきページがないため、テンプレートタグが評価されず、再構築エラーは発生しません（多分）。

４．参考図書

コンテキストはテンプレートタグを扱う場合に重要な概念と思っているのですが、このことについて扱っている Movable Type 関連書籍は下記の2冊のみです（認識が間違っていたらすいません）。

Movable Type 4.2 パーフェクトガイド 荒木 勇次郎 毎日コミュニケーションズ 2008-07-31 売り上げランキング : 1457 Amazonで詳しく見る by G-Tools

Movable Type プロフェッショナル・スタイル MT4.1対応 CSS Nite 毎日コミュニケーションズ 2008-04-08 売り上げランキング : 2676 Amazonで詳しく見る by G-Tools

「Movable Type 4.2 パーフェクトガイド」では、252～256ページで解説しています。

以前から Excel を使っているとき、入力した文字が時々「#####...」と表示されてしまうケースがあります。

「#####...」となる問題は、数値を入力して、セルの幅が入力した値より幅が狭いときなどに発生しますが、ここでは別の事象です。

１．問題点

まず、セルの書式設定で「表示形式」を「文字列」にします。

この状態で文字を入力すると、次のように、「#####...」になります。内容にかかわらず、何らかの条件でこのようになるみたいです。

２．原因

ネットで調べてみたところ、MicroSoft サポートに原因が掲載されていました。

MicroSoft サポート オンライン - 表示形式が文字列のとき 256 文字以上の文字を表示できない

要約すると、下記の条件が揃うと、文字が「#####...」と表示されるようです。

• セルの書式設定で「表示形式」を「文字列」に設定
• セルに入力している文字数が256～1024文字

ということで、試してみました。255文字までは、次のように正常に表示されます。

ところが、256文字ではたしかに「#####...」となりました。

そして1024文字を超えるとまた正常に表示されるようです。以下は1025文字の場合です。

３．対処方法

文字数が256～1024の間でも正常に表示できるようにするには、セルの書式設定で「表示形式」を「標準」に変更します。

４．その他

今回、Google で調べる際に「エクセル #####」などと指定してみましたが、一部を除いて記号は検索検できないようです。

「MovableType逆引きデザイン事典」の見本誌が到着しました。本物を手にするこの瞬間が、なんとも感慨深いです。

背表紙はこんな感じです。このシリーズでは416ページと、一番ページ数が多い方です。

目次です。ここが大体私が担当した部分です。この前に4ページ分、高山さんが担当された目次があります。計28章・246項目+テンプレートタグリファレンスという構成です。カスタマイズは約70項目です。

カスタマイズの章では、扱っているテンプレートタグについて、きめ細かく解説しています。

Movable Type 4.2 で追加されたコミュニティ機能の解説やカスタマイズも行ないました。

再校中に Movable Type 4.25 が登場し、モーション・アクションストリームの解説とカスタマイズもねじ込みました。校正と追加執筆、それから追加分のカスタマイズの動作確認が重なったこの時期が一番辛かったですが、出来上がったものを見ると頑張った甲斐がありました。

とりあえず見た目の紹介まで。内容については発売日あたりにまた。

MovableType逆引きデザイン事典[4.2/4.1対応] 荒木 勇次郎 翔泳社 2009-04-21 売り上げランキング : Amazonで詳しく見る by G-Tools

当サイトで公開している、FC2ブログのカスタマイズ「サイドメニューの折りたたみ for FC2 ブログ」で、プラグインに対して折りたたみを設定するカスタマイズを紹介します。

　　　　　　　　　　↓

2009.04.22 「hatena chips - サイドメニュー折りたたみスクリプトを導入」を参考に、記事の２項を修正しました。

１．元記事のカスタマイズで正常に折りたためない問題

FC2ブログのプラグインとは、サイドバーにブログパーツを表示するための機能です。プラグインを利用するためには、テンプレートに下記のようなブロック変数を設定しておきます。

<!--plugin-->
<!--plugin_first-->
<div class="foldtitle">
<%plugin_first_title>
</div>
 
<div class="fold">
<%plugin_first_content>
</div>
<!--/plugin_first-->
<!--/plugin-->

このプラグイン用ブロック変数は、テンプレート内に合計3つ（plugin_first/plugin_second/plugin_third）まで設定することができ、これを「プラグインカテゴリ1～3」と呼びます。

また、プラグインの中に表示するブログパーツは、次のように管理画面から設定します。ひとつのプラグインカテゴリには複数のブログパーツを表示することができます。

さて、プラグインに表示するブログパーツに対して折りたたみを行いたい場合、下記のように、プラグイン用ブロック変数に折りたたみの設定を行なっても正常に動作しません。

<!--plugin-->
<!--plugin_first-->
<div class="foldtitle" id="hogename">
<%plugin_first_title>
</div>
 
<div class="fold" id="hogelist">
<%plugin_first_content>
</div>
 
<script type="text/javascript">
FoldNavigation('hoge','on',false);
</script>
<!--/plugin_first-->
<!--/plugin-->

理由は、ブロック変数内の内容は、設定したブログパーツ数だけ繰り返し表示されます。つまり、追加設定した、折りたたみ用の id 属性値（hogename/hogelist）は、追加したプラグイン数だけ繰り返し表示されてしまいます。

言い換えると、異なるプラグインパーツに同じ id 属性値が設定されるので、仮にプラグインカテゴリ1に3つのブログパーツを表示している場合、JavaScript で最初にみつけた id 属性のブログパーツ、つまり一番最初のブログパーツしか折りたたみができません。

ということで、以下、プラグインを使って表示するブログパーツで折りたたみを行う場合のカスタマイズを紹介します。

１．前処理

まず、「サイドメニューの折りたたみ for FC2 ブログ」の１～３項の設定を行います。

２．HTMLの修正

テンプレート編集画面（HTML編集）のプラグイン用ブロック変数をさがし、次の青色部分の class 属性を追加してください。

プラグインカテゴリ1の場合

<!--plugin-->
<!--plugin_first-->
<div class="foldtitle" id="fold<%plugin_first_no>name">
<%plugin_first_title>
</div>
 
<div class="fold" id="fold<%plugin_first_no>list">
<%plugin_first_content>
</div>
 
<script type="text/javascript">
FoldNavigation('fold<%plugin_first_no>','on',false);
</script>
<!--/plugin_first-->
<!--/plugin-->

<!--plugin-->
<!--plugin_second-->
<div class="foldtitle" id="fold<%plugin_second_no>name">
<%plugin_second_title>
</div>
 
<div class="fold" id="fold<%plugin_second_no>list">
<%plugin_second_content>
</div>
 
<script type="text/javascript">
FoldNavigation('fold<%plugin_second_no>','on',false);
</script>
<!--/plugin_second-->
<!--/plugin-->

プラグインカテゴリ3の場合

<!--plugin-->
<!--plugin_third-->
<div class="foldtitle" id="fold<%plugin_third_no>name">
<%plugin_third_title>
</div>
 
<div class="fold" id="fold<%plugin_third_no>list">
<%plugin_third_content>
</div>
 
<script type="text/javascript">
FoldNavigation('fold<%plugin_third_no>','on',false);
</script>
<!--/plugin_third-->
<!--/plugin-->

class 属性を設定するポイントは次の2つです。

• <%plugin_first_title> を括っている (X)HTML 要素に、class="foldtitle" を設定する。
• <%plugin_first_content> を括っている (X)HTML 要素に、class="fold" を設定する。

設定が終わったら「更新」をクリックします。

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

テンプレート編集画面（スタイルシート編集）の任意の場所に、下記の CSS を追加してください。

.foldtitle a {
    width: auto;
}
 
/* 通常 */
.foldtitle a:link,
.foldtitle a:visited {
    display: block;
    padding: 2px;
    border: 1px solid #999; /* 枠線 */
    color:#666; /* 文字色 */
    background-color:#f6f6f6; /* 背景色 */
    text-decoration: none;
}
 
/* マウスポイント時 */
.foldtitle a:hover {
    padding: 2px;
    border: 1px solid #999; /* 枠線 */
    color: #fff; /* 文字色 */
    background-color: #999; /* 背景色 */
    text-decoration: none;
}

配色等のデザインは、CSS に記載しているコメントを参考に適宜変更してください。

設定が終わったら「更新」をクリックします。これでページを開いて、ブログパーツで折りたたみができれば完成です。

2009.05.19
スタイルシートのセレクタ名が誤っていたので修正しました。

<!--plugin-->
<!--plugin_first-->
<div class="foldtitle">
<%plugin_first_title>
</div>
 
<div class="fold">
<%plugin_first_content>
</div>
<!--/plugin_first-->
<!--/plugin-->

<script type="text/javascript">
//<![CDATA[
var elements = document.getElementsByTagName('div');
var counter = 1;
var buffer = new Array();
 
for (i = 0; i < elements.length; i++) {
    if (elements[i].className == "foldtitle" &&
        elements[i+1].className == "fold") {
        var name = 'fold' + counter;
        elements[i].setAttribute('id', name + 'name');
        elements[i+1].setAttribute('id', name + 'list');
        buffer[buffer.length] = "FoldNavigation('" + name + "','on',false);";
        counter++;
    }
}
var element = document.createElement("script");
element.type = "text/javascript";
element.text = buffer.join('\n');
document.body.appendChild(element);
//]]>
</script>

公開中の「livedoor ブログテンプレート」を修正しました。livedoor ブログテンプレートを修正するのは約2年半ぶりです。

１．修正内容

• 記事タイトル・サイドバーなどのフォントサイズを大きくしました
• フォントサイズをpx指定から%指定に変更
• 記事タイトルの「●」を削除して、border による表示に変更
• 「livedoor ブログで記事が属するカテゴリの最新記事を表示する」を盛り込みました

変更前

変更後

２．テンプレートのダウンロード

テンプレートは下記のリンクからダウンロードしてください。

livedoor ブログテンプレート

Windows版の ImageMagick は、インストール時に、Perl で ImageMagick を操作するための Perl モジュール Image::Magick（PerlMagick） を、オプション指定でインストールすることができます。

ただし、ImageMagick のバージョンによって、インストールできる Image::Magick のバージョンが異なります。下の図の赤枠は、インストールウィザードの途中で表示される Image::Magick のインストール指定と、そのバージョンです。

この場合、ImageMagick 6.3.7 のインストール時に、ActivePerl 5.8.8 build 822 に対応する Image::Magick をインストールすることを示しています。

以下、ImageMagick のバージョン別に、同時にインストールされる Image::Magick のバージョンが対応する ActivePerl バージョンを調べてみました。

上記の各バージョンの ImageMagick については、2009年4月2010年8月現在、下記のURLからダウンロードできることを確認しています。

Main Site » Mirror » image_magick

なお、ActivePerl 5.8.9 を利用している場合は、多分、ActivePerl 5.8.8 build 822 対応のバージョンの ImageMagick（ImageMagick-6.4.1-3 等）で良いと思います。

上記に掲載した表の元データは、下記の各インストールウィザードでの表記にもとづいています。

Perl 5.8.8 build 819

ImageMagick-6.3.2-9-Q8-windows-dll.exe

ImageMagick-6.3.3-10-Q8-windows-dll.exe

ImageMagick-6.3.4-0-Q8-windows-dll.exe

ImageMagick-6.3.4-1-Q8-windows-dll.exe

ImageMagick-6.3.4-2-Q8-windows-dll.exe

Perl 5.8.8 build 820

ImageMagick-6.3.4-3-Q8-windows-dll.exe（表記は920だが多分820の誤り）

ImageMagick-6.3.4-6-Q8-windows-dll.exe

ImageMagick-6.3.4-10-Q8-windows-dll.exe

ImageMagick-6.3.5-0-Q8-windows-dll.exe

ImageMagick-6.3.5-3-Q8-windows-dll.exe

ImageMagick-6.3.5-6-Q8-windows-dll.exe

ImageMagick-6.3.5-8-Q8-windows-dll.exe

Perl 5.8.8 build 822

ImageMagick-6.3.5-9-Q8-windows-dll.exe

ImageMagick-6.3.5-10-Q8-windows-dll.exe

ImageMagick-6.3.6-10-Q8-windows-dll.exe

ImageMagick-6.3.7-10-Q8-windows-dll.exe

ImageMagick-6.3.8-0-Q8-windows-dll.exe

Perl 5.10.0 build 1002

ImageMagick-6.3.8-1-Q8-windows-dll.exe

ImageMagick-6.3.8-2-Q8-windows-dll.exe

ImageMagick-6.3.8-3-Q8-windows-dll.exe

ImageMagick-6.3.8-5-Q8-windows-dll.exe

ImageMagick-6.3.8-11-Q8-windows-dll.exe

ImageMagick-6.3.9-10-Q8-windows-dll.exe

ImageMagick-6.4.0-1-Q8-windows-dll.exe

ImageMagick-6.4.0-11-Q8-windows-dll.exe

ImageMagick-6.4.1-1-Q8-windows-dll.exe

ImageMagick-6.4.1-2-Q8-windows-dll.exe

ImageMagick-6.4.1-3-Q8-windows-dll.exe

Perl 5.10.0 build 1003

ImageMagick-6.4.1-4-Q8-windows-dll.exe

ImageMagick-6.4.1-10-Q8-windows-dll.exe

ImageMagick-6.4.2-10-Q8-windows-dll.exe

ImageMagick-6.4.3-1-Q8-windows-dll.exe

ImageMagick-6.4.3-3-Q8-windows-dll.exe

ImageMagick-6.4.3-5-Q8-windows-dll.exe

ImageMagick-6.4.3-6-Q8-windows-dll.exe

Perl 5.10.0 build 1004

ImageMagick-6.4.3-7-Q8-windows-dll.exe

ImageMagick-6.4.3-10-Q8-windows-dll.exe

ImageMagick-6.4.4-0-Q8-windows-dll.exe

ImageMagick-6.4.5-0-Q8-windows-dll.exe

ImageMagick-6.4.7-10-Q8-windows-dll.exe

ImageMagick-6.4.8-10-Q8-windows-dll.exe

ImageMagick-6.4.9-6-Q8-windows-dll.exe

ImageMagick-6.5.0-10-Q8-windows-dll.exe

ImageMagick-6.5.1-10-Q8-windows-dll.exe

ImageMagick-6.5.2-10-Q8-windows-dll.exe

Perl 5.10.0 build 1005

ImageMagick-6.5.3-0-Q8-windows-dll.exe

ImageMagick-6.5.3-10-Q16-windows-dll.exe

ImageMagick-6.5.4-10-Q8-windows-dll.exe

ImageMagick-6.5.5-0-Q8-windows-dll.exe

ImageMagick-6.5.5-3-Q8-windows-dll.exe

ImageMagick-6.5.5-4-Q8-windows-dll.exe

Perl 5.10.1 build 1006

ImageMagick-6.5.5-5-Q8-windows-dll.exe

ImageMagick-6.5.5-10-Q8-windows-dll.exe

ImageMagick-6.5.6-10-Q8-windows-dll.exe

ImageMagick-6.5.7-10-Q8-windows-dll.exe

ImageMagick-6.5.8-10-Q8-windows-dll.exe

ImageMagick-6.5.9-0-Q8-windows-dll.exe

ImageMagick-6.5.9-1-Q8-windows-dll.exe

Perl 5.10.1 build 1007

ImageMagick-6.5.9-2-Q8-windows-dll.exe

ImageMagick-6.5.9-5-Q8-windows-dll.exe

ImageMagick-6.5.9-10-Q8-windows-dll.exe

2010.08.13
確認バージョンを追加しました。

公開中の「livedoor ブログテンプレート」で、記事が属するカテゴリの最新記事を表示するカスタマイズです。

このカスタマイズを行なうことで、記事ページの本文の下に、次のような一覧を表示します。この例では、「カスタマイズ」カテゴリに属する記事本文の下に、「カスタマイズ」カテゴリの記事一覧を表示しています。

なお、本カスタマイズを盛り込んだ livedoor ブログテンプレートを別途公開する予定です。

１．テンプレートの修正

管理画面より「ブログの設定」→「デザイン」の「カスタマイズ」をクリック。

個別記事ページを選択して、トラックバック情報表示の直前に下記のタグを追加してください。

<$RelatedArticles$>

追加後は次のようになります。

また、スタイルシート（CSS）を選択して、下記の青色部分を追加してください。

.related-articles,
.trackbacks,
.comments {
    margin: 10px 5px;
    color: #36414d;
}
 
.related-articles h3,
.trackbacks-header,
.comments-header,
.comments-open-header {
    margin: 15px 0;
    padding: 2px 0 2px 5px;
    color: #ffffff;
    background: #8fabbe;
    font-size: 11px;
}
 
.related-articles ul {
    font-size: [任意の値];
}

赤色は任意のフォントサイズを設定してください。

２．設定変更

管理画面より「ブログの設定」→「ブログ情報」の「基本設定」をクリック。

「表示設定」の「個別記事に同一カテゴリの記事リスト」の「表示する」を選択し、カテゴリと表示件数を設定します。

３．関連記事

同じカテゴリの最新記事を表示する機能を追加しました(7/29 Update!!)

「Movable Type 4.25 の追加機能と変更点」以降で気がついた分を紹介します。

入力フィールド順序の入れ替え

「Movable Type 4.23 から 4.25 へのアップグレード」で、「『概要』フィールドと『タグ』フィールドの位置が入れ替わりました」とお伝えしましたが、4.25 では入力フィールド順序の入れ替えが可能になっています。

追加したカスタムフィールドも、同じように表示順序を入れ替えることができます。

ちなみに、フィールド表示のレイアウトが 4.24 から変更されています。下記は 4.24 の表示で、「メタデータ」が追加されました。

本機能については公式ドキュメントにも追加されています。

フィールドの順序を変更する

Movable Type でブログを始めてからそろそろ 5年になります。MTのテンプレートやカスタマイズ、プラグインなどをそれなりに公開して、MT本も書いたりしているのですが、一度も開発元のシックス・アパート社に行ったことはありませんでした。

が、本日（昨日）、ついにシックス・アパート社を訪れました。会社の場所について、かなりいい加減な下調べしかしていなかったので、以下、到着するまでの顛末です。

まず、シックス・アパート社の場所は下記です。TBSが近くにありますね（知りませんでした）。

大きな地図で見る

Six Apart - 交通機関でのアクセス

会社に一番近い地下鉄千代田線赤坂駅を降りて、駅にある地図をなんとなく覚え、TBSの右側を抜けるショートカットコースでそれらしき方向に歩いて行ったのですが、あっさり迷ってしまいました。

迷ったのはこの辺です（バカ）。今考えると、これをまっすぐ進めば良かったのですが、かなり焦っていたので、前後どちらに進めば良いのか分からなくなってました。

大きな地図で見る

坂道になっていたので、「ここは円通寺坂だろう」と思いつつも、坂のどの辺に円通寺があるかも調べてなかったので、立ち止まったところからすぐ近くにあった小粋なレストラン（写真真ん中）に入って、円通寺の場所を聞きました。

大きな地図で見る

「ここから少し坂を上ったところに円通寺がありますよ」と、親切に教えてくださった店員さんに感謝。

ということで、すぐに円通寺にたどり着きましたが、まだ会社がどこか分かってません。

大きな地図で見る

「たしかお寺の横の、道角のビルだったはず」と思い、お寺を通り過ぎて、角にあるビルの入り口（下）をおそるおそるを覗き込むと、7Fに「シックス・アパート」と書かれてありました。

大きな地図で見る

ということで、無事、会社に到着しました。金子さんや上ノ郷谷さん、シックスアパートの社員の方々にお会いすることができました。

仕事場もちょっとだけ見学させていただきました。時間が遅かったのでMT開発チームの方はいらっしゃいませんでした（日米で作業する関係で、朝早いらしい）。

ということで、記念＆備忘録エントリーでした。感無量です。

公開中の「UserNameEditController プラグイン」をバージョンアップしました。

１．修正内容

電子メールを編集禁止にしたときに、システム管理者以外のユーザーがプロフィールを保存したときに「メールアドレスはパスワードを再設定できるようにするために必要です。」というメッセージが表示され、保存されない不具合を修正しました。

２．ダウンロード

最新版のプラグインは下記のページよりダウンロードしてください。

UserNameEditController プラグイン

CHEEBOWでおなじみの関根元和さんが、Movable Type プラグインの書籍を執筆されました。

Movable Typeプラグイン開発入門 関根 元和 ラトルズ 2009-04 売り上げランキング : 67837 Amazonで詳しく見る by G-Tools

紙で出版されるものとしては、初の Movable Type プラグイン専門書籍です。

内容は、基本的なプラグインの作成から拡張テンプレートタグ・管理画面・コールバックの各プラグインの開発方法。そして、MTオブジェクトの解説と操作方法に加え、ダイナミックパブリッシングの作成についても解説されています。

chapter1 MTプラグインの特徴と使い方

1-1 MTプラグインでできること

1-2 MTプラグインの使い方

chapter2 MTプラグインを作る

2-1 開発環境を整える

2-2 ローカル環境の構築

2-3 簡単なプラグインを作る

chapter3 テンプレートタグの拡張

3-1 テンプレートタグ

3-2 ファンクションタグ

3-3 ブロックタグ

3-4 コンディショナルタグ

3-5 グローバルモディファイア

chapter4 プラグイン設定と多言語対応

4-1 プラグイン設定

4-2 プラグイン設定を追加する

4-3 ローカライズ

4-4 プラグインの情報

chapter5 コールバック

5-1 コールバックの使い方

5-2 フックポイントの種類

5-3 コールバックを使ったプラグイン

chapter6 管理画面のカスタマイズ

6-1 管理画面の拡張

6-2 メニューの追加とメソッドの追加

6-3 独自画面とダイアログ

6-4 ダッシュボード

chapter7 MTオブジェクト

7-1 MTオブジェクトとは

7-2 MTオブジェクトの使い方

7-3 独自オブジェクトを使う

7-4 既存のオブジェクトを拡張する

chapter8 ダイナミックパブリッシング

8-1 ダイナミックパブリッシングについて

8-2 ファンクションタグ

8-3 ブロックタグ

8-4 コンディショナルタグ

8-5 グローバルモディファイア

chapter9 MTPlugin-Starter

9-1 MTPlugin-Starterとは

9-2 MTPlugin-Starterを使えるようにする

9-3 MTPlugin-Starterを使う

chapter10 デバッグ

10-1 ログ書き出し

10-2 デバッグモード

フリーランスWebデザイナー・黒野明子さんの gihyo.jp で Movable Type の連載第12回～14回の紹介です。またまた出遅れてしまってすいません...。

チャレンジ！　Movable TypeをCMSとして使ってみよう！

第12回の「個別のブログ記事とウェブページのテンプレート完成させる」では、ブログ記事ページに表示するカテゴリ一覧で、表示中のブログ記事が属するカテゴリにのみ、他のブログ記事一覧を表示する方法と、ウェブページの作成方法が紹介されています。

第13回の「検索用テンプレートに着手しよう！」では、検索結果ページへの表示方法および、ブログ記事が属するメインカテゴリによって表示内容を振り分ける方法と、検索結果ページでひとつのブログを検索対象にする場合のテンプレートタグの使い方について触れられています。また、検索結果がなかった場合の表示方法も紹介されています。

第14回の「検索結果が多いときにページを分割する」では、Ajax を利用して検索結果ページをページ分割するカスタマイズが紹介されています。

新車両お披露目で

2009 年 3 月の Amazon 注文ランキングです。1位は「MTOS活用テクニック―カスタムフィールドで本格的なCMS機能を実現!」がダントツの売り上げでした。MTOS でカスタムフィールドを利用したいユーザーが多いことを物語っているようです。

3位の「GriffinTechnology iTalk Pro GRI-IP-000063」は値引き率が下がったようですが、数日前にアクセスした時は以前のように大幅値引きを行なっていたので、こまめにチェックするといいかもしれません。

1位：MTOS活用テクニック―カスタムフィールドで本格的なCMS機能を実現!

MTOS活用テクニック―カスタムフィールドで本格的なCMS機能を実現! 藤本 壱 ラトルズ 2009-02 売り上げランキング : 8891 Amazonで詳しく見る by G-Tools

2位：基本からしっかりわかる Movable Type 4.2 カスタマイズブック（Web Designing Books）

基本からしっかりわかる Movable Type 4.2 カスタマイズブック（Web Designing Books） 大藤 幹 毎日コミュニケーションズ 2008-09-20 売り上げランキング : 6281 Amazonで詳しく見る by G-Tools

3位：CMSとして使うMovable Typeガイドブック

CMSとして使うMovable Typeガイドブック 黒野 明子 翔泳社 2008-03-14 売り上げランキング : 6429 Amazonで詳しく見る by G-Tools

3位：GriffinTechnology iTalk Pro GRI-IP-000063

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

3位：デザインカスタマイズブック MT4.2対応 クリエイターのためのValue Design

Movable Typeデザインカスタマイズブック MT4.2対応 クリエイターのためのValue Design 下野 宏 ソフトバンククリエイティブ 2008-09-27 売り上げランキング : 14999 Amazonで詳しく見る by G-Tools

6位：図解日本アムウェイ―ひと目でわかる!

図解日本アムウェイ―ひと目でわかる! (B&Tブックス) 日刊工業新聞社 日刊工業新聞= 日刊工業新聞社 2009-02 売り上げランキング : 78 Amazonで詳しく見る by G-Tools

7位：Movable Type 4でつくる![最強のブログサイト]

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

7位：Movable Type プロフェッショナル・スタイル MT4.1対応

Movable Type プロフェッショナル・スタイル MT4.1対応 CSS Nite 毎日コミュニケーションズ 2008-04-08 売り上げランキング : 77276 Amazonで詳しく見る by G-Tools

7位：基本からしっかりわかる WordPress 2.7 カスタマイズブック (Web Designing BOOKS)

基本からしっかりわかる WordPress 2.7 カスタマイズブック (Web Designing BOOKS) 大藤 幹 毎日コミュニケーションズ 2009-02-17 売り上げランキング : 3820 Amazonで詳しく見る by G-Tools

7位：Logitec iPod対応 ICレコーダーアダプタ LIC-IREC01

Logitec iPod対応 ICレコーダーアダプタ LIC-IREC01 ロジテック 2008-03-18 売り上げランキング : 1977 Amazonで詳しく見る by G-Tools

Movable Type の利用許諾契約書について、基本ライセンスと個人ライセンスの主な差分を示します。

• Movable Type Software 利用許諾契約書
• Movable Type Software 4.x利用許諾契約書（個人ライセンス・無償）（「本ライセンスの適用範囲について」を参照）

以下、利用許諾契約書の確認内容は2009年4月1日時点のものです。利用許諾契約書の変更を追従して反映することは致しませんので、利用許諾契約書に変更が生じた場合は、本エントリーと食い違いが生じる可能性があります。予めご了承ください。

本エントリーの掲載内容は目安として見て頂き、Movable Type のご利用に際しては、正規の利用許諾契約書を必ずご確認ください。掲載内容で解釈の誤りや誤解を招くような記述がありましたらコメント欄にてご指摘頂ければ幸いです。

• 注1：「条項」欄の名称は基本ライセンスを基準にしています
• 注2：「種別」欄の「基」は基本ライセンス、「個」は個人ライセンスを示します。数字は該当する条項番号を示します。「-」は該当条項なし

当サイトは基本ライセンスで運用しています。

2009.04.02 追記：本エントリーはエイプリルフールに書いたものです。

ブログ「小粋空間」を2004年に開始してから約5年間、バージョン3.01 の時代から Movable Type を使って公開してまいりましたが、このたび気分も新たに、WordPress に移行致しました。

一番の障壁はパーマリンクの継承でしたが、当サイトはブログ記事ページのファイル名にタイムスタンプを使っていたので、パーマリンクの継承は比較的簡単に移行できました。ブログ記事ファイル名にベースネームを利用している場合はもう少し複雑な手順になると思われますが、ここでは割愛します。

以下、Movable Type から WordPress への移行作業の簡単な流れを紹介します。

１．ブログ記事のエクスポート

Movable Type のブログ管理画面の「ツール」→「エクスポート」で、ブログ記事・コメント・トラックバック・タグの各データをテキスト形式で出力します。

2400エントリー、14000コメント、4800トラックバックがありましたが、約1分ほどで出力できました。

２．WordPress にブログ記事をインポート

インストールした WordPress 2.7.1 に、１項のテキストデータをインポートします。WordPress 管理画面の「ツール」→「インポート」をクリック。

「Movable Type と TypePad」をクリック。

１項のファイルをそのままアップロードする場合は、ファイルを指定して、「ファイルをアップロードしてインポート」をクリックするか、２項のファイル名を mt-export.txt に変更して、/wp-content/ ディレクトリにアップロードし、「mt-export.txt のインポート」をクリック。

ファイルを選択する場合は32MBまでのようです（当サイトは約20MB）。エクスポートは早かったのですが、インポートは数十分かかりました。

３．パーマリンク変更

WordPress 管理画面の「設定」→「パーマリンク設定」をクリック。

「カスタム構造」を選択して、テキストフィールドに変更したいパスの内容を設定します。

当サイトはブログ記事のファイル名にタイムスタンプを利用していたので、次のように変更しました。

/%year%/%monthnum%/%day%-%hour%%minute%%second%.php

以上です。スタティックな再構築がない分、管理作業は早くなりますが、今後は閲覧者の方に再構築のコストをご負担頂くことになります。

４．注意事項

この記事をお読みになった方は、トップページの右サイドバーにある当サイトのクレジットバナー上にある表記を必ずご覧ください。
上記文言で下記の表示に誘導していました。