アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！ -279ページ目

もうちょっと何とかすると・・・・・

＋αとは違うかな・・・・　3´[ 3ダッシュ]　の方がいいのかな・・？

アメーバの透過が適当ですが・・・・・・

説明するだけなのでわかればOKってことで・・・・

↓種明かしです

やり方は前のを参考にしてください

※実際は中の画像はもっと縦長にする必要があります

中に貼り付けたワンポイント画像の大きさにも注意ください

コメントが1行の場合でも全部が表示できるように調整ください

対処方法は前のを参考に・・・・・　　不親切でゴメンナサイ m(．．)m

*********************************************************************

↑下の画像におっきなワンポイント貼り付けるのとどう違うんだ・・・・？

　なんてツッコミはなしでお願いします・・・・・

↓下の画像に全部入れちゃえばサイズに気をつける必要なんて無いじゃん・・・・

　　　・・・・・・・・・

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

こんどは・・・・・　応用の3

コメント欄の枠内に背景がある場合です

種明かしは中の画像の真ん中にワンポイントの画像を配置して縦に長くすることです

/* ゲストコメント　*/
#comment_module .each_comment{/*コメントタイトル部分*/
margin: 0;
padding-bottom:15px;/*コメントとコメントの間*/
background: url(画像のURL);/*上画像のURL*/
background-repeat : no-repeat;
background-position: center top;
color:#1919b3;/*←ゲストコメント文字色変更の場合*/
}
#comment_module .comment_body{/*コメント文章部分*/
margin: 0;
padding:0 70px 10px 30px;/*コメント分の上と左右と下の余裕*/
background: url(画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center;
}
#comment_module .comment_footer{/*コメントフッター部分*/
margin:0;
padding: 5px 0 20px;
background: url(画像のURL);/*下画像のURL*/
background-repeat : no-repeat;
background-position: center bottom;
}
#comment_module .label{/*コメントタイトル*/
font-weight: bold;
font-size:12px;
padding:15px 0 10px 30px;
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 .comment_author {/* 名前の右にアイコン */
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);/*上画像のURL*/
background-repeat : no-repeat;
background-position: center top;
color:#1919b3;/*←管理人コメント文字色変更の場合*/
}
#comment_module .admin_comment .comment_body{
margin: 0;
padding:0 70px 10px ;30px/*コメント分の上と左右と下の余裕　ゲストと同じに*/
background: url(画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center;
}
#comment_module .admin_comment .comment_footer{
margin:0;
padding: 5px 0 20px;
background: url(画像のURL);/*下画像のURL*/
background-repeat : no-repeat;
background-position: center bottom;
}
.admin_comment .comment_footer span.comment_date{
padding-left:0;
}

#comment_module .admin_comment .label{/*コメントタイトル*/
color:#1919b3;/*←管理人コメントタイトル文字色変更の場合*/
}

#comment_module .admin_comment .comment_author {
padding-left : 130px;
background-image : url(画像のURL);/* 管理人のアイコン */
background-position : 110px center ;
background-repeat : no-repeat ;
}

※大事なのはbackground-position: center;で中の画像の表示位置をセンターにすることです

　コメント文の横位置は水色の数字を変更してください