すでにMTはインストール済みであることを前提に話を進めてみたいと思います。ここはカスタマイズを私なりの方法で解説したいと思います。練習用に、新しいウェッブログを作成してください。ちなみにこれは３．１でかかれていますが、テンプレートは、

このテンプレートをカスタマイズ・・・というか１から作っていく作業をしてみましょう。まずは、メインページのテンプレートをいじってみましょう。メインページのデフォルトの内容は一度全部削除します。(別のウェッブログを作成すれば、また、デェフォルとの内容は出てきます。)
まずはお決まりのヘッダー部分を記述します。 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" /> <title><$MTBlogName encode_html="1"$></title> <link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" /> <link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTBlogURL$>atom.xml" /> <link rel="alternate" type="application/rss+xml" title="RSS 1.0" href="<$MTBlogURL$>index.rdf" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<$MTBlogURL$>index.xml" /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$MTBlogURL$>rsd.xml" /> </head>
次に各ブロックに分ける記述を入れて行きましょう。下記の図のようなブロックを作って見ます。
まず、３つのたてブロックにするために。idを作ります。ボディのidを３つなので、threeとしておきましたが、これは何でもかまいません。スタイルシートを呼び出すときに、３ブロック用のものを読み出すためのidです。メインページ以外では、２ブロックのものも利用するので、３ブロックと、２ブロック用のスタイルシートを作っておき、どちらを読み込むか区別するようにするためです。このメインページを３ブロックとしたので、こうしてあります。 <body id="three"> MTの表示部分全体をidでcontainerとして、名前をつけました。スタイルシートで、containerというidで、スタイルを指定できるようになります。 <div id="container"> ヘッダー部分の指定を記述します。!は後で、カスタマイズしやすいように、コメントをいれるための表記であるのでなくてもかまいません。 <!-- ヘッダー--> ヘッダーのid。 <div id="banner"> テキストﾉタイトルのスタイルを指定するidです。 <div id="title"> $MTはMT独自のタグです。h1の文字(h1の文字サイズは後でスタイルシートで指定できます。)タイトルにリンクをつけて、タイトルクリックでトップに戻れるようにリンクをしています。URL、タイトルネーム、そしてh2文字でタイトルしたのサブタイトルというか、コメントをタイトル下に記述させています。 <h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1> <h2><$MTBlogDescription$></h2> </div> </div> タイトルの下に、メニューを出すために、１つブロックを設けました。必要なければ削除してかまいません。 idをnaviとつけました。 <!-- なびー--> <div id="navi"> ナビのブロックの中に、メニューとして、一番上のカテゴリーを読み出して、表記する指定です。 <!--メニュー--> <div id="menu"> <MTTopLevelCategories> \|<a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a>\| </MTTopLevelCategories> </div> </div> 上図参照mainのブロック <div id="main"> 上図参照leftのブロック <!-- 左サイドバー--> <div id="left" class="sidebar"> ここに左サイドに入れたいパーツをいれます。ここにはエントリーかカテゴリーを一番上にいれるといいでしょう。 </div> 上図参照centerのブロック <!-- コンテンツ --> <div id="center" class="content"> 上図参照centerのブロック <!-- prー--> <div id="pr"> ここは広告やアフィリなどをいれるといいでしょう。 </div> 記事を入れるとよいでしょう。 </div> 上図参照rightのブロック <!-- 右サイドバー--> <div id="right" class="sidebar"> 参考に右サイド一番上にお気に入りをいれてみました。 <!-- ブックマーク --> <INPUT type="button" value="お気に入りに追加" onclick="AddFav()"> <script language="JavaScript"> <!-- function AddFav(){ window.external.AddFavorite('http://URL/','【サイト名】'); } //--> </script> ここにはカテゴリーやカレンダーなどお好みのパーツをいれましょう。メルマガの登録フォームでもいいですね。 Rssやライセンスをいれました。 <div id="feed"> <a href="<$MTBlogURL$>index.rdf">Syndicate this site (XML)</a> </div> <MTBlogIfCCLicense> <div class="link-note"> <a href="<$MTBlogCCLicenseURL$>"><img alt="Creative Commons License" src="<$MTBlogCCLicenseImage$>" /></a><br /> このウェブログのライセンス: <a href="<$MTBlogCCLicenseURL$>">Creative Commons License</a>. </div> </MTBlogIfCCLicense> <div id="powered"> Powered by<br /><a href="http://www.movabletype.jp">Movable Type <$MTVersion$></a><br /> </div> </div> 上図参照footerのブロック <!-- フッター --> <div id="footer"> カウンターや相互リンクをいれるといいでしょう。 </div> </body> </html> もし、どこかミスがあったらすんまそん。

