コメント・・次は・・・&バナー画像

クリック部分

次は・・・？

これです・・・・

画像を画像フォルダーにアップして画像のURLを調べます

で、CSSの最後にそのまま貼り付けてください

#comment_show{
border:1px solid #5dbe03;
}
#comment_show h4{
color:#5dbe03;/*コメント投稿文字の色*/
padding-left:20px;/*画像の横＋余裕*/
background:url(http://stat.ameba.jp/blog/ucs/img/char/char2/038.gif) no-repeat;
}
#comment_show input#commentbutton{
width: 220px;
height: 43px;
text-indent: -9999px;
background:url(ボタン画像のURL) no-repeat;
}

http://stat.ameba.jp/blog/ucs/img/char/char2/038.gif　はみんなの絵文字を使っていますので好きなアイコンに変更ください

　http://stat.ameba.jp/blog/ucs/img/char/char2/031.gif

　http://stat.ameba.jp/blog/ucs/img/char/char2/035.gif

　http://stat.ameba.jp/blog/ucs/img/char/char2/344.gif

88×31 バナー

キーホルダーバナー？

※背景は白限定で・・・（うまく透過できていません・・）

たとえば・・・

ココの左サイドに設置してあるようにペタボタンとして使う場合は・・・

フリースペース（またはフリープラグイン）に

<a href="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=morimori3"><img src="画像のURL" alt="ペタしてね"></a>

横350px

横250px

横170px

横165px

横120px

横350px

横250px

横170px

横165px

横120px

横350px

横250px

横170px

横165px

横120px

コメントが楽しくなるように・・・

コメントするのが楽しくなるように・・・

上、中、下の画像を画像フォルダーにアップして画像の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;
}

アメブロ向上企画書

コメント枠素材

/* ゲストコメント　*/
#comment_module .each_comment{/*コメントタイトル部分*/
margin: 0;
padding-bottom:15px;/*コメントとコメントの間*/
background: url(画像のURL);/*上画像のURL*/
background-repeat : no-repeat;
background-position: left top;
color:#666666;/*←ゲストコメント文字色変更の場合*/
}
#comment_module .comment_body{/*コメント文章部分*/
margin: 0;
padding:10px 80px 0 25px;/*コメント分の上と左右と下の余裕*/
background: url(画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: left top;
}
#comment_module .comment_footer{/*コメントフッター部分*/
margin:0;
padding: 10px 0;
background: url(画像のURL);/*下画像のURL*/
background-repeat : no-repeat;
background-position: left bottom;
}
#comment_module .label{/*コメントタイトル*/
font-weight: bold;
font-size:12px;
padding:20px 0 10px 30px;

color:#666666;/*←コメントタイトル文字色変更の場合*/
}
.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 .comment_author a {/* 名前の右にアイコン */
padding-right : 20px;
background-image : url(画像のURL); /* ゲストのアイコン */
background-position : right center ;
background-repeat : no-repeat ;
}

/*　管理人コメント*/
#comment_module .admin_comment{
margin: 0;
padding-bottom:15px;/*コメントとコメントの間・・ゲストと同じに*/
background: url(画像のＵＲＬ);/*上画像のURL*/
background-repeat : no-repeat;
background-position: right top;
color:#666666;/*←管理人コメント文字色変更の場合*/
}
#comment_module .admin_comment .comment_body{
margin: 0;
padding:10px 30px 0 80px;/*コメント分の上と左右と下の余裕　ゲストと同じに*/
background: url(画像のＵＲＬ);/*中画像のURL*/
background-repeat : repeat-y;
background-position: right top;
}
#comment_module .admin_comment .comment_footer{
margin:0;
padding: 10px 0;
background: url(画像のＵＲＬ);/*下画像のURL*/
background-repeat : no-repeat;
background-position: right bottom;
}
.admin_comment .comment_footer span.comment_date{
padding-left:0;
}
#comment_module .admin_comment .label{/*コメントタイトル*/
color:#9999C2;/*←管理人コメントタイトル文字色変更の場合*/
padding:20px 0 0 80px;/*　←この行を追加します */
}
#comment_module .admin_comment .comment_author a {
padding-left : 250px;
background-image : url(画像のURL);/* 管理人のアイコン */
background-position : 230px center ;
background-repeat : no-repeat ;
}

*☆*｡♪｡*海闊天空★*｡♪｡*★* さま用・・・

/* ゲストコメント　*/
#comment_module .each_comment{/*コメントタイトル部分*/
margin: 0;
padding-bottom:15px;/*コメントとコメントの間*/
background: url(画像のURL);/*上画像のURL*/
background-repeat : no-repeat;
background-position: left top;
color:#666666;/*←ゲストコメント文字色変更の場合*/
}
#comment_module .comment_body{/*コメント文章部分*/
margin: 0;
padding:10px 70px 0 40px;/*コメント分の上と左右と下の余裕*/
background: url(画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: left top;
}
#comment_module .comment_footer{/*コメントフッター部分*/
margin:0;
padding: 10px 0;
background: url(画像のURL);/*下画像のURL*/
background-repeat : no-repeat;
background-position: left bottom;
}
#comment_module .label{/*コメントタイトル*/
font-weight: bold;
font-size:12px;
padding:20px 0 10px 40px;

color:#666666;/*←コメントタイトル文字色変更の場合*/
}
.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 .comment_author a {/* 名前の右にアイコン */
padding-right : 20px;
background-image : url(http://stat.ameba.jp/blog/ucs/img/char/char2/344.gif); /* ゲストのアイコン */
background-position : right center ;
background-repeat : no-repeat ;
}

/*　管理人コメント*/
#comment_module .admin_comment{
margin: 0;
padding-bottom:15px;/*コメントとコメントの間・・ゲストと同じに*/
background: url(画像のURL);/*上画像のURL*/
background-repeat : no-repeat;
background-position: right top;
color:#666666;/*←管理人コメント文字色変更の場合*/
}
#comment_module .admin_comment .comment_body{
margin: 0;
padding:10px 30px 0 80px;/*コメント分の上と左右と下の余裕　ゲストと同じに*/
background: url(画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: right top;
}
#comment_module .admin_comment .comment_footer{
margin:0;
padding: 10px 0;
background: url(画像のURL);/*下画像のURL*/
background-repeat : no-repeat;
background-position: right bottom;
}
.admin_comment .comment_footer span.comment_date{
padding-left:0;
}
#comment_module .admin_comment .label{/*コメントタイトル*/
color:#9999C2;/*←管理人コメントタイトル文字色変更の場合*/
padding:20px 0 0 80px;/*　←この行を追加します */
}
#comment_module .admin_comment .comment_author a {
padding-left : 200px;
background-image : url(http://stat.ameba.jp/user_images/20090821/10/kent0919888/07/ba/g/o0020002010237414317.gif);/* 管理人のアイコン */
background-position : 170px center ;
background-repeat : no-repeat ;
}