Categories: MovableTypeウェブ

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ヘッダー」を続いて編集します。
まず、インデックステンプレートのメインページを開き より上にある 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 に適用してください。適用前にバックアップも必要に応じて取るようにしてください。

Recent Posts

移転を計画中?

新たにドメインを取得し、サイト…

4年 ago

iPhone から Android へ乗り換えた

長く使ってきた iPhone …

6年 ago

Chrome の拡張機能がウェブサイトからインストールを中止

ブラウザのアドオン、拡張機能と…

6年 ago

iOS 12 と macOS 10.14 Mojave 対応機種

iOS 12 と macOS …

6年 ago