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

１カラム型テンプレート：コメント・プレビューページの作り方

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：そして、いつものように、”ページ全体の表示エリア”の開始を宣言します。

<div id="container">


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

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


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

<div id="centent">


手順7：最初は、投稿したコメントを表示してみます。

<h3>コメントの確認</h3>
<$MTCommentPreviewBody$>
投稿者:
<$MTCommentPreviewAuthorLink default_name="匿名"$> |
<$MTCommentPreviewDate$>
<$MTCommentPreviewBody$>は、コメントの内容を表します。
<$MTCommentPreviewAuthorLink default_name="匿名"$>は、投稿者の名前に入力されたURLのリンクを貼って表示します。名前の入力がなければ「匿名」と表示されます。
<$MTCommentPreviewDate$>は、投稿した日時を表します。


手順8：次に、コメント投稿フォームを表示します。

<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"><!--
writeTypeKeyGreeting(commenter_name, <$MTEntryID$>);
//--></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>
この部分は、JavaScriptやら、formやら難しい記述があるので、とにかく、この記述をコピーして使ってください。


手順9：次に、いままでに投稿されたコメントを表示してみましょう。

<MTIfCommentsActive>
<MTComments>
<MTCommentsHeader>
いままでのコメント
</MTCommentsHeader>
<a id="c<$MTCommentID pad="1"$>"></a>
<$MTCommentBody$>
投稿者 <$MTCommentAuthorLink default_name="Anonymous"$> | <$MTCommentDate$>
</MTComments>
</MTIfCommentsActive>
<MTComments>〜</MTComments>は、この間に記述されている内容をコメントの数分繰り返して表示します。
<MTCommentsHeader>〜</MTCommentsHeader>は、この間に記述されている内容を最初のコメントのときだけ表示します。
<$MTCommentBody$>は、コメントの内容です。
<$MTCommentAuthorLink default_name="Anonymous"$>は、リンク付きの投稿者の名前を表示し、もし、名前が未入力であれば、「Anonymous」と表示されます。
<MTCommentAuthor>は、コメントを投稿した人の名前。
<$MTCommentDate>は、コメントを投稿した時間


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

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


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

</div>


手順12：以上で、メインページの記述は終了しました。「保存」ボタンをクリックしてください。システムテンプレートは、サイトを再構築する必要はありませんので、これで作業は終了です。


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

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

次は、コメント・エラーページを作ってみましょう。

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

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

Movable Typeの基礎知識

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

Movable Typeのカスタマイズ

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

テンプレートの作り方

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

スタイルシートの作り方

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

疑問・質問コーナ

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

無料テンプレート

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