Top > Movable Type > テンプレート [全て開く]
2008年2月12日

Movable Type 4.1 テンプレートセット(スタイル対応版)

February 12,2008 1:55 AM
Tag:[, , , ]
Permalink

Movable Type 4.1 用のテンプレートセット(スタイル対応版)の配布を開始します。

Movable Type 4.1 で追加されたテンプレートセット機能を用いれば、これまでのようにテキストエリアにテンプレートをペーストせずに、簡単に入れ替えることができます。

このテンプレートセットは、先日公開した「Movable Type 4.1 テンプレートセット」に「スタイル」機能によるカラムレイアウト切り替え機能を追加したもので、テンプレートを編集せずに、8種類のカラムレイアウトを自由に切り替えることができます(下)。

CSS は配布済の Movable Type 4.1 テンプレートと互換性があります(ファイル名のみ変更が必要)。

1.テンプレートセットのダウンロード

「スタイル対応版」のテンプレートセットアーカイブを、下記のページからダウンロードしてください。

Movable Type テンプレート

以下、テンプレートセットの利用方法です。

2.テンプレートセットのインストール

ダウンロードしたテンプレートセットアーカイブを解凍し、中にある plugins 配下にある KoikikukanTemplateSet フォルダを Movable Type の plugins フォルダに丸ごとアップロードしてください。

また、mt-static/plugins 配下にある KoikikukanTemplateSet フォルダを Movable Type の mt-static/plugins フォルダに丸ごとアップロードしてください。

「システムメニュー」→「プラグイン」でプラグインの一覧が表示されるので、「KoikikukanTemplateSet」が表示されていればインストールOKです。

3.テンプレートセットの入れ替え

ここではインストールされた状態で入れ替える方法を説明します。

ブログ管理画面より「デザイン」→「テンプレート」をクリック。

右下にある「ブログのテンプレートを初期化」をクリック。

「新しいテンプレートセットを適用」を選択し、セレクトボックスから「小粋空間テンプレートセット」を選択。「既存のテンプレートのバックアップを作成する」をチェックすると、入れ替え前のテンプレートのバックアップがとれます。
選択後、右下の「次へ」をクリック。

「確認」をクリック。これでテンプレートセットの入れ替えが開始します。

「テンプレートの初期化を完了しました。」が表示されれば完了です。

サイトの再構築アイコンをクリック。

「すべてのファイル」を選択して「再構築」をクリック。

「すべてのファイルを再構築しました。 」が表示されたら再構築完了です。

前の画面の「サイトを見る」をクリックするか、ブログ管理画面の「サイト表示」のアイコンをクリック。

当サイトのテンプレートセットのデザインで表示されれば完了です。デフォルトデザインのままであればブラウザをリロードしてください。

4.スタイルの切り替え

ここではカラムレイアウトを切り替える方法を説明します。

ブログ管理画面より「デザイン」→「スタイル」をクリック。

「既定のスタイル」の左側にある + マークのアイコンをクリック(「既定のスタイル」の部分は選択状態によって異なります)。

開いたウィンドウに小粋空間テンプレートセットをインストールしたスタティックディレクトリのテーマURLを入力。

具体的には、次のような URL になります。

http://[user-domain]/mt-static/plugins/KoikikukanTemplateSet/themes/

赤色の部分は、MT のスタティックディレクトリ(mt-static ディレクトリがある位置)までの URL を設定してください。

正しい URL であれば、次のような画面になるので、表示されたサムネイル画像をクリック。

右側に大きな画像が表示され、その下にレイアウト選択用のセレクトボックスが表示されます。

セレクトボックスからお好きなレイアウトを選択してください。ここでは「layout-two-column-right」を選択します。

レイアウトの対応は次の通りです。

名称意味
layout-three-column3カラム・固定レイアウト
layout-three-column-liquid3カラム・リキッドレイアウト
layout-two-column-right2カラム(右サイドバー)・固定レイアウト
layout-two-column-liquid-right2カラム(右サイドバー)・リキッドレイアウト
layout-two-column-left2カラム(左サイドバー)・固定レイアウト
layout-two-column-liquid-left2カラム(左サイドバー)・リキッドレイアウト
layout-one-column1カラム・固定レイアウト
layout-one-column-liquid1カラム・リキッドレイアウト

選択後、「デザインを適用」をクリック。

「テーマを適用しました。レイアウトも変更されたので、再構築する必要があります。 設定を有効にするために再構築してください。」と表示されるので、ブログ全体を再構築してください。

スタイルが切り替わりました。サイドバーの内容もテンプレート編集画面で入れ替える必要はありません。

5.スタイルの編集

スタイルを変更する場合は、インデックステンプレートにある、「スタイルシート(styles-site.css)」を編集してください。

Comments [39] | Trackbacks [5]
2008年2月 6日

Movable Type でコメント用 RSS フィードを出力する

February 6,2008 2:20 AM
Tag:[, , , ]
Permalink

Movable Type でコメント用の RSS フィードを出力するカスタマイズです。ご質問を頂きましたので本エントリーにて紹介致します。

ネットで検索すると過去の記事がいくつかヒットしましたが、それを使ってみると RSS リーダーで正常に読み込めないケースがあったため、新たに作り直してみました。

livedoor readerGoogle リーダーfeedpath Rabbit で正常に購読できることを確認しています。

livedoor reader のサンプル

<br />
livedoor reader のサンプル

Google リーダーのサンプル

