上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 FC2テンプレートを実際に作ってみる企画です。
 はじめから読むには、以下からどうぞ。
FC2テンプレートを1から作ってみる

 今回はコメントフォームをデザインします。
 やることは、今までと全く同じなのですが、コメントフォームは「最適化」をする必要がない部分でもあるため、より自由にHTMLタグを組み合わせてもリスクが少ない部分。
 やりたいデザインに応じ、自由にHTMLを使えます。




アイテムの確認と変数の組み上げ


 まずは、いつものように「どういうアイテムが必要か?」を考え、「変数を調べて組み立て」をしていきます。

FC2ブログで、コメントフォームで入れられるアイテム

  • コメントのタイトル
  • コメントの本文
  • 投稿者の名前
  • 投稿者のメール
  • 投稿者のHP,BLOGアドレス
  • 再編集用のパスワード
  • 非公開のチェックボックス
  • 送信ボタン




変数の組み上げ

<!--comment_area-->
<form action="./" method="post" name="comment_form" id="comment_form">
<input type="hidden" name="mode" value="regist" />
<input type="hidden" name="comment[no]" value="<%pno>" />

<label for="name"><%template_title> </label>
<input id="subject" name="comment[title]" type="text" size="30" />

<label>Font & Icon</label>
<script type="text/javascript" src="<%template_comment_js>"></script>

<label for="comment"><%template_body></label>
<textarea id="comment" cols="50" rows="5" name="comment[body]"></textarea>

<label for="name"><%template_name></label>
<input id="name" type="text" name="comment[name]" size="30" value="<%cookie_name>" />

<label for="mail"><%template_address></label>
<input id="mail" type="text" name="comment[mail]" size="30" value="<%cookie_mail>" />

<label for="url">URL</label>
<input id="url" type="text" name="comment[url]" size="30" value="<%cookie_url>" />

<label for="pass"><%template_password></label>
<input id="pass" type="password" name="comment[pass]" size="20" />

<label for="himitu"><%template_private></label>
<input id="himitu" type="checkbox" name="edit[himitu]" /> <%template_private_check>

<input type="submit" value="<%template_post_comment>" />

</form>
<!--/comment_area-->




タイトル



フォント・アイコン

コメント文


名前



メール



アドレス


パスワード


非公開チェック


送信ボタン






デザインとタグの取り合わせを考える


 このそれぞれのアイテムを使って、自由にレイアウトを考えることが可能です。

■ボックスを設定して、自由自在に配置したいなら、「position」
positionを使いこなす

■表のように整理したいなら「table」
テーブルタグを理解してみる

■同じく、ブロックフロートでサイズを指定して整形するなら「div」
divボックスの作り方


 とりあえず、一番使用されることが多いであろう、「table」タグで組んだHTMLサンプルが以下です。

<!--comment_area-->
<form action="./" method="post" name="comment_form" id="comment_form">
<input type="hidden" name="mode" value="regist" />
<input type="hidden" name="comment[no]" value="<%pno>" />

<table><tr>
<td><label for="name"><%template_title> </label></td>
<td><input id="subject" name="comment[title]" type="text" size="30" /></td>

<tr><td><label>Font & Icon</label></td>
<td><script type="text/javascript" src="<%template_comment_js>"></script></td>

<tr><td><label for="comment"><%template_body> </label></td>
<td><textarea id="comment" cols="50" rows="5" name="comment[body]"></textarea></td>

<tr><td><label for="name"><%template_name> </label></td>
<td><input id="name" type="text" name="comment[name]" size="30" value="<%cookie_name>" /></td>

<tr><td><label for="mail"><%template_address></label></td>
<td><input id="mail" type="text" name="comment[mail]" size="30" value="<%cookie_mail>" /></td>

<tr><td><label for="url">URL</label></td>
<td><input id="url" type="text" name="comment[url]" size="30" value="<%cookie_url>" /></td>

<tr><td><label for="pass"><%template_password></label></td>
<td><input id="pass" type="password" name="comment[pass]" size="20" /></td>

<tr><td><label for="himitu"><%template_private> </label></td>
<td><input id="himitu" type="checkbox" name="comment[himitu]" /> <%template_private_check></td>

<tr><td></td>
<td class="form_btn"><input type="submit" value="<%template_post_comment> " /></td>

</tr></table>
</form>
<!--/comment_area-->


 これら、「<td>」の部分に細かくクラスを当て、CSSで整形すれば、当サイトのコメントフォームのようなモノも出来ます。
 また、これら「<table><tr><td>」を廃し、「divブロック」で細かくコーティングすれば、「position」や「ブロックフロート」で整形することも可能です。



※エディットモード(コメントの再編集)の製作を忘れないように

 エディットモードにテーブルタグを入れたモノが以下になります。

<!--edit_area-->
<form action="./" method="post" name="comment_form" id="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>
<tr><td><label for="name"><%template_title></label></td>
<td><input id="subject" type="text" name="edit[title]" size="30" value="<%edit_title>" /></td>

<tr><td><label>Font & Icon</label></td>
<td><script type="text/javascript" src="<%template_comment_js>"></script></td>

<tr><td><label for="comment"><%template_body></label></td>
<td><textarea id="comment" cols="50" rows="5" name="edit[body]"><%edit_body></textarea></td>

<tr><td><label for="name"><%template_name></label></td>
<td><input id="edit[name]" type="text" name="edit[name]" size="30" value="<%edit_name>" /></td>

<tr><td><label for="mail"><%template_address></label></td>
<td><input id="mail" type="text" name="edit[mail]" size="30" value="<%edit_mail>" /></td>

<tr><td><label for="url">URL</label></td>
<td><input id="url" type="text" name="edit[url]" size="30" value="<%edit_url>" /></td>

<tr><td><label for="pass"><%template_password></label></td>
<td><input id="pass" type="password" name="edit[pass]" size="20" /></td>

<tr><td><label for="himitu"><%template_private></label></td>
<td><input id="himitu" type="checkbox" name="edit[himitu]" /> <%template_private_check></td>

<tr><td></td>
<td><input type="submit" value="<%template_send>" /><input type="submit" name="edit[delete]" value="<%template_delete>" /></td>
</table>
</form>
<!--edit_area-->





■これで、ひとまずブログとして成立する最低限の形は完成です。これらの機能に、次章からの最低限の最適化を施し、CSSに若干スタイルを当てて見れるようにしたテンプレートがこちらです。
カスタム全部のせ


■次回からは、FC2ブログサービスを使って、どんな便利アイテムを追加していけるのかを検証していきたいと思います。
FC2テンプレートに機能を盛り込む
このエントリーをはてなブックマークに追加
Sat.01.08.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。