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

テンプレートの作り方

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

2カラム型テンプレート：カテゴリーアーカイブページの作り方

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

2カラム型テンプレートのカテゴリーアーカイブページの作り方を説明します。
1カラム型と同様に、内容はメインページとほとんど同じです。

ここでは、以下ような左側にメニューがある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$>は、エントリーのタイトルを表示するという意味です。

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

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

</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オリジナルテンプレートを作ろう