Templates for SLMaMe

（2009.03.08 2:45 スタイルシートを訂正）
今回は、受け付けたコメントを装飾します。
デフォルトでは、何の装飾もされていませんね。

せっかく戴いたレスポンスですから、ひとつひとつのコメントの視認性を高め、読みやすくなるよう装飾したいと思います。

画像を用意する

コメントの文字数は決められませんから、背景画像を使用する場合は縦にタイリング可能なものを作成する必要があります。

今回私が用意したのは、以下の画像です。

コメントの上部に１回だけ表示させる画像

コメント全体に縦に繰り返し表示させる画像

コメントの下部に１回だけ表示させる画像

この画像を使って、吹き出しの中にコメント文を表示させたいと思います。

HTML テンプレートに手を加える

コメントを表示しているのは、テンプレート「個別記事」の以下の部分です。

<CommentsLoop>

<div class="comments-body"><%CommentBody%></div>

<div class="comments-post">Posted by <IfCommentUrl><a class="aposted" href="<%CommentUrl%>"><%CommentAuthor%></a><ElseIfCommentEmail><%CommentAuthor%><Else><%CommentAuthor%></IfCommentUrl> at <%CommentDateTime%></div>

</CommentsLoop>

<CommentsLoop> によって、受け付けたコメントの数だけ繰り返し表示しています。
その中の、「<div class="comments-body"><%CommentBody%></div>」がコメント文を表示しています。

私は以下のように、装飾のための div を追加しました。

<CommentsLoop>

<div class="comments-top"><!-- --></div>

<div class="comments-text">

<div class="comments-text-inner"><%CommentBody%></div>

</div>

<div class="comments-bottom"><!-- --></div>

<div class="comments-post">Posted by <IfCommentUrl><a class="aposted" href="<%CommentUrl%>"><%CommentAuthor%></a><ElseIfCommentEmail><%CommentAuthor%><Else><%CommentAuthor%></IfCommentUrl> at <%CommentDateTime%></div>

</CommentsLoop>

CSS テンプレートに手を加える

コメントのスタイルが記述されているのは以下の部分です。

.comments-body {

   font-size: 12px;

   line-height: 135%;

   margin: 20px 0px 15px 13px;

}



.comments-post {

   color: #000;

   font-size: 12px;

   text-align: right;

   margin: 0px 0px 25px 0px;

}

「comments-post」はコメントの投稿者名と投稿日時を表示している部分ですので、フォントサイズなどを変更したい方はここを変更してください。

私は以下のようにしてみました。
（2009.03.08 2:45 訂正）
カスタマイズ後の CSS で使用していたクラス名「comments-body」が、ソラマメログイン時に自動表示されるコメントフォームの「ユーザー名」部分に使われていたため、クラス名を変更しました。

.comments-top {

   width: 453px;

   height: 21px;

   margin: 0;

   padding: 0;

   background: url(コメントの上部に表示させる画像のURL) top left no-repeat;

}



.comments-text {

   width: 453px;

   margin: 0;

   padding: 0;

   background: url(コメント全体に表示させる画像のURL) top left repeat-y;

}



.comments-text-inner {

   padding: 0px 25px 0px 20px;

   font-size: 12px;

   line-height: 135%;

}



.comments-bottom {

   width: 453px;

   height: 42px;

   margin: 0;

   padding: 0;

   background: url(コメントの下部に表示させる画像のURL) top left no-repeat;

}



.comments-post {

   color: #000;

   font-size: 12px;

   text-align: right;

   margin: 0px 0px 25px 0px;

}

完成

これで、コメントの背景に吹き出しが表示されました。どのコメントを誰が投稿したのかが、以前よりも認識しやすくなったと思います。