Movable Type Template の Base Template 作成

NEO-SHOCKER.COM で使用している Movable Type の Template を Brush Up と、幾ばくかの Re-Model を行いたいと思い立ったので、骨組みとなるプレーンな Template の作成までを自己流ですが少し記録を取りたいと思います。

■ ベーステーマの選定
まず、ベースとするテンプレートテーマは、ウェブサイトテーマに「クラシックウェブサイト」、ブログテーマに「クラシックブログ」を使います。

■ ベース作成
各テーマを元にして基板となるモノを設定します。
ウェブサイト、ブログテンプレートはデフォルトでは以下の様になっています。

インデックステンプレート ※（）内は出力ファイル名

JavaScript（mt.js）
RSD（rsd.xml）
スタイルシート（styles.css）
メインページ（index.html）
最新記事のフィード（atom.xml）

テンプレートモジュール

HTMLヘッダー
コメント
コメント詳細
サイドバー
トラックバック
バナーフッター
バナーヘッダー
ブログ記事の概要

アーカイブテンプレート、システムテンプレートは、今は特に手を付けません。

これを以下の様に追加、編集します。
赤字が追加・修正箇所。

インデックステンプレート ※（）内は出力ファイル名

JavaScript（js/mt.js）
RSD（rsd.xml）
スタイルシート（css/screen.css）
メインページ（index.html）
最新記事のフィード（rss/atom.xml）

テンプレートモジュール

HTMLヘッダー
HTMLフッター
コメント
コメント詳細
サイドバー
トラックバック
バナーフッター
バナーヘッダー
ブログ記事の概要

以上で、テンプレートのベースとなるものが完成です。

■ テンプレートの編集

まず、簡単なところから編集していきます。
真っ白な「HTMLフッター」に以下の 2行を追加します。

</body>
</html>

フッターを編集したので、「HTMLヘッダー」を続いて編集します。
まず、インデックステンプレートのメインページを開き <$mt:Include module="HTMLヘッダー"$> より上にある DOCTYPE 宣言等をコピーし「HTMLヘッダー」テンプレートの先頭に貼りつけます。
他にも、meta タグ等を追加して以下の様になります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$mt:PublishCharset$>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<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>
<$mt:CCLicenseRDF$>

次に「バナーヘッダー」「バナーフッター」を編集します。
今は、骨組を作成するので内容を削っていき、それぞれ以下の様にします。

バナーヘッダー

<div id="header">
<a href="<$mt:BlogURL$>"><$mt:BlogName encode_html="1"$></a>
<$mt:BlogDescription$>
</div>

バナーフッター

<div id="footer">
</div>

サイドバーもバッサリ切り落とします。

<div id="beta">
</div>

どんどん切り落とします。

ブログ記事概要

<$mt:EntryTrackbackData$>
<a href="<$mt:EntryPermalink$>" rel="bookmark"><$mt:EntryTitle$></a>
<$mt:EntryDate format="%Y.%m.%d"$>
<mt:If tag="EntryBody">
<$mt:EntryBody$>
</mt:If>
<mt:If name="entry_archive">
<mt:EntryIfTagged>
<mt:EntryTags glue=','>
<a href="javascript:void(0)" onclick="location.href='<$mt:TagSearchLink encode_js="1"$>';return false;" rel="tag"><$mt:TagName$></a></mt:EntryTags>
</mt:EntryIfTagged>
</mt:If>
<mt:If tag="EntryMore" convert_breaks="0">
<a href="<$mt:EntryPermalink$>#more" rel="bookmark"><$mt:EntryTitle$></a>
</mt:If>

コメントテンプレートは、JavaScript と CSS の絡みがあるので保留。
トラックバックは使っていないので省略させてもらいます。

HTML ヘッダー、HTML フッターを共通で使えるようにしたので、インデックステンプレート、アーカイブテンプレートの出力ファイル名、パスの拡張子が .html になっているもの全てに組み込んでいきます。
ついでに、枠組みとなる CSS を組み込みつつ、不要な部分を削除していきます。
不要な部分と言っても、自分が使わないだけであって、Movable Type 的には不便になる可能性があるかもしれません。

ブログテンプレートのメインページの場合は、こんな感じです。

<$mt:Include module="HTMLヘッダー"$>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$mt:Link template="rsd"$>" />
<title><$mt:BlogName encode_html="1"$></title>
</head>
<body>
<$mt:Include module="バナーヘッダー"$>
<div id="container">
<div id="alpha">
<mt:Entries>
<$mt:Include module="ブログ記事の概要"$>
</mt:Entries>
<a href="<$mt:Link template="archive_index"$>">アーカイブ</a>
</div>
<$mt:Include module="サイドバー"$>
</div>
<$mt:Include module="バナーフッター"$>
<$mt:Include module="HTMLフッター"$>

最後に「スタイルシート」を開き、既定スタイル CSS が Import されていますが削除し、Reset CSS と Clearfix を組み込みます。個人的によく使うのは以下の 2つです

CSS Tools: Reset CSS
Position Is Everything – Clearfix

以上、この様な感じで作成したのが骨組テンプレートですが、Movable Type 5 にはテーマのエクスポート機能があるので、せっかくだからテーマとして書き出してみました。

SkeleTone Web Site Template 1.0 (35KB)
SkeleTone Blog Template 1.0 (45KB)

それぞれ、インデックステンプレート、アーカイブテンプレート、テンプレートモジュールの骨組と、クラシックウェブサイト、クラシックブログのシステムテンプレート、ウィジェットテンプレートが入っています。

テーマを適用するには、ダウンロードしたファイルを解凍し、Movable Type の Theme フォルダ（http://yourdomain.com/cgi-bin/mt/theme/）にアップロード後、デザインメニューの「テーマ」から適用してください。

テーマを適用する場合、運用中のウェブサイト、ブログには適用しないようにしてください。
本当に何もないので、レイアウトが全て無くなります。
必ず、新規作成したウェブサイト、ブログに適用するか、ローカル環境等の別に設置した Movable Type に適用してください。適用前にバックアップも必要に応じて取るようにしてください。