NEO-SHOCKER.COM で使用している Movable Type の Template を Brush Up と、幾ばくかの Re-Model を行いたいと思い立ったので、骨組みとなるプレーンな Template の作成までを自己流ですが少し記録を取りたいと思います。
■ ベーステーマの選定
まず、ベースとするテンプレートテーマは、ウェブサイトテーマに「クラシックウェブサイト」、ブログテーマに「クラシックブログ」を使います。
■ ベース作成
各テーマを元にして基板となるモノを設定します。
ウェブサイト、ブログテンプレートはデフォルトでは以下の様になっています。
インデックステンプレート ※（）内は出力ファイル名
テンプレートモジュール
アーカイブテンプレート、システムテンプレートは、今は特に手を付けません。
これを以下の様に追加、編集します。
赤字が追加・修正箇所。
インデックステンプレート ※（）内は出力ファイル名
テンプレートモジュール
以上で、テンプレートのベースとなるものが完成です。
■ テンプレートの編集
まず、簡単なところから編集していきます。
真っ白な「HTMLフッター」に以下の 2行を追加します。
</body> </html>
フッターを編集したので、「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)" >コメントテンプレートは、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 に適用してください。適用前にバックアップも必要に応じて取るようにしてください。