コメント欄をなんとかしちゃおう 応用4

コメント欄の応用・・・・　４

って・・・これが一番カンタンで別に応用でもなんでもないのですが・・・・・

書くことがないので・・・応用ってことでお願いします

まずは画像を作ります

別にラインみたいに一直線の画像でもかまわないのですが

それでは面白くないので

Ｌ字型で作ってみます

　　↑　朝顔　320px × 130px　　透過処理済みgif

↑　ヘチマ　313px × 123px　　透過処理済みgif

※高さがコメント１行でも配置できるくらいの高さ・・・・

　あとでCSSでどうにでもなるのですが不自然にならないくらいの高さで・・？

　もちろん横幅はコメント部分に収まるサイズですが

　配置するときに左右どちらかに寄せるので短くてもど～ってことありません

同じサイズで作ったはずですが・・・・違ってしまいました

本物みたいに良く描けているでしょ・・・

予告で使った画像は素材集の画像を自分で加工したので再配布は出来ません

ので、作り直したのですが・・・・・

前から言っているでしょ

私は絵心がないって・・・・

そう、・・・・

本物です・・・・・

自分で撮った写真、著作権フリーの写真から

花や葉、実を切り抜いて張り合わせたものです

七夕の笹飾り（昔、仙台で撮った）もやってみたのですが

結局七夕には間に合いませんでしたし・・・・
メチャ細かすぎてギブしました

/* ゲストコメント　*/
#comment_module .each_comment{/*コメントタイトル部分*/
margin: 0 0 20px;
padding-bottom:50px;/*コメントとコメントの間*/
background: url(画像のＵＲＬ);/*上画像のURL*/
background-repeat : no-repeat;
background-position: right bottom;
color:#1919b3;/*←ゲストコメント文字色変更の場合*/
}
#comment_module .comment_body{/*コメント文章部分*/
margin: 0;
padding:0 50px 10px 30px;/*コメント分の上と左右と下の余裕*/
}
#comment_module .label{/*コメントタイトル*/
font-weight: bold;
font-size:12px;
padding:25px 0 10px 40px;
color:#1919b3;/*←コメントタイトル文字色変更の場合*/
}
.comment_footer span.comment_author{/*名前*/
padding-left:40px;
}
.comment_footer span.comment_date{/*日付*/
padding-left:20px;
}
#comment_module .comment_footer{/*フッタ上の点線を消す*/
border-top:none;
}
.comment_gotoform{/*[コメント記入欄を表示]を消す*/
display:none;
}

/*　管理人コメント*/
#comment_module .admin_comment{
margin: 0 0 20px;
padding-bottom:15px;/*コメントとコメントの間・・ゲストと同じに*/
background: url(画像のＵＲＬ);/*上画像のURL*/
background-repeat : no-repeat;
background-position: left top;
color:#1919b3;/*←管理人コメント文字色変更の場合*/
}
#comment_module .admin_comment .comment_body{
margin: 0;
padding:0 30px 10px 50px;/*コメント分の上と左右と下の余裕　ゲストと同じに*/
}
#comment_module .admin_comment .label{/*コメントタイトル*/
color:#1919b3;/*←管理人コメントタイトル文字色変更の場合*/
padding:45px 0 10px 60px;
}
#comment_module .admin_comment .comment_author{/*名前*/
padding-left:100px;
}