すでにMTはインストール済みであることを前提に話を進めてみたいと思います。ここはカスタマイズを私なりの方法で解説したいと思います。練習用に、新しいウェッブログを作成してください。ちなみにこれは３．１でかかれていますが、テンプレートは、

このテンプレートをカスタマイズ・・・というか１から作っていく作業をしてみましょう。まずは、メインページのテンプレートをいじってみましょう。メインページのデフォルトの内容は一度全部削除します。(別のウェッブログを作成すれば、また、デェフォルとの内容は出てきます。)
まずはお決まりのヘッダー部分を記述します。 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" /> <title><$MTBlogName encode_html="1"$></title> <link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" /> <link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTBlogURL$>atom.xml" /> <link rel="alternate" type="application/rss+xml" title="RSS 1.0" href="<$MTBlogURL$>index.rdf" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<$MTBlogURL$>index.xml" /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$MTBlogURL$>rsd.xml" /> </head>
次に各ブロックに分ける記述を入れて行きましょう。下記の図のようなブロックを作って見ます。
まず、３つのたてブロックにするために。idを作ります。ボディのidを３つなので、threeとしておきましたが、これは何でもかまいません。スタイルシートを呼び出すときに、３ブロック用のものを読み出すためのidです。メインページ以外では、２ブロックのものも利用するので、３ブロックと、２ブロック用のスタイルシートを作っておき、どちらを読み込むか区別するようにするためです。このメインページを３ブロックとしたので、こうしてあります。 <body id="three"> MTの表示部分全体をidでcontainerとして、名前をつけました。スタイルシートで、containerというidで、スタイルを指定できるようになります。 <div id="container"> ヘッダー部分の指定を記述します。!は後で、カスタマイズしやすいように、コメントをいれるための表記であるのでなくてもかまいません。 <!-- ヘッダー--> ヘッダーのid。 <div id="banner"> テキストﾉタイトルのスタイルを指定するidです。 <div id="title"> $MTはMT独自のタグです。h1の文字(h1の文字サイズは後でスタイルシートで指定できます。)タイトルにリンクをつけて、タイトルクリックでトップに戻れるようにリンクをしています。URL、タイトルネーム、そしてh2文字でタイトルしたのサブタイトルというか、コメントをタイトル下に記述させています。 <h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1> <h2><$MTBlogDescription$></h2> </div> </div> タイトルの下に、メニューを出すために、１つブロックを設けました。必要なければ削除してかまいません。 idをnaviとつけました。 <!-- なびー--> <div id="navi"> ナビのブロックの中に、メニューとして、一番上のカテゴリーを読み出して、表記する指定です。 <!--メニュー--> <div id="menu"> <MTTopLevelCategories> \|<a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a>\| </MTTopLevelCategories> </div> </div> 上図参照mainのブロック <div id="main"> 上図参照leftのブロック <!-- 左サイドバー--> <div id="left" class="sidebar"> ここに左サイドに入れたいパーツをいれます。ここにはエントリーかカテゴリーを一番上にいれるといいでしょう。 </div> 上図参照centerのブロック <!-- コンテンツ --> <div id="center" class="content"> 上図参照centerのブロック <!-- prー--> <div id="pr"> ここは広告やアフィリなどをいれるといいでしょう。 </div> 記事を入れるとよいでしょう。 </div> 上図参照rightのブロック <!-- 右サイドバー--> <div id="right" class="sidebar"> 参考に右サイド一番上にお気に入りをいれてみました。 <!-- ブックマーク --> <INPUT type="button" value="お気に入りに追加" onclick="AddFav()"> <script language="JavaScript"> <!-- function AddFav(){ window.external.AddFavorite('http://URL/','【サイト名】'); } //--> </script> ここにはカテゴリーやカレンダーなどお好みのパーツをいれましょう。メルマガの登録フォームでもいいですね。 Rssやライセンスをいれました。 <div id="feed"> <a href="<$MTBlogURL$>index.rdf">Syndicate this site (XML)</a> </div> <MTBlogIfCCLicense> <div class="link-note"> <a href="<$MTBlogCCLicenseURL$>"><img alt="Creative Commons License" src="<$MTBlogCCLicenseImage$>" /></a><br /> このウェブログのライセンス: <a href="<$MTBlogCCLicenseURL$>">Creative Commons License</a>. </div> </MTBlogIfCCLicense> <div id="powered"> Powered by<br /><a href="http://www.movabletype.jp">Movable Type <$MTVersion$></a><br /> </div> </div> 上図参照footerのブロック <!-- フッター --> <div id="footer"> カウンターや相互リンクをいれるといいでしょう。 </div> </body> </html> もし、どこかミスがあったらすんまそん。