PHP+Ajaxゲストブック（その7・スタイルシートのカスタマイズ）

PHP+Ajaxゲストブックを各Blogのサイドバーに組み込む手順を紹介してきましたが、スタイルシートをカスタマイズすることで、さまざまなテンプレートのデザインに合わせることができます。

1.サイドバー版ゲストブックのタグの構造

サイドバー版ゲストブックでは、以下のような構造のタグが出力されるようになっています。

<h3 class="block-header">コメント</h3>
<p class="normal">(○○件中の□□-△△件目)</p>
<p class="normal">
<a href="#" onclick="return ag_obj.scroll_to_comment_form();">コメント投稿フォームはこちら</a><br />
<a href="#" onclick="return ag_obj.delete_view_page();" />コメントの削除はこちら</a>
</p>

<!-- ここから後の部分がコメントごとに繰り返される -->
<div class="post-content">
<p class="post-header">■コメントのタイトル</p>
<div class="post-body">
<p>コメントの本文</p>
</div>
<p class="post-footer">No.コメントの番号 | 投稿した人の名前 | 投稿された日付</p>
</div><!-- /post-content -->
<!-- ここまでの部分がコメントごとに繰り返される -->

<!-- ページ選択部分開始 -->
<form name="page_sel" id="page_sel" action="/" method="get">
<p class="normal">
<a href="#" onclick="return ag_obj.view_page(1);">«</a> <a href="#" onclick="return ag_obj.view_page({$prev_page});"><</a>
<select name="page_no" id="page_no" onchange="return ag_obj.view_page(document.page_sel.page_no.value);">
<option value="{$page_ctr}">{$page_ctr}</option>
</select>
<a href="#" onclick="return ag_obj.view_page({$next_page});">></a> <a href="#" onclick="return ag_obj.view_page({$max_page});">»</a>
</p>
</form>
<!-- ページ選択部分終了 -->

<!-- コメント投稿フォーム開始 -->
<h3 id="guestbook_head" class="block-header">コメントの投稿</h3>
<form name="guestbook_form" id="guestbook_form" method="post" action="">
<p class="form-input">
<label for="author">お名前</label><br />
<input type="text" id="author" name="author" value="" />
</p>
<p class="form-input">
<label for="title">題名</label><br />
<input type="text" id="title" name="title" value="" />
</p>
<p class="form-input">
<label for="email">メールアドレス</label><br />
<input type="text" id="email" name="email" value="" />
</p>
<p class="form-input">
<label for="url">URL</label><br />
<input type="text" id="url" name="url" value="" />
</p>
<p class="form-input">
<label for="pass">パスワード(削除時に使用)</label><br />
<input type="password" id="pass" name="pass" value="" />
</p>
<p class="form-input">
<label for="body">コメント</label><br />
<textarea name="body" id="body"></textarea>
</p>
<p class="normal">
<input type="hidden" name="post_comment" id="post_comment" value="0" />
<input type="hidden" name="preview_comment" id="preview_comment" value="0" />
<input type="button" name="post_btn" id="post_btn" value="送信" onclick="return ag_obj.post_comment();" />
<input type="button" name="preview_btn" id="preview_btn" value="確認" onclick="return ag_obj.preview_comment();" />
</p>
</form>
<p class="normal"><a href="#" onclick="return ag_obj.delete_view_page();" />コメントの削除</a></p>
<!-- コメント投稿フォーム終了 -->

2.スタイルシートのカスタマイズ

上にあげたリストから、カスタマイズできるスタイルシート（クラス）として、以下のようなものがあります。

クラス	内容
block-header	ブロック全体の先頭
post-content	1件分のコメント全体
post-header	コメントのヘッダー（タイトル）
post-body	コメントの本文
post-footer	コメントのフッター（コメントの番号／投稿者／日付）
form-input	コメント入力フォームの入力要素
normal	上記以外の一般のpタグ

また、以下のIDに対してスタイルシートを割り当てることもできます。

ID	内容
page_sel	ページ選択部分
page_no	ページ選択部分のselectタグ
guestbook_form	コメント入力フォーム

さらに、ゲストブック部分全体は、「ajax_guestbook」というIDのdiv要素で囲むようにしています。
したがって、以下のような形でスタイルシートを割り当てることで、ゲストブック部分のみにスタイルシートを指定することができます。

#ajax_guestbook .クラス名
{
  クラスに割り当てるスタイルシート 
}
#ajax_guestbook #ID
{
  IDに割り当てるスタイルシート
}

こちらのエントリーで紹介したように、サンプルのスタイルシートがいくつかありますので、それを手本にして、上述したクラスやIDのスタイルシートを書き換えると良いでしょう。