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

テンプレートの作り方

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

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

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

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

エントリーアーカイブページを作るときは、投稿フォームがあることに注意してカスタマイズしてくださいね。

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

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

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

手順3：<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は、定義していませんので、この部分を削除します。

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

手順5：これも、メインページやカテゴリーアーカイブページと同じように、タイトルエリア部分を記述します。

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

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

手順7：メインコンテンツのトップには、カテゴリー一覧を表示してみます。

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

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

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

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

手順9：次は、トラックバック関連の表示をしましょう。

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

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

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

手順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やら難しい記述があるので、とにかく、この記述をコピーして使ってください。
なお、手順10のコメント表示とセットで使ってくださいね。

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

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

</div>

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

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

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

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

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

次は、コメントプレビューページを作ってみましょう。

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

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

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

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

Movable Typeの基礎知識

Movable Typeのカスタマイズ

テンプレートの作り方

スタイルシートの作り方

疑問・質問コーナ

無料テンプレート