<br />
Google リーダーのサンプル

feedpath Rabbit のサンプル

feedpath Rabbit のサンプル

1.設定方法

「デザイン」→「テンプレート」より「インデックステンプレートを作成」をクリック。

次の画面で以下の内容を設定してください。

  • テンプレート名:Comment RSS
  • テンプレートの内容:下記
  • テンプレートの種類:RSS
  • 出力ファイル名:comments.xml(何でもいいです)
  • 再構築オプション:チェック
<$MTHTTPContentType type="application/rss+xml"$><?xml version="1.0" encoding="<$MTPublishCharset$>"?>
<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title><$MTBlogName remove_html="1" encode_xml="1"$></title>
    <link><$MTBlogURL$></link>
    <description><$MTBlogName remove_html="1" encode_xml="1"$>へのコメント</description>
    <language><$MTBlogLanguage ietf="1"$></language>
    <pubDate><MTComments lastn="1"><$MTCommentDate format_name="rfc822"$></MTComments></pubDate>
    <generator>http://www.sixapart.com/movabletype/</generator>
    <MTComments lastn="15" sort_order="descend">
    <item>
      <title>「<MTCommentEntry><$MTEntryTitle remove_html="1" encode_xml="1"$>」へのコメント</MTCommentEntry></title>
      <link><MTCommentEntry><$MTEntryPermalink encode_xml="1"$></MTCommentEntry>#comment-<$MTCommentID$></link>
      <dc:creator><$MTCommentAuthor$></dc:creator>
      <pubDate><$MTCommentDate format_name="rfc822"$></pubDate>
      <guid><MTCommentEntry><$MTEntryPermalink$>#comment-<$MTCommentID$></MTCommentEntry></guid>
      <description><$MTCommentBody remove_html="1" encode_xml="1"$></description>
      <content:encoded><![CDATA[<$MTCommentBody$>]]></content:encoded>
    </item>
    </MTComments>
  </channel>
</rss>

下は設定イメージです。

保存後、再構築すれば完成です。

2.公開方法

テンプレートモジュールの「ヘッダー」にある link 要素のところに青色の link 要素を追加すれば、RSS リーダーで登録しやすくなります。併せてブログ上にコメント用RSSのリンクを表示すると良いでしょう。

    <MTIf name="main_template">
<link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTLink template="atom"$>" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<$MTLink template="rss"$>" />
<link rel="alternate" type="application/rss+xml" title="Comment RSS" href="<$MTLink template="Comment RSS"$>" />
   </MTIf>

title 要素の名称が相応しくないようでしたらご指摘ください。

3.表示コメント数の変更

MTComments タグの lastn モディファイアの値を変更してください。デフォルトは15件にしています。

<MTComments lastn="15" sort_order="descend">

4.link 要素と guid 要素について

