トップページ > コメント投稿画面 > 「コメント投稿の確認画面」を修正する NO.53

「コメント投稿の確認画面」を修正する NO.53

2006年05月02日
「コメントを投稿する」の部分でテキストエリアに記入したコメントを「確認」するボタンをクリックして開く確認画面の修正です。下の図は修正前の状態です。
sample63.gif


修正するテンプレートはシステムテンプレートの「コメント・プレビュー」です。
sample64.gif


コメントの確認画面も、他の画面と同じスタイルにしたいと思います。テンプレートの<body>~</body>のあいだのソースを下記のソースと書き換えます。(コピペOKです!)

【コメントプレビューのソース】
<div id="container">
<!--バナー開始-->
<$MTInclude module="header"$>
<!--バナー終了-->

<!--パンくずリスト開始-->
<div class="pankuzu">
<a href="<$MTBlogURL$>">トップページ</a>
</div>
<!--パンくずリスト終了-->

<!--左側開始-->
<div id="left">

<h3>コメントの確認</h3>

<$MTCommentPreviewBody$>
<p>
投稿者:
<$MTCommentPreviewAuthorLink default_name="匿名"$> | <$MTCommentPreviewDate format="%x"$>
</p>

<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$>" />

<MTIfRegistrationAllowed>
<script type="text/javascript">
<!--
writeTypeKeyGreeting(commenter_name, <$MTEntryID$>);
//-->
</script>
</MTIfRegistrationAllowed>

<MTIfCommentsModerated>
<p class="comments-open-moderated">
(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)
</p>
</MTIfCommentsModerated>

<MTIfRegistrationRequired>
<MTElse>
<p>
<label for="comment-author">名前: </label><br/>
<input id="comment-author" name="author" size="30" value="<$MTCommentPreviewAuthor$>" />
</p>
<p>
<label for="comment-email">メールアドレス: </label><br/>
<input id="comment-email" name="email" size="30" value="<$MTCommentPreviewEmail$>" />
</p>
</MTElse>
</MTIfRegistrationRequired>
<p>
<label for="comment-url">URL: </label><br/>
<input id="comment-url" name="url" size="30" value="<$MTCommentPreviewURL$>" />
</p>

<p id="comments-open-text">
<label for="comment-text">コメント: <MTIfAllowCommentHTML>(スタイル用のHTMLタグが使えます)</MTIfAllowCommentHTML></label><br/>
<textarea id="comment-text" name="text" rows="10" cols="30"><$MTCommentPreviewBody autolink="0" sanitize="0" convert_breaks="0"$></textarea>
</p>
<input type="submit" name="preview" id="comment-preview" accesskey="v" value="確認" />
<input type="submit" name="post" id="comment-post" accesskey="s" value="投稿" />
<input type="button" name="cancel" id="comment-cancel" value="取り消し" onclick="window.location='<$MTEntryPermalink$>'" />
</form>
</MTEntryIfCommentsOpen>

<MTIfCommentsActive>
<a id="comments"></a>
<MTComments>
<MTCommentsHeader>
<h3 class="comments-header">コメント</h3>
</MTCommentsHeader>
<a id="c<$MTCommentID pad="1"$>"></a>
<$MTCommentBody$>
<p class="comment-footer">
投稿者:
<$MTCommentAuthorLink default_name="Anonymous"$>
<MTCommentAuthorIdentity> | <a href="#comment-<$MTCommentID$>"><$MTCommentDate format="%x"$></a>
</p>
</MTComments>
</MTIfCommentsActive>
</div>
<!--左側終了-->

<!--右側開始-->
<div id="right">
<$MTInclude module="menu"$>
</div>
<!--右側終了-->

<div style="clear: both; "></div>

<!--フッター開始-->
<$MTInclude module="footer"$>
<!--フッター終了-->

</div>


変更後は下の図のようになりました。クリックすると別窓が開いて実物大で確認できます。
sample65.gif


« 「コメント投稿」の部分を修正する NO.52 | トップページ | 「コメントを受け付けました」のページを修正する NO.54 »