2カラム型テンプレート：メインページの作り方 :MovableTypeオリジナルテンプレートを作ろう

テンプレートの作り方

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

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

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

2カラム型テンプレートのメインページの作り方を説明します。
ここをマスターすれば、Movable Typeもすぐに攻略できるようになります。

ここでは、以下ような左側にメニューがある2カラム型のメインページテンプレートを作成します。

ページ全体枠(#container)

ヘッダー部分(#banner)

左側メニュー
部分(#leftbar)

本体部分(#content)

フッター部分(#footer)

■デフォルトスタイルシートの削除

他人が作ったテンプレートを修正するのは、ものすごく大変です。
自分が作ったテンプレートであれば、どのになにを記述してあるのかすぐに検討がつきますので、後でのカスタマイズもすぐにできますよね。

ということで、標準のテンプレートは、あっさりと削除しましょう。

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

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

■ページ全体の記述

手順３：最初に記述するのは、ページ全体に対する記述です。
スタイルシートで定義した、#containerを使います。

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

■ヘッダー部分の記述

手順４：次に、ブログタイトルや説明を表示するヘッダー部分を記述します。

ヘッダーには、ブログのタイトルとブログの説明文を表示してみましょう。

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

■左側メニュー部分の記述（カテゴリー一覧）

次に、左側メニュー部分を記述します。

左側メニューには、カテゴリー一覧と最近のエントリー一覧、最近のコメント、それに最近のトラックバックを表示してみます。

手順５：まずは、左側メニューの記述がはじまることを宣言しましょう。

手順６：左側メニューの最初には、カテゴリー一覧を表示してみましょう。

<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>

この部分はちょっとややこしいので、解説は省略しますが、この記述で、トップレベルカテゴリーから全てのサブカテゴリーを表示させます。

■左側メニュー部分の記述（最近のエントリー一覧）

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

<h3>最近のエントリー</h3>
<MTEntries>
<a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>">
<$MTEntryTitle$></a>
</MTEntries>

この部分もちょっとややこしいので、少しだけ解説します。 <$MTEntryTitle$>は、エントリーのタイトルを表示するという意味です。

■左側メニュー部分の記述（最近のコメント一覧）

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

<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 />は、コメントを投稿した時間

■左側メニュー部分の記述（最近のトラックバック一覧）

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

<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"$>は、トラックバックを受けた時間

■左側メニュー部分の記述終了

手順１０：ここで、左側メニュー部分の記述が終了したので、左側メニュー部分の終了を宣言します。

</div>

■本体部分の記述

次に、本体部分を記述します。

本体部分には、新しく投稿された記事を表示してみます。
表示する内容は、エントリータイトル、エントリー概要です。

手順１１：新着記事を表示する。

<h3>最新の記事</h3>
<MTEntries>
<h4>
<a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>">
<$MTEntryTitle$></a>
</h4>
<$MTEntryExcerpt$>
</MTEntries>

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

■フッター部分の記述

ヘッダー、左側メニュー、本体と表示し終わりましたので、最後にフッターを表示します。

通常、フッターには、Copy Rightなどの著作権を表示しますね。

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

■ページ全体に対する記述の終了宣言

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

</div>

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

★ワンポイントアドバイス（左に本体、右にメニューを表示するには？）

左側に本体、右側にメニューを表示する場合はどうしたらいいのでしょうか？

答えは、左側メニューの記述と本体の記述の順番を逆にします。

【左側：メニュー、右側：本体の場合の記述順】
　ヘッダー(#banner)　⇒　左側メニュー(#leftbar)　⇒　本体(#content)　⇒　フッター(#footer)

【左側：本体、右側：メニューの場合の記述順】
　ヘッダー(#banner)　⇒　本体(#content)　⇒　右側メニュー(#rightbar)　⇒　フッター(#footer)

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

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

MovableTypeオリジナルテンプレートを作ろう