コメントするのが楽しくなるように・・・
上、中、下の画像を画像フォルダーにアップして画像のURLを調べます
上の画像A ↓
上の画像B ↓
中の画像AB共通 ↓
下の画像A ↓
下の画像B ↓
画像のURLにそれぞれの画像のURLを入れてCSSの最後に貼り付けてください
AでもBでも画像のURL以外はCSSは同じです
#comment_module .each_comment{/*コメント背景画像上*/
margin: 0;
padding:0 0 15px 0;
background: url(上の画像のURL) ;
background-repeat : no-repeat;
}
#comment_module .comment_body{/*コメント背景画像中*/
margin: 0;
padding:0 15px;/*コメント分の左右の余裕*/
background: url(中の画像のURL) ;
background-repeat : repeat-y;
}
#comment_module .comment_footer{/*コメント背景画像下*/
margin:0;
padding-top: 25px;/*画像の高さが目安*/
background: url(下の画像のURL) ;
background-repeat : no-repeat;
}
#comment_module .label{/*コメントタイトル*/
font-weight: bold;
font-size:12px;
padding:10px 0 10px 10px;/*タイトルの位置*/
}
.comment_footer span.comment_author{/*吹出し部分に合わせるため名前を右に*/
padding-left:20px;
}
.comment_footer span.comment_date{/*名前と日付の間隔*/
padding-left:15px;
}
#comment_module .comment_footer{/*点線消す*/
border-top:none;
}
アメブロ向上企画書