item 要素内の link 要素と guid 要素は、ユニークな値でなければならないため、このテンプレートではブログ記事のURLに、フラグメント(リンクの#以降の部分)としてコメントIDを付与した形式にしています。

この要素の設定が、ブログの設定ときちんと合っていれば、RSS リーダーで表示される記事へのリンク(ここでは記事+コメントのリンク)をクリックした時に、ブログの該当記事の該当コメントの位置にジャンプしてくれます。

デフォルトテンプレートではフラグメントは、

<$MTEntryPermalink$>#comment-<$MTCommentID$>

となっていますので、このエントリーで配布しているテンプレートもそれにあわせています。

他のテンプレートを利用している場合はフラグメントを確認して適宜修正してください(修正箇所は2つあります)。ちなみに、当サイトのテンプレートをご利用の場合は、

<$MTEntryPermalink$>#c<$MTCommentID$>

としてください。

5.MTHTTPContentTypeタグについて

先頭の MTHTTPContentType タグは、ダイナミックパブリッシングで出力するときに必要なものです。スタティックパブリッシングの場合は何も処理されないので削除する必要はありません。

6.更新日時について

参考までに、更新日時は、下記の MTCommentDate タグに format_name モディファイアで取得しています。

<$MTCommentDate format_name="rfc822"$>

format_nameモディファイアに"rfc822"を設定しておけば、RSS2.0 の仕様に合った形式で更新日付が出力されます。
format_nameモディファイアには、"rfc822"の他、"iso8601"も設定できます。

6.関連記事

Comments [2] | Trackbacks [0]
2008年2月 4日

小粋空間テンプレートセットのカラムレイアウト変更方法

February 4,2008 2:36 AM
Tag:[, ]
Permalink

Movable Type 4.1 用の配布テンプレートセットで、カラムレイアウトの変更方法についてご質問を頂いてますので、本エントリーにて紹介します。

なお、ここで紹介する方法は暫定版です。時間をみてテンプレートをバージョンアップし、もう少し楽な変更方法に改善したいと思います。

1.カラムレイアウト変更方法

ここでは「メインページ」をサンプルにカラムレイアウトを変更する方法を紹介します。

ブログ管理メニューより「デザイン」→「テンプレート」→「メインページ」を開き、テキストエリア1行目より、下記の MTSetVar テンプレートタグを探し、変数 page_layout の値(赤色部分)を2項に示すレイアウトに書き換えてください。

<MTSetVar name="page_layout" value="layout-three-column">

変数 page_layout でカラムレイアウトを決定しています。

また、他のアーカイブのカラムレイアウトはそれぞれ個別に設定しています。それらのカラムレイアウトを変更する場合は、次のメニューから同じ手順で行ってください。

  • ブログ記事アーカイブ:「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事」
  • 月別アーカイブ/カテゴリーアーカイブ:「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事リスト」
  • ウェブページアーカイブ:「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ウェブページ」
  • コメントプレビュー:「デザイン」→「テンプレート」→「システムテンプレート」→「コメントプレビュー」
  • コメント完了:「デザイン」→「テンプレート」→「システムテンプレート」→「コメント完了」
  • 検索結果:「デザイン」→「テンプレート」→「システムテンプレート」→「検索結果」

なお、コメントプレビュー/コメント完了/検索結果の3テンプレートはデフォルトを1カラムレイアウトにしています。

<MTSetVar name="page_layout" value="layout-one-column">

2.カラムレイアウト

レイアウトの設定値は次の通りです。

属性値レイアウト
layout-three-column 3カラム・固定レイアウト
layout-three-column-liquid 3カラム・リキッドレイアウト
layout-two-column-left 2カラム・固定レイアウト(左サイドバー)
layout-two-column-right 2カラム・固定レイアウト(右サイドバー)
layout-two-column-liquid-left 2カラム・リキッドレイアウト(左サイドバー)
layout-two-column-liquid-right 2カラム・リキッドレイアウト(右サイドバー)
layout-one-column 1カラム・固定レイアウト
layout-one-column-liquid 1カラム・リキッドレイアウト

3.カラム数の変更

3カラムから2カラム/1カラム、あるいはその逆等、カラム数を変更する場合は下記の変更を行ってください。

3.1 2カラム左レイアウトにする場合

1項の該当テンプレートより下記の MTInclude タグを削除。

<$MTInclude module="サイドバー"$>

また、「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー」の内容(一番外側の div 要素と di 要素を除く)を、「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー2」にコピー。

3.2 2カラム右レイアウトにする場合

1項の該当テンプレートより下記の MTInclude タグを削除。

<$MTInclude module="サイドバー2"$>

また、「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー2」の内容(一番外側の div 要素と di 要素を除く)を、「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー」にコピー。

3.3 1カラムレイアウトにする場合

1項の該当テンプレートより下記の MTInclude タグ(2つ)を削除。

<$MTInclude module="サイドバー2"$>
    :
<$MTInclude module="サイドバー"$>
Comments [8] | Trackbacks [0]
2008年2月 1日

Movable Type 4.1 テンプレートセット

February 1,2008 2:55 AM
Tag:[, , ]
Permalink

Movable Type 4.1 用のテンプレートセット配布を開始します。

Movable Type 4.1 で追加されたテンプレートセット機能を用いれば、これまでのようにテキストエリアにテンプレートをペーストせずに、簡単に入れ替えることができます。

1.テンプレートセットのダウンロード

テンプレートセットアーカイブを下記のページからダウンロードしてください。

Movable Type テンプレート

以下、テンプレートセットの利用方法です。

2.テンプレートセットのインストール

ダウンロードしたテンプレートセットアーカイブを解凍し、中にある plugins 配下にある KoikikukanTemplateSet フォルダを Movable Type の plugins フォルダに丸ごとアップロードしてください。

「システムメニュー」→「プラグイン」でプラグインの一覧が表示されるので、「KoikikukanTemplateSet」が表示されていればインストールOKです。

また、images フォルダにある koikikukan.gif(クレジットバナー)をブログディレクトリ(index.html のあるディレクトリ)にアップロードしてください。ブログディレクトリにアップロードすれば、テンプレートを修正せずにクレジットバナーを表示します。

3.テンプレートセットの入れ替え

ここではインストールされた状態で入れ替える方法を説明します。

ブログ管理画面より「デザイン」→「テンプレート」をクリック。

右下にある「ブログのテンプレートを初期化」をクリック。

「新しいテンプレートセットを適用」を選択し、セレクトボックスから「小粋空間テンプレートセット」を選択。「既存のテンプレートのバックアップを作成する」をチェックすると、入れ替え前のテンプレートのバックアップがとれます。
選択後、右下の「次へ」をクリック。

「確認」をクリック。これでテンプレートセットの入れ替えが開始します。

「テンプレートの初期化を完了しました。」が表示されれば完了です。

サイトの再構築アイコンをクリック。

「すべてのファイル」を選択して「再構築」をクリック。

「すべてのファイルを再構築しました。 」が表示されたら再構築完了です。

前の画面の「サイトを見る」をクリックするか、ブログ管理画面の「サイト表示」のアイコンをクリック。

当サイトのテンプレートセットのデザインで表示されれば完了です。デフォルトデザインのままであればブラウザをリロードしてください。


Comments [29] | Trackbacks [2]
2008年1月16日

Movable Type 4.1 の「ブログのテンプレートを初期化」について

January 16,2008 3:17 AM
Tag:[, ]
Permalink

Movable Type 4.1 ではテンプレーセットをプラグインとして配置することによるテンプレートの入れ替え(テンプレートの初期化)が可能になりましたが、選択方法によって入れ替えの動作が若干異なりますので、本エントリーにて紹介致します。

1.テンプレートの初期化

テンプレートの初期化は、「デザイン」→「テンプレート」→「ブログのテンプレートを初期化」のリンクから行います。

「ブログのテンプレートを初期化」のリンクをクリックすると次のような選択画面が表示されます。

以下、選択状態に応じたテンプレートの初期化、およびバックアップを行います。

2.デフォルトテンプレートとの差分だけを新しいテンプレートに入れ替える

1項の画面で、「テンプレートセット既定のブログの初期化」を選択して「次へ」をクリックすると、下のような画面が表示されます。

これは、現在使用中のテンプレートをデフォルトテンプレート、またはプラグインに登録しているテンプレートセットがあればそれを優先して入れ替えます。

この作業を行った後で、テンプレート一覧画面左上にある「テンプレートの初期化(個別テンプレートの初期化)」を行うと、デフォルトテンプレートに戻ります

3.デフォルトテンプレートを新しいテンプレートに入れ替える

1項の画面で、「新しいテンプレートセットを適用」を選択して「次へ」をクリックすると、下のような画面が表示されます。

これは、デフォルトテンプレートがすべて削除され、プラグインに登録しているテンプレートセットをデフォルトテンプレートとして入れ替えます。

ここの作業を行った後で、テンプレート一覧画面左上にある「テンプレートの初期化(個別テンプレートの初期化)」を行うと、プラグインに登録しているテンプレートセットの内容にしか戻りません

また、新しいテンプレートに登録していないテンプレート(JavaScriptやダイナミックパブリッシングエラー等)も削除されてしまいますので、入れ替えには注意が必要です(プラグイン内の記述によってはウィジェット等は残るかもしれませんが詳細は確認できておりません)。

4.既存のテンプレートのバックアップを作成

1項の画面で「既存のテンプレートのバックアップを作成する」をチェックしておけば、これまで使用していたテンプレートのバックアップを作成します。バックアップは[バックアップされたテンプレート]に、すべてが一括して保存されます。

元に戻す時は、ひとつずつ該当のテンプレート種別に手作業で戻さないといけないので、面倒です。

Comments [10] | Trackbacks [0]
2007年12月17日

テンプレートのタグを探す方法

December 17,2007 2:02 AM
Tag:[, , ]
Permalink

最近、「このタグ(例えば body 等)はどのテンプレートありますか?」という質問を時々頂きます。

Movable Type 4 になってから、テンプレートモジュールがデフォルトで利用されるようになったため、バージョン3の時のようにひとつのテンプレートでいわゆるウェブページ全体のマークアップを俯瞰できなくなってしまいました。

保守性は向上した反面、テンプレートの構造に慣れるのが大変かと思われますが、このエントリーでは(X)HTMLやテンプレートタグを探す便利な方法をお伝えします。

1.検索を利用する

あまり知られていないようですが、一番手っ取り早いのはこの方法です。

ブログ管理画面の一番下にある「検索」のリンクをクリック。

「検索」をクリック

検索文字列入力フィールド上にある「テンプレート」をクリック。

「テンプレート」をクリック

検索したいタグ名等(例では body 要素)を入力して「検索」をクリック。

検索文字列入力

これで該当するテンプレートが表示されます。
タグや class 属性等をどこに書いたのか調べる時に、テンプレート編集画面を開いて探し回る必要はありません。

検索結果

上記は body 要素の検索例ですが、単に「body」で検索すると、テンプレートタグの MTEntryBody や MTCommentBody 等が大量にヒットしてしまう(下)ので注意しましょう。

「body」で検索

また、検索フォーム下の「項目を指定する」をチェックすれば、検索範囲を、

  • 出力ファイル名
  • 本文
  • テンプレート名
  • リンクされたファイル名

から選択することができます。

2.TemplateHammer プラグインでひとつのテンプレートにまとめる

TemplateHammer プラグインを導入すれば、あるテンプレートに記述されている MTInclude 先のテンプレートモジュールの内容を、MTInclude 元に展開してくれます。

インストール方法は下記の記事を参考にしてください。

使用方法は、テンプレート一覧より展開したいテンプレートをチェックして、セレクトボックスの「Smash Template」を選択して「Go」をクリック。

下は「Smash Template」実行前の「メインページ」の冒頭部分です。

下は「Smash Template」を実行後の「メインページ」の冒頭部分です。<$MTInclude module="ヘッダー"$> の部分が展開されているのが分かります。

これでテンプレートモジュールによってバラバラになっているテンプレートをひとつのテンプレートで俯瞰することができます。ただし、MTInclude 先の内容は複数のテンプレートに読み込まれることを前提に振り分け処理が多く含まれているので、読みやすくなるかどうかは分かりません(テンプレートを渡り歩く手間はなくなります)。

Comments [0] | Trackbacks [0]
2007年12月 5日

Movable Type 4 配布テンプレート不具合のお知らせ

当ブログで配布中の Movable Type 4 テンプレートに一部不具合がありましたのでお知らせ致します。

この不具合はtruth さんよりご指摘頂きました。ありがとうございました。

1.問題点

コメント投稿フォームで、「ログイン情報を記憶」をチェックしても、次回投稿時に投稿者情報が反映されない。

2.原因

コメント投稿フォームの form 要素の name 属性記述もれにより、name 属性を利用してクッキーに投稿者情報を保持する JavaScript が正常に動作していなかった。

3.対処方法

2007年12月5日以前にテンプレートをダウンロードされた方(=template_4_0_utf8_1_6 以前をご利用の方)は、下記のいずれかの方法で修正を行ってください。

3.1 テンプレートを直接修正する

ブログ管理画面より、「デザイン」→「テンプレート」→「テンプレートモジュール」→「コメント入力フォーム」を開き、下記の青色部分(name 属性)を追加してください。

修正前

    :
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" id="comments-form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">
    :

修正後

    :
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" id="comments-form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">
    :

修正後、「ブログ記事」を再構築してください。

3.2 テンプレートを入れ替える

ブログ管理画面より、「デザイン」→「テンプレート」→「テンプレートモジュール」→「コメント入力フォーム」を開き、「Movable Type テンプレート」より template_4_0_utf8_1_7.zip(または template_4_0_utf8_1_7.lzh)またはそれ以降のバージョンのアーカイブをダウンロードし、解凍した中にある、comment_form.mtml の内容と入れ替えてください。

テンプレートをカスタマイズしている場合は、3.1の方法で修正されることをお勧めします。

以上です。
ご利用の皆様にはご迷惑おかけして申し訳ございませんが、よろしくお願い致します。

Comments [2] | Trackbacks [0]
2007年9月12日

Movable Type 4 公開テンプレート設定方法

September 12,2007 1:55 AM
Tag:[, , ]
Permalink

当サイトで公開している Movable Type 4 テンプレートの設定方法です。

以前、MT3.x 用に「Movable Type 公開テンプレート設定方法」をエントリーしたのですが、MT4に適用するには、内容がかなり乖離しているため、今回 MT4 向けに書き直しました。

初めてテンプレートを入れ替える方を対象にしています。

1.テンプレートとは

設定方法の前に「テンプレート」の説明です。テンプレートは Movable Type によるブログのデザインを決める元ネタです。言い換えると単なるHTML(とスタイルシート)に過ぎないなのですが、HTMLタグとは異なる「MTタグ」というものがあちこちに書かれています。MTタグは、別の場所に保存されている実際の記事(エントリー)や各種データを埋め込むという動作を行ってくれます。

2.テンプレートの種類

テンプレートには下記の5種類があります。

  • インデックステンプレート
  • アーカイブテンプレート
  • テンプレートモジュール
  • システムテンプレート
  • ウィジェット(今回はテンプレート設定対象外のため、説明を省略)

「インデックステンプレート」はメインページやアーカイブインデックス・RSSフィード等のページを作るためのものです。ひとつのインデックス・テンプレートから作られるページはひとつだけです。デフォルトで用意されているテンプレートとは別に、好きなページを作ることができます。

「アーカイブテンプレート」は、カテゴリ別・月別・週別・日別・ブログ記事といった、ある単位のページのかたまり(=アーカイブ)を作るためのものです。ひとつのテンプレートから複数のページが生成されます。例えば1年分の記事を書いて月別アーカイブを作ると、合計12ページ(12ヶ月分)の(X)HTMLができあがります。

このテンプレートも新しく作ることができます。
また、「アーカイブマッピング」を追加することで、デフォルトで用意されているテンプレートに新しいアーカイブ種別を追加することもできます。例えば、「ブログ記事リスト」テンプレートは、デフォルトでは月別・カテゴリ・カテゴリ-月別・ユーザー-月別の4種類のアーカイブページが生成されますが、日別・年別といったアーカイブ種別を追加することも可能です。

「テンプレートモジュール」は、各ページで共通に使われるヘッダーやフッター、サイドバー等、テンプレートの部品が定義されています。MT3では「テンプレートモジュール」はオプション的な役割でしたが、MT4ではこのテンプレートモジュールがデフォルトテンプレートで多用されており、テンプレートが細分化されています。
当サイトの配布テンプレートもデフォルトテンプレートにほぼあわせた構成に変更しています。

「システムテンプレート」はコメントのプレビューや検索結果一覧等を表示します。このテンプレートはシステム固定のため新たにテンプレートを作ることはできません。

3.ダウンロードアーカイブの内容・テンプレートとの対応

Movable Type テンプレートで配布している Movable Type 4 用のダウンロードアーカイブの内容は、下記のようになっています。

/Archives
 entry.mtml
 entry_listing.mtml
 page.mtml
 
/Indexes
 styles.mtml
 main_index.mtml
 
/Modules
 categories.mtml
 comment_detail.mtml
 comment_form.mtml
 comments.mtml
 entry_detail.mtml
 entry_metadata.mtml
 entry_summary.mtml
 footer.mtml
 header.mtml
 page_detail.mtml
 sidebar.mtml
 sidebar2.mtml
 tags.mtml
 trackbacks.mtml
 
/System
 comment_error.mtml
 comment_response.mtml
 search_results.mtml

上記の各ファイルがテンプレートと1対1になっており、ファイルとテンプレートの対応は下記の通りです。これを元に、5項に示す手順にしたがってデフォルトテンプレートと入れ替えてください。

種類テンプレート名ファイル
インデックスメインページmain_index.mtml
スタイルシート(メイン)styles.mtml
アーカイブウェブページpage.mtml
ブログ記事entry.mtml
ブログ記事リストentry_listing.mtml
モジュールウェブページの詳細page_detail.mtml
カテゴリcategories.mtml
コメントcomments.mtml
コメント詳細comment_detail.mtml
コメント入力フォームcomment_form.mtml
サイドバー *sidebar.mtml
サイドバー2 *sidebar2.mtml
タグtags.mtml
トラックバックtrackbacks.mtml
フッターfooter.mtml
ブログ記事のメタデータentry_metadata.mtml
ブログ記事の詳細entry_detail.mtml
ブログ記事の概要entry_summary.mtml
ヘッダーheader.mtml
システムコメントプレビューcomment_preview.mtml
コメント完了comment_response.mtml
検索結果search_results.mtml

*:テンプレートモジュール名を変更、または新規作成する必要があります。

それでは以下にテンプレートの設定方法を記します。

4.管理画面を開く

ブラウザに、アプリケーションディレクトリのURL、または mt.cgi までのURLを入力して実行。

Movable Type の管理画面が開いたら、ナビゲーションより「デザイン→テンプレート」を選択してクリック。

管理画面トップ

これでインデックステンプレート一覧画面に遷移します。以降はこの画面をスタートページとして説明します。

インデックステンプレート一覧画面

5.各テンプレートの設定

上記4種類の各テンプレートの具体的な設定方法について説明します。

5.1 インデックステンプレート(メインページ/スタイルシート(メイン))

インデックステンプレートのメインページの設定方法を説明します。

4項で開いたテンプレート一覧より「メインページ」をクリック。

インデックステンプレート一覧画面

構文強調表示のアイコンから「強調表示なし」を選択し、テキストエリアの構文強調表示を無効にします。構文強調表示のままテキストコピーやペーストを行うと、テキストに含まれている改行が除去されるので、テキストエリアの表示がおかしくなります。
この操作を1回行えば、後は常にこの設定で画面が表示されます。

構文強調表示

テンプレートの内容を全て削除します。下は削除前の状態。

テキストエリアの内容削除

これが削除した状態です。

テキストエリアの内容削除後

そして、Movable Type テンプレートからダウンロードしたテンプレートアーカイブに含まれる「main_index.mtml」を任意のエディタで開き、その内容を全てコピーし、先ほど削除した「テンプレートの内容」へペースト。設定が終わったら保存をクリックします。

注:保存・再構築をクリックすると、まだ未設定のモジュールを読み込もうとするエラーが発生するので、この時点では「保存」をクリックしてください。

「スタイルシート(メイン)」の設定は、インデックステンプレート一覧より「スタイルシート(メイン)」のリンクをクリックします。後はメインページと同様の手順で入れ替えてください。

5.2 アーカイブテンプレート(ウェブページ/ブログ記事/ブログ記事リスト)

ここでは「ブログ記事リスト」の設定方法を例に説明します。

インデックステンプレート一覧画面右にある「クイックフィルタ」の「アーカイブテンプレート」をクリック。

クイックフィルタ

アーカイブテンプレート一覧が表示されるので、「ブログ記事リスト」をクリック。

アーカイブテンプレート一覧

後はメインページと同様、テンプレートの中身を入れ替えて「保存」をクリック。

ブログ記事リスト、ウェブページも同様の設定を行います。

5.3 テンプレートモジュール

「ウェブページの詳細」の設定方法を例に説明します。

インデックステンプレート一覧画面右にある「クイックフィルタ」の「テンプレートモジュール」をクリック。

クイックフィルタ

テンプレートモジュール一覧が表示されるので、「ウェブページの詳細」をクリック。

テンプレートモジュール一覧

後はメインページと同様、テンプレートの中身を入れ替えて「保存」をクリック。他のモジュールも同様の設定を行ってください。

ただし、サイドバー用のモジュールについては、「サイドバー(2カラム)」を、

サイドバー(2カラム)

「サイドバー」に、

サイドバー

「サイドバー(3カラム)」を、

サイドバー(3カラム)

「サイドバー2」に、

サイドバー2

それぞれテンプレート名を変更してください。「サイドバー2」の「2」は半角文字です。また「サイドバー」と「2」の間に空白文字を含まないように気をつけてください。

または「サイドバー(2カラム)」「サイドバー(3カラム)」はそのままで、「サイドバー」「サイドバー2」という新しいテンプレートモジュールを作成してもOKです。

5.4 システムテンプレート(コメントプレビュー/コメント完了/検索結果)

コメントプレビューの設定方法を例に説明します。

インデックステンプレート一覧画面右にある「クイックフィルタ」の「システムテンプレート」をクリック。

クイックフィルタ

システムテンプレート一覧が表示されるので、「コメントプレビュー」をクリック。

システムテンプレート一覧

後はメインページと同様、テンプレートの中身を入れ替えて「保存」をクリック。

コメント完了・検索結果も同様の設定を行います。

6.再構築

ナビゲーションメニューから「サイトを再構築」をクリック。

サイトを再構築

ポップアップ画面が表示されますので、セレクトボックスより「すべてのファイル」を選択して「再構築」をクリック。

再構築

正常に完了すれば成功です。ブログを表示して、入れ替えたテンプレートが反映されていることを確認してください。

7.日別アーカイブページの追加

公開テンプレートの3カラムレイアウトでは、左上にカレンダーを表示するようにしていますが、Movable Type のデフォルト状態ではカレンダー用の「日別アーカイブページ」が生成されないため、カレンダーは表示されません。
ということで、ここでは日別アーカイブページを生成するための設定を行います。

インデックステンプレート一覧画面右にある「クイックフィルタ」の「アーカイブテンプレート」をクリック。

クイックフィルタ

アーカイブテンプレート一覧が表示されるので、「ブログ記事リスト」をクリック。

アーカイブテンプレート一覧

テキストエリア下にある「新しいアーカイブマッピングを作成」をクリック。

ブログ記事リスト

セレクトボックスから「日別」を選択して「追加」をクリック。

ブログ記事リスト

アーカイブマッピングに「日別」が追加されれば完了です。「保存」はクリックしなくても大丈夫みたいですが、心配な方はクリックしておいてください。

アーカイブマッピング

これで6項の再構築を再度実施し、各ページにカレンダーが表示されればOKです。

カレンダーが表示されたブログ

Comments [42] | Trackbacks [1]
2007年8月27日

Movable Type 4 テンプレート不具合と修正のお知らせ

August 27,2007 2:17 AM
Tag:[, ]
Permalink

現在配布中の Movable Type 4 テンプレートに不具合がありました。

事象は「Safari でブログ記事アーカイブ(エントリーアーカイブ)を表示すると、表示が崩れる(フッタがヘッダの直下に表示され、サイドバーがコンテンツの下に表示される)」というものです。

原因はテンプレートモジュール「コメント入力フォーム」の(X)HTMLマークアップ誤りです。ご利用中の皆様には大変ご迷惑をおかけして申し訳ございません。この場をお借りしてお詫び申し上げます。
また情報を提供下さった皆様にお礼申しあげます。ありがとうございました。

現在当サイトで配布中の Movable Type 4 用のテンプレートをご利用の方は、

  1. 「コメント入力フォーム」テンプレートをダウンロードして差し替え
  2. 「コメント入力フォーム」テンプレートを手修正

のいずれかを行ってください。

なお「Movable Type テンプレート」にあるダウンロードアーカイブは修正済です。

1.「コメント入力フォーム」テンプレートをダウンロードして差し替える場合

下記のリンクをクリックして「コメント入力フォーム」テンプレートをダウンロードし、解凍した内容を、現在設定されているテンプレートモジュール「コメント入力フォーム」の内容と入れ替えてください。

comment_form_utf8_1_3.zip
comment_form_utf8_1_3.lzh

2.「コメント入力フォーム」のテンプレートを手修正する場合

「コメント入力フォーム」テンプレート編集画面で下記の修正を行ってください。

修正前

    :
<div id="comment-form-remember-me">
   <p>
      <label for="comment-bake-cookie"><input type="checkbox" id="comment-bake-cookie" name="bakecookie" tabindex="4" accesskey="r" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" onkeypress="if (!this.checked) forgetMe(document.comments_form)" />
      ログイン情報を記憶</label>
</p>
    :

修正後(青色で示す div 終了タグを追加)

    :
<div id="comment-form-remember-me">
   <p>
      <label for="comment-bake-cookie"><input type="checkbox" id="comment-bake-cookie" name="bakecookie" tabindex="4" accesskey="r" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" onkeypress="if (!this.checked) forgetMe(document.comments_form)" />
      ログイン情報を記憶</label>
   </p>
</div>
    :
Comments [2] | Trackbacks [0]
2007年8月13日

Movable Type 4 テンプレート配布再開

August 13,2007 12:55 AM
Tag:[, ]
Permalink

Movable Type 4 テンプレートMovable Type 4 テンプレートの公開を再開します。下記のリンク先よりテンプレートアーカイブをダウンロードし、解凍した中にある .mtml ファイルを任意のエディタで開き、該当するテンプレート編集画面のテキストエリアにペーストしてお使いください。

Movable Type テンプレート

再掲になりますが、MT3テンプレートとの差分を掲載しておきます。その他の注意事項については「Movable Type テンプレート」をご覧ください。

1.3.3x テンプレートからの変更点

1.1 テンプレート構成

Movable Type 4 のテンプレート構造」「Movable Type 4 のテンプレート構造(その2:MTInclude に着目したテンプレート関係図)」でお知らせしている通り、MT4 ではテンプレート構成が大きく変更されています。3.3 からアップグレードした場合は以前の構成が引き継がれますが、新規インストールの場合は、MT3 とかなり異なった構成になります。

今回は新規インストールの方をターゲットにした構成(下記)で配布しています。

ダウンロードアーカイブの内容は下記のようになっています。

/Archives
 entry.mtml
 entry_listing.mtml
 page.mtml
 
/Indexes
 styles.mtml
 main_index.mtml
 
/Modules
 categories.mtml
 comment_detail.mtml
 comment_form.mtml
 comments.mtml
 entry_detail.mtml
 entry_metadata.mtml
 entry_summary.mtml
 footer.mtml
 header.mtml
 page_detail.mtml
 sidebar.mtml
 sidebar2.mtml
 tags.mtml
 trackbacks.mtml
 
/System
 comment_error.mtml
 comment_response.mtml
 search_results.mtml

各ファイルは下記の対応にしたがって、デフォルトテンプレートと入れ替えてください。

種類名前対応ファイル
インデックスメインページmain_index.mtml
スタイルシート(メイン)styles.mtml
アーカイブウェブページpage.mtml
ブログ記事entry.mtml
ブログ記事リストentry_listing.mtml
モジュールウェブページの詳細page_detail.mtml
カテゴリcategories.mtml
コメントcomments.mtml
コメント詳細comment_detail.mtml
コメント入力フォームcomment_form.mtml
サイドバー *sidebar.mtml
サイドバー2 *sidebar2.mtml
タグtags.mtml
トラックバックtrackbacks.mtml
フッターfooter.mtml
ブログ記事のメタデータentry_metadata.mtml
ブログ記事の詳細entry_detail.mtml
ブログ記事の概要entry_summary.mtml
ヘッダーheader.mtml
システムコメントプレビューcomment_preview.mtml
コメント完了comment_response.mtml
検索結果search_results.mtml

*:テンプレートモジュールを新規作成する必要があります(2項参照)。

1.2 投稿者情報(entry_metadata.mtml)

パーマリンクをタイムスタンプから「Permalink」に変更しました。

1.3 コメントフォーム(comment_form.mtml)

認証機能を使用しない場合はコメントフォームが非表示になるようにしました(デフォルトテンプレートと同じ)。

1.4 コメント完了(comment_response.mtml)

コメント投稿が受け付けられた場合、コメント完了画面に遷移する設定が可能ですので、その場合、「受け付けました」という旨のメッセージを表示するようにしました。

2.利用時の注意1

本テンプレートはデフォルトを3カラム固定レイアウトにしており、「サイドバー」「サイドバー2」というテンプレートモジュールを新規作成する必要があります。「サイドバー」は右サイドバー用、「サイドバー2」は左サイドバー用です。

上記の2つのテンプレートモジュールは、下記のタグでインデックス・テンプレート/各アーカイブテンプレートに事前に埋め込んでいます。

<$MTInclude module="サイドバー"$>
<$MTInclude module="サイドバー2"$>

この2つのテンプレートモジュールを作成しておかないと、作業途中でエラーが発生する可能性がありますのでご注意ください。

この説明で分からない場合は、「テンプレートの再構築で「モジュールというテンプレートが見つかりませんでした」というエラーになる場合の対処」を参照ください。

3.利用時の注意2

テンプレートの内容をペーストする際は、テキストエリア右上にある「構文強調表示/強調表示なし」から「強調表示なし」」を必ず選択してください。「構文強調表示」のままペーストすると元ファイルの改行が反映されません。機能が改善されていますので、どちらでも問題なくペーストできます。

構文強調表示

4.その他

本テンプレートはベータ版という位置づけでご利用ください。動作の不具合は随時お知らせ頂ければ幸いですが、問題内容によってはフィードバックできない場合があります(本体にバグがある場合等)。

また、インデックス・テンプレートの「スタイルシート(ベーステーマ)」は使用しておりません。アーカイブインデックスは別途作成したいと思います。

Comments [56] | Trackbacks [10]
2007年7月31日

XHTML 1.0 Strict 版テンプレートをカスタマイズする場合の注意事項

July 31,2007 1:23 AM
Tag:[, , ]
Permalink

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

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

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

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

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

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

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

という風になり、

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

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

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

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

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

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

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

を、静的な表示部分(赤色)を削除して

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

に変更し、4項の

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

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

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

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

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

Comments [2] | Trackbacks [0]
2007年6月19日

Movable Type 4 テンプレート

June 19,2007 2:25 AM
Tag:[, , ]
Permalink

Movable Type 4 テンプレートMovable Type 4 テンプレートを公開します。下記のリンク先よりテンプレートアーカイブをダウンロードし、解凍した中にある .mtml ファイルを任意のエディタで開き、該当するテンプレート編集画面のテキストエリアにペーストしてお使いください。

Movable Type テンプレート

お詫び:ベータ版の利用規約に抵触する可能性があるため、テンプレート配布は中止させて頂きました。ご迷惑をおかけして申し訳ございません。

1.3.3x テンプレートからの変更点

1.1 テンプレート構成

Movable Type 4 のテンプレート構造」「Movable Type 4 のテンプレート構造(その2:MTInclude に着目したテンプレート関係図)」でお知らせしている通り、MT4 ではテンプレート構成が大きく変更されています。3.3 からアップグレードした場合は以前の構成が引き継がれますが、新規インストールの場合は、MT3 とかなり異なった構成になります。
今回は新規インストールの方をターゲットにした構成(下記)で配布しています。

/Archives
 entry.mtml
 entry_listing.mtml
 page.mtml
 
/Indexes
 base_stylesheet.mtml
 main_index.mtml
 
/Modules
 categories.mtml
 comment_detail.mtml
 comment_form.mtml
 comments.mtml
 entry_detail.mtml
 entry_metadata.mtml
 entry_summary.mtml
 footer.mtml
 header.mtml
 sidebar.mtml
 sidebar2.mtml
 tags.mtml
 trackbacks.mtml
 
/System
 comment_error.mtml
 comment_pending.mtml
 comment_preview.mtml
 search_results.mtml

1.2 投稿者情報(entry_metadata.mtml)

パーマリンクをタイムスタンプから「Permalink」に変更しました。

1.3 コメントフォーム(comment_form.mtml)

認証機能を使用しない場合はコメントフォームが非表示になるようにしました(デフォルトテンプレートと同じ)。

1.4 コメント保留(comment_pending.mtml)

コメント投稿が受け付けられた場合もコメント保留画面に遷移するので、その場合、「受け付けました」という旨のメッセージを表示するようにしました。

2.3カラムレイアウト利用時の注意

本テンプレートはデフォルトを3カラム固定レイアウトにしており、その場合、Sidebar2 というモジュールを新規作成する必要があります。
下記のタグを各インデックス・テンプレート/アーカイブテンプレートに埋め込んでいます。

<$MTInclude module="Sidebar2"$>

Sidebar2 を新規作成しない状態で再構築するとエラーになりますのでご注意ください。

3.その他

本テンプレートはベータ版という位置づけでご利用ください。動作の不具合は随時お知らせ頂ければ幸いですが、問題内容によってはフィードバックできない場合があります(本体にバグがある場合等)。

また、インデックス・テンプレートの「Theme Stylesheet」は使用しておりません。

Comments [4] | Trackbacks [2]
2007年5月11日