Template Bank[テンプレートバンク]
テンプレートの作り方

１カラム型テンプレート：メインページの作り方

Category : テンプレートの作り方

さて、今回は、メインページのカスタマイズに挑戦です。
といっても、さほど難しくありませんので、手順に書かれている通りに、実行してみてくださいね。

では、さっそく、行きましょう！


手順1：Movable Typeのメイン・メニューから、テンプレート⇒メインページをクリックしてください。


手順2：表示されたテンプレートの内容のうち、<body>から</body>の間に記述されている部分を削除します。※<body>と</body>は残しておいてね


手順3：最初に記述するのは、前回スタイルシートで定義した”ページ全体の表示エリア”で、次のように記述します。

<div id="container">
「これから、ページに表示する内容を記述しますよ」っていう意味です。


手順4：次に、タイトルエリア部分を記述します。

<div id="banner">
<h1><$MTBlogName encode_html="1"$></h1>
<h2><$MTBlogDescription$></h2>
</div>
<h1>〜</h1>のことをHTMLのh1タグって呼ぶます。意味は、一番大きな文字で表示するってことです。そして、<$MTBlogName encode_html="1"$>がブログタイトルを表して、<$MTBlogDescription$>がブログの説明を表します。


次に、メインコンテンツを記述していきましょう。


手順5：まずは、メインコンテンツがはじまることを宣言しましょう。

<div id="centent">


手順6：メインコンテンツの最初には、カテゴリー一覧を表示してみましょう。

<h3>カテゴリー</h3>
<MTTopLevelCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li>
<a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>">
<$MTCategoryLabel$></a>
<MTElse>
<li><$MTCategoryLabel$>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTTopLevelCategories>
この部分はちょっとややこしいので、解説は後回しにしますが、この記述で、トップレベルカテゴリーから全てのサブカテゴリーを表示させます。


手順7：カテゴリーの次は、最近のエントリー一覧を表示してみましょう。

<h3>最近のエントリー</h3>
<MTEntries>
<h4>
<a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>">
<$MTEntryTitle$></a>
</h4>
<$MTEntryExcerpt$>
</MTEntries>
この部分もちょっとややこしいので、少しだけ解説します。 <$MTEntryTitle$>は、エントリーのタイトル、<$MTEntryExcerpt$>は、エントリーの概要を表します。 エントリーの概要に入力がない場合は、本文の最初の20文字が表示されます。 ちなみに、本文を表示する場合には、<$MTEntryBody$>、追記は、<$MTEntryMore $>を使います。


手順8：次に、最近のコメントを表示してみましょう。

<h3>最近のコメント</h3>
<MTEntries recently_commented_on="5">
<a href="<$MTEntryLink$>"><MTEntryTitle></a>
<MTComments lastn="5">
　Posted by <a href="<$MTEntryLink$>#c<$MTCommentID pad="1"$>" title="c<$MTCommentID$>">
<MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$><br />
</MTComments>
</MTEntries>
<MTComments lastn="5">のlastn="5"で、最新の５つのコメントを表示します。数字は、自由に変更してください。 <MTCommentAuthor>は、コメントを投稿した人の名前。 <$MTCommentDate format="%m/%d"$><br />は、コメントを投稿した時間


手順9：次に、最近のトラックバックを表示してみましょう。

<h3>最近のトラックバック</h3>
<MTPings lastn="10">
<a href="<$MTPingURL$>" target="_blank" title="t<$MTPingID$>">
<$MTPingTitle$></a>
　from <$MTPingBlogName$> <$MTPingDate format="%m/%d %X"$><br />
</MTPings>
コメントと同様に、<MTPings lastn="10">のlastn="10"で、最新の10のトラックバックを表示します。数字は、自由に変更してください。 <$MTPingURL$>は、トラックバック元のURL。 <$MTPingTitle$>は、トラックバックをしたブログの記事タイトル <$MTPingBlogName$>は、トラックバックをしたブログのタイトル <$MTPingDate format="%m/%d %X"$>は、トラックバックを受けた時間


手順10：ここで、メインコンテンツの記述が終了したので、メインコンテンツの終了宣言をします。

</div>


手順11：最後尾に、フッターを表示しましょう。

<div id="footer">
Copy Right (C) 2006 All rights reserved.
</div>


手順12：最後の最後に、ページ全体の終了を宣言します。

</div>


手順13：以上で、メインページの記述は終了しました。「保存と再構築」ボタンをクリックして、サイトを再構築してください。

エラーが表示されたら、あわてずに、記述が間違っていないか、もう一度良く確認しましょう。

わからないことがあったら、なんでもお気軽に、コメントくださいね。

次は、カテゴリーアーカイブページを作ってみましょう。

«前の記事  １カラム型テンプレート：スタイルシートの作り方
»次の記事  １カラム型テンプレート：カテゴリーアーカイブページの作り方

>>>たった８ページのサイトで、毎月１万円を稼ぐ方法
関連記事
Category

Movable Typeの基礎知識

Movable Typeとは、なぜMovable Typeを使うのか、Movable Typeのしくみ、テンプレートとは、プラグインとは、Movable Typeの基本を初心者にもわかりやすく解説します。

Movable Typeのカスタマイズ

テンプレートの作り方、スタイルシートを使ったデザイン、プラグインの紹介と使い方、モジュール・テンプレートの使い方、１カラム型・２カラム型・３カラム型テンプレートの作り方などを初心者にもわかりやすく解説します。

テンプレートの作り方

1カラム型、2カラム型、3カラム型のテンプレートを作る方法

スタイルシートの作り方

Movable Typeのスタイルシートを使って、オリジナルデザインにしよう

疑問・質問コーナ

インストールのトラブル、記事（エントリー）投稿時のトラブル、サーバエラーやページが表示されないなどのMovable Typeに関する疑問・質問を解決します。

無料テンプレート

Movable Type3.2用のテンプレートを無料配布しています。 １カラム型、２カラム左サイドバー型、２カラム右サイトバー型、３カラム型、フリースタイルなど今後もどんどん追加する予定です。