丸角吹き出し風のコメントスタイル このエントリーを含むはてなブックマーク

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

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

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

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

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

2.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; }


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

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

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


4.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>


以上で終わりです.

9 コメント:

セ・キャトル さんのコメント...

zikiteさん、初めまして、セ・キャトルと申します。
zikiteさんのブログを参考にさせていただき、色々と弄っているのですが、丸角吹き出しのラインがどうしても表示できません。テクニカルには全くスキルがないので、とてもいい加減にテンプレートを弄ってしまっているのですが、表示できない原因などを教えていただければと思い、コメントさせていただきました。

zikite さんのコメント...

セ・キャトルへ:

はじめまして,セ・キャトルさんの丸角吹き出しに関するCSSコードを張ってもらえますか?

セ・キャトル さんのコメント...

お手数をおかけします。CSSコードは下記で宜しいでしょうか?
.roundedcornr_box_328037 {
background: url(http://bp2.blogger.com/_MXmPCoEKbY4/RrqoBeqFYKI/AAAAAAAAAJk/sBA6f_pbn2k/s1600-h/comment_tl.png) no-repeat top left;
padding-top: 10px;
}
.roundedcornr_top_328037 {
background: url(http://bp0.blogger.com/_MXmPCoEKbY4/Rrqn6-qFYJI/AAAAAAAAAJc/fB7j5l4JUxI/s1600-h/comment_tr.png) no-repeat top right;
}
.roundedcornr_bottom_328037 {
background: url(http://bp2.blogger.com/_MXmPCoEKbY4/RrqnseqFYII/AAAAAAAAAJU/0RqKNVVWqzw/s1600-h/comment_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_328037 div {
background: url(http://bp3.blogger.com/_MXmPCoEKbY4/RrqnguqFYHI/AAAAAAAAAJM/HlN-jQlCzZs/s1600-h/comment_br.png) no-repeat bottom right;
}
.roundedcornr_content_328037 {
background: url(http://bp1.blogger.com/_MXmPCoEKbY4/RrqnYOqFYGI/AAAAAAAAAJE/HXH4rG4_S0s/s1600-h/comment_r.png) top right repeat-y;
}

.roundedcornr_top_328037 div,.roundedcornr_top_328037,
.roundedcornr_bottom_328037 div,.roundedcornr_bottom_328037 {
width: 100%;
height: 15px;
font-size: 1px;
}
.roundedcornr_content_328037{
margin-bottom: -10px;
}
.roundedcornr_bottom_328037 {
margin-top: -9px;
}
.roundedcornr_content_328037 { padding: 0 15px; }

因みにBlogは、下記になります。
http://sabledelangrune.blogspot.com/

zikite さんのコメント...

セ・キャトル さんへ:

comment_br.pngがcomment_bl.pngが同じになっていましたね,
http://zdengfeng.googlepages.com/comment_br.png
からダウンロードし直してみてください.

セ・キャトル さんのコメント...

zikiteさん、ありがとうございました。
画像データを確認してみましたが、やはり表示が旨くできませんでした。
他にチェックすべき所がありましたら、ご教授いただきたく、よろしくお願いいたします。

zikite さんのコメント...

セ・キャトル さん,

確かに,貼り付けていただいたコードでは,線が表示されないです,コードにもおかしいところもなさそうですが,

しかし,コードの中の画像ファイルのURLを僕のgoogle pageのURLに変更するだけで,うまく表示できました.

原因は画像ファイルの置く場所?

セ・キャトル さんのコメント...

zikiteさん、ありがとうございます。

画像の置き場所をPicasaに変更して、色々弄っておりましたら、コメントのバックグラウンドの色以外は、旨く表示できるようになりました。
バックグラウンドの色はどうすれば変更できるのでしょうか?初歩的な質問ですみません。

zikite さんのコメント...

バックグラウンドの色は画像ファイルのバックグラウンドの色になりますから,

画像編集ソフトで画像ファイルのバックグラウンドの色を修正するか,roundecornr
から色を指定して,新しい画像ファイルを生成すれば良い.

セ・キャトル さんのコメント...

zikiteさん、ありがとうございました。

そう言う事だったんですね。後日、チャレンジしてみたいと思います。本当に色々とありがとうございました。

コメントを投稿

最新の記事

最新コメント