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行を追加します。
1 2 | </body></html> |
フッターを編集したので、「HTMLヘッダー」を続いて編集します。
まず、インデックステンプレートのメインページを開き <$mt:Include module="HTMLヘッダー"$> より上にある DOCTYPE 宣言等をコピーし「HTMLヘッダー」テンプレートの先頭に貼りつけます。
他にも、meta タグ等を追加して以下の様になります。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<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$> |
次に「バナーヘッダー」「バナーフッター」を編集します。
今は、骨組を作成するので内容を削っていき、それぞれ以下の様にします。
バナーヘッダー
1 2 3 4 | <div id="header"><a href="<$mt:BlogURL$>"><$mt:BlogName encode_html="1"$></a><$mt:BlogDescription$></div> |
バナーフッター
1 2 | <div id="footer"></div> |
サイドバーもバッサリ切り落とします。
1 2 | <div id="beta"></div> |
どんどん切り落とします。
ブログ記事概要
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 | <$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 的には不便になる可能性があるかもしれません。
ブログテンプレートのメインページの場合は、こんな感じです。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 | <$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 に適用してください。適用前にバックアップも必要に応じて取るようにしてください。
