FC2ブログのテンプレート工房

コメント投稿欄の「名前」や「URL」を左側へ、各入力欄をその右側へ配置する方法を紹介します。
この方法はキイタ？オクサン アラヤダワァのちゃんさんが教えてくれました。

※このカスタマイズは当サイトのテンプレート、lightframe用に書かれています。


HTMLを編集します。
<!--▼コメント投稿▼-->から<!--▲コメント投稿▲-->まで、及び<!--▼コメント編集▼-->から<!--▲コメント編集▲-->までを以下に差し替えてください。

<!--▼コメント投稿▼-->
<div class="comment_outline">
<div class="comment_title">コメントの投稿</div>
<div class="comment_body">
<div class="comment_text">
<form method="post" action="./" name="comment_form">
<input type="hidden" name="mode" value="regist" />
<input type="hidden" name="comment[no]" value="<%pno>" />
<table border="0" align="center" cellpadding="5" cellspacing="0">
<tr><td width="50"><label for="name">名前：</label></td>
<td width="250"><input id="name" type="text" name="comment[name]" size="30" value="<%cookie_name>" />
</td></tr><tr><td>
<label for="subject">題名：</label>
</td><td>
<input id="subject" type="text" name="comment[title]" size="30" />
</td></tr><tr><td>
<label for="mail">サイト名：</label>
</td><td>
<script language="JavaScript"><!--
document.write('<input id="mail" type="text" name="comment[mail]" size="30" value="'+myGetCookie("web_name")+'" /><br />');
// --></script>
</td></tr><tr><td>URL：
</td><td>
<input id="url" type="text" name="comment[url]" size="30" value="<%cookie_url>" />
</td></tr><tr><td>コメント：
</td><td>
<script type="text/javascript" src="http://blog44.fc2.com/load.js"></script><br />
<textarea id="comment" cols="40" rows="8" name="comment[body]"></textarea>
</td></tr><tr><td>パスワード：
</td><td><input id="pass" type="password" name="comment[pass]" size="20" />
</td></tr><tr><td>SECRET：
</td><td>
<input id="himitu" type="checkbox" name="comment[himitu]" value="管理者にだけ表示を許可する" />管理者にだけ表示を許可する
</td></tr><tr><td>
</td><td>
<input type="submit" value="送信" onClick="mySetCookie('web_name',document.comment_form.mail.value,'365')" />
</td></tr></table>
</form>
</div><!--/comment_text-->
</div><!--/comment_body-->
</div><!--/comment_outline-->
<!--/comment_area-->
<!--▲コメント投稿▲-->

<!--▼コメント編集▼-->
<!--edit_area-->
<div class="comment_outline">
<div class="comment_title">コメントの編集</div>
<div class="comment_body">
<div class="comment_text">
<form method="post" action="./" name="comment_form">
<input type="hidden" name="mode" value="edit" />
<input type="hidden" name="mode2" value="edited" />
<input type="hidden" name="edit[rno]" value="<%eno>" />
<table border="0" align="center" cellpadding="5" cellspacing="0"><tr><td>
<label for="name">名前:</label></td><td>
<input id="name" type="text" name="edit[name]" size="30" value="<%edit_name>" /></td></tr><tr><td>
<label for="mail">サイト名:</label></td><td>
<script language="JavaScript"><!--
document.write('<input id="mail" type="text" name="edit[mail]" size="30" value="'+myGetCookie("web_name")+'" /><br />');
// --></script>
</td></tr><tr><td>
<label for="subject">題名:</label></td><td>
<input id="subject" type="text" name="edit[title]" size="30" value="<%edit_title>" /></td></tr><tr><td>
<label for="url">URL:</label></td><td>
<input id="url" type="text" name="edit[url]" size="30" value="<%edit_url>" /></td></tr><tr><td>
<label for="comment">COMMENT:</label></td><td>
<textarea id="comment" cols="40" rows="8" name="edit[body]"><%edit_body></textarea></td></tr><tr><td>
<label for="pass">PASS:</label></tb><td>
<input id="pass" type="password" name="edit[pass]" size="20" /></td></tr><tr><td>
<label for="himitu">SECRET:</label></td><td>
<input id="himitu" type="checkbox" name="edit[himitu]" value="管理者にだけ表示を許可する" />管理者にだけ表示を許可する</td></tr>
<tr><td></td><td>
<input type="submit" value="送信" />
<input type="submit" name="edit[delete]" value="削除" />
</td></tr></table>
</form>
</div><!--/comment_text-->
</div><!--/comment_body-->
</div><!--/comment_outline-->
<!--/edit_area-->
<!--▲コメント編集▲-->

関連記事

• プラグイン３の幅を広げる(lightframe) (2009/05/18)
• 背景に固定した画像を内側にも表示する (2009/05/07)
• 一行空けて追記を表示 (2009/05/01)
• コメント投稿・編集欄のレイアウト (2009/04/29)
• コメントとコメントの間隔を調整する (2009/04/09)
• 角を丸くする (lightframeシリーズ) (2009/03/27)
• lightframeの左右カラム幅を固定、記事カラム幅を可変にする (2007/05/05)