丸角吹き出し風のコメントスタイル

前の記事コメントスタイルの美化で四角吹き出し風のコメントスタイルしか作れなかったが，今回はRoundedCornrから丸角スタイルを生成して，コメントスタイルを丸角吹き出し風にしました．

少し手間がかかりますが，その修正手順を紹介します，この手順で，あなたも自分のブログのデザインをあわせて，丸角吹き出しスタイルを作れます．

１．まずはRoundedCornrから四角スタイルを生成します，そしてRoundedCornrがCSSファイル，HTMLファイルと５つ画像ファイルが自動的に生成してくれます．

　スタイル画像ファイルroundedcornr_xxxxxx_tl.png(xxxxxxはランダムな数字の列，下同）は左と上のライン用のファイルです．このファイルを以下のように修正します：

　上のラインを10px下げ，左から40pxぐらいの位置で吹き出し口を作ります

２．RoundedCornrが生成したCSSファイルを以下のように修正して，Bloggerテンプレートファイルにコピーします．（わかりやすくため，.commentsの下にコピーしたほうがいいです）

.roundedcornr_box_xxxxxx {
/*画像ファイルのパスを適当なURLで書き換えてください*/
background: url(roundedcornr_xxxxxx_tl.png) no-repeat top left;
padding-top: 10px; /*追加*/
}
.roundedcornr_top_xxxxxx {
background: url(roundedcornr_xxxxxx_tr.png) no-repeat top right;
}
.roundedcornr_bottom_xxxxxx {
background: url(roundedcornr_xxxxxx_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_xxxxxx div {
background: url(roundedcornr_xxxxxx_br.png) no-repeat bottom right;
}
.roundedcornr_content_xxxxxx {
background: url(roundedcornr_xxxxxx_r.png) top right repeat-y;
}

.roundedcornr_top_xxxxxx div,.roundedcornr_top_xxxxxx,
.roundedcornr_bottom_xxxxxx div, .roundedcornr_bottom_xxxxxx {
width: 100%;
height: 15px;
font-size: 1px;
}
/*.roundedcornr_content_xxxxxx, roundedcornr_bottom_xxxxxxのmargin-topの値を10を引く，例では-19->-9に変更*/
.roundedcornr_content_xxxxxx,.roundedcornr_bottom_xxxxxx {
margin-top: -19px;
margin-top: -9px;
}
.roundedcornr_content_xxxxxx { padding: 0 15px; }

３．Bloggerのテンプレートに.comment-body と.comment-body pに関するCSSがあったら，コメントアウトします．以下の感じです．

/*
.comment-body {
....
}

.comment-body p {
.....
}
*/

４．Bloggerテンプレートから以下のコードを探し出します．

<b:if cond="data:post.numComments != 0">
...
<dd class="comment-body">
<b:if cond="data:comment.isDeleted">
　<span　class="deleted-comment">
　　　　　　</data:comment.body></span>
<b:else>
</b:else>
　　　　　　</b:if>
　　　　　　　　<p></data:comment.body></p>
</dd>
...
</b:if>

上のコード赤の部分を以下のように修正します：（ブルーのコードを追加）

<b:if cond="data:post.numComments != 0">
...
<dd class="comment-body">
<b:if cond="data:comment.isDeleted">
<span class="deleted-comment">
</data:comment.body></span>
<b:else>
</b:else></b:if><div class="roundedcornr_box_xxxxxx">
<div class="roundedcornr_top_xxxxxx"><div></div></div>
<div class="roundedcornr_content_xxxxxx">
<p><data:comment.body/></p>
</div>
<div class="roundedcornr_bottom_xxxxxx"><div></div></div>
</div>
</dd>

...
</b:if>

以上で終わりです．