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

テンプレートの作り方

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

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

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

エントリーカイブページは、今までのメインページやカテゴリーアーカイブページと違い、コメントの投稿フォームがあるので、ちょっと複雑になっています。

投稿フォームに関連して、JavaScriptというプログラム言語が使われています。
ここを下手にいじるとコメントが投稿されなくなったり、エラーが表示されたりしますので、気をつけてください。

エントリーアーカイブページを作るときは、投稿フォームがあることに注意してカスタマイズしてくださいね。
ここでは、以下ような左側にメニューがある2カラム型のメインページテンプレートを作成します。

ページ全体枠(#container)

ヘッダー部分(#banner)

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

本体部分(#content)

フッター部分(#footer)

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

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

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

手順３：<body class="layout-one-column" onload="individualArchivesOnLoad(commenter_name)">を次のように変更します。

【変更前】
<body class="layout-one-column" onload="individualArchivesOnLoad(commenter_name)">
【変更後】
<body onload="individualArchivesOnLoad(commenter_name)">

スタイルシートの作成で、layout-one-columnは、定義していませんので、この部分を削除します。

■ページ全体の記述

手順４：そして、いつものように、”ページ全体の表示エリア”の開始を宣言します。

■ヘッダー部分の記述

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

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

ここは、メインページやカテゴリーアーカイブページと同じですね。

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

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

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

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

</div>

■本体部分の記述（エントリー）

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

最初に、本体部分の表示を開始することを宣言します。

手順７：本体部分の表示開始を宣言する。

手順８：次に、エントリーの内容を表示する部分です。

<$MTEntryTitle$>は、エントリーのタイトル、<$MTEntryMore$>は、エントリーの追記を表します。

■本体部分の記述（トラックバック）

次に、トラックバックを表示してみましょう。

手順９：トラックバック関連の表示をする。

<MTIfPingsActive>
トラックバック
<MTIfPingsAccepted>
このエントリーのトラックバックURL:
<$MTEntryTrackbackLink$>
</MTIfPingsAccepted>
<MTPings>
» <a rel="nofollow" href="<$MTPingURL$>"><$MTPingTitle$></a> from <$MTPingBlogName$><br />
<$MTPingExcerpt$> <a rel="nofollow" href="<$MTPingURL$>">[詳しくはこちら]</a>
トラックバック時刻: <a href="#ping-<$MTPingID$>"><$MTPingDate$></a>
</MTPings>
</MTIfPingsActive>

<MTIfPingsAccepted>は、トラックバックの受付URLを表示します。
<$MTPingURL$>は、トラックバック元のURL。
<$MTPingTitle$>は、トラックバックをしたブログの記事タイトル
<$MTPingBlogName$>は、トラックバックをしたブログのタイトル
<$MTPingDate$>は、トラックバックを受けた時間

■本体部分の記述（コメント）

次に、コメントを表示してみましょう。

手順１０：コメントを表示する。

<MTComments>～</MTComments>は、この間に記述されている内容をコメントの数分繰り返して表示します。
<MTCommentsHeader>～</MTCommentsHeader>は、この間に記述されている内容を最初のコメントのときだけ表示します。
<$MTCommentBody$>は、コメントの内容です。
<$MTCommentAuthorLink default_name="Anonymous"$>は、リンク付きの投稿者の名前を表示し、もし、名前が未入力であれば、「Anonymous」と表示されます。
<MTCommentAuthor>は、コメントを投稿した人の名前。
<$MTCommentDate>は、コメントを投稿した時間
この部分は、手順11のコメント投稿フォームとセットで使ってくださいね。

■本体部分の記述（コメント投稿フォーム）

次に、コメントを投稿するためのフォームを表示します。

手順１１：コメント投稿フォームを表示する。

<MTEntryIfCommentsOpen>
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>"
name="comments_form"
onsubmit="if (this.bakecookie.checked) rememberMe(this)">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />
コメントを投稿する
<script type="text/javascript"></script>
<MTIfCommentsModerated>
(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)
</MTIfCommentsModerated>
<table border=0>
<tbody>
<tr>
<td align="right">
<label for="comment-author">名前: </label>
</td>
<td>
<input id="comment-author" name="author" size="30" />
</td>
</tr>
<tr>
<td align="right">
<label for="comment-email">メールアドレス: </label>
</td>
<td>
<input id="comment-email" name="email" size="30" />
</td>
</tr>
<tr>
<td align="right">
<label for="comment-url">URL: </label>
</td>
<td>
<input id="comment-url" name="url" size="30" />
</td>
</tr>
<tr>
<td colspan="2">
<label for="comment-bake-cookie"><input type="checkbox" id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" />この情報を登録しますか?</label>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<label for="comment-text">コメント: <MTIfAllowCommentHTML>(スタイル用のHTMLタグが使えます)</MTIfAllowCommentHTML></label><br />
<textarea id="comment-text" name="text" rows="10" cols="50"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" accesskey="v" name="preview" id="comment-preview" value="確認" />　　
<input type="submit" accesskey="s" name="post" id="comment-post" value="投稿" />
</td>
</tr>
</tbody>
</table>
</form>
</MTEntryIfCommentsOpen>
</MTIfCommentsActive>

この部分は、JavaScriptやら、formやら難しい記述があるので、とにかく、この記述をコピーして使ってください。
なお、手順１０のコメント表示とセットで使ってくださいね。

■フッター部分の記述

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

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

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

</div>

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

手順１５：右側のメイン・メニューから「サイトを再構築」をクリックしてください。

手順１６：表示された画面で、「アーカイブのみを再構築:エントリー」を選択し、【再構築】ボタンをクリックしてください。

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

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

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

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

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

«前の記事 2カラム型テンプレート：カテゴリーアーカイブページの作り方
»次の記事メニューBOXの作り方

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

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