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

ＣＳＳコメント欄をなんとかしちゃおう　14

ようやく出来ました・・・・

一番先に作って失敗したやつです

なんとか全部作り直しました

ふぅっ～

/* ゲストコメント　*/
#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 30px 10px;/*コメント分の上と左右と下の余裕*/
background: url(画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
#comment_module .comment_footer{/*コメントフッター部分*/
margin:0;
padding: 0 0 15px;
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 30px 10px;/*コメント分の上と左右と下の余裕　ゲストと同じに*/
background: url(画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
#comment_module .admin_comment .comment_footer{
margin:0;
padding: 0 0 15px;
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 ;
}

※管理人のコメントを分けるには「新・自分のコメントを "もっと"わかりやすく」が必要です

※ＣＳＳの編集が出来ないスキンの方は「CSSの編集が出来ないスキンでCSSを使う」を参考に

※吹き出しタイプは「オリジナルスキンCSSの編集　コメント欄」を参考にして下さい

画像はダウンロード後、自分のブログの画像フォルダーにアップしてから使ってください

画像の加工は自由にどうぞ

注意・・・画像のＵＲＬを入れるときサムネイル画像を指定しないようご注意ください

画像のお持ち帰りかた、画像のURLを知るには

ＣＳＳコメント欄をなんとかしちゃおう　10

ＣＳＳコメント欄をなんとかしちゃおう　11

ＣＳＳコメント欄をなんとかしちゃおう　12

コメント欄をなんとかしちゃおう　12上の画像だけ～

コメント欄をなんとかしちゃおう　12下の画像だけ～

コメント欄をなんとかしちゃおう　素材

ＣＳＳコメント欄をなんとかしちゃおう　13

ＣＳＳコメント欄をなんとかしちゃおう　13のつづき～

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

ＣＳＳコメント欄をなんとかしちゃおう　14

ＣＳＳコメント欄をなんとかしちゃおう　14のつづき～

ＣＳＳコメント欄をなんとかしちゃおう　15

ＣＳＳコメント欄をなんとかしちゃおう　15のつづき～

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

ＣＳＳ　コメント・・・文字（線）色

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

ちょっとだけ・・・・・

応用してみます

ゲストさまのコメントと管理人コメントを互い違いに配置してみます

３カラムのスキンの場合は画像を小さくしないと互い違いになっているのがわかりにくいのですが

２カラムでしたらムリに大きな画像を作らなくてもこのようにした方がスマートではないでしょうか

元のＣＳＳはこちらです

※ゲストさまと管理人の横位置が違うため、

　管理人のコメントタイトル位置を変更する必要があります

　下のＣＳＳで　　/*　←この行を追加します */　　部分がそうです

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

padding:25px 0 10px 65px;/*　←この行を追加します */
}

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