ＣＳＳ コメント欄をなんとかしちゃおう 12
前に作った物ですが要望がありましたので・・・
今回は影をつけてみました
上の画像（何種類かあります）、中の画像（1種類だけです）、下の画像（何種類かあります）
各1枚づつ選んでCSSにいれてください
影の付け方で上・中・下の画像と分かれています
組み合わせは自由です
ワンポイントの無いのを選んで自分で好きなワンポイント画像を貼り付けても面白いですね
下の画像（上・中・下に分かれています）をダウンロードして自分の画像フォルダーにアップしてから
青字のＣＳＳをＣＳＳの編集で一番最後に貼り付けてください
/* ゲストコメント */
#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 20px 10px;/*コメント分の上と左右と下の余裕*/
background: url(画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
#comment_module .comment_footer{/*コメントフッター部分*/
margin:0;
padding: 10px 0;
background: url(画像のURL);/*下画像のURL*/
background-repeat : no-repeat;
background-position: center bottom;
}
#comment_module .label{/*コメントタイトル*/
font-weight: bold;
font-size:12px;
padding:15px 0 5px 20px;
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 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: center top;
color:#1919b3;/*←管理人コメント文字色変更の場合*/
}
#comment_module .admin_comment .comment_body{
margin: 0;
padding:0 20px 10px;/*コメント分の上と左右と下の余裕 ゲストと同じに*/
background: url(画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
#comment_module .admin_comment .comment_footer{
margin:0;
padding: 10px 0;
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;/*←管理人コメントタイトル文字色変更の場合*/
padding:15px 0 5px 20px;
}
#comment_module .admin_comment .comment_author a {
padding-left : 130px;
background-image : url(画像のURL);/* 管理人のアイコン */
background-position : 110px center ;
background-repeat : no-repeat ;
}
※上の画像で左にワンポイント画像が付いている場合は コメントタイトルと重なる場合があります
赤字の数字を変更下さい 40pxとか
※下の画像で左にワンポイントが付いている画像を選んだ方は、
名前とダブってしまう場合はピンクの数字を増やしてください
※上の画像のワンポイント画像がない画像と、中の画像は違います
コメント部分に白の横線が入る場合は中の画像ではなくて上の画像を使っています
↓上の画像
↓中の画像
↓下の画像
↓上の画像
↓中の画像
↓下の画像
↓上の画像
↓中の画像
↓下の画像
↓上の画像
↓中の画像
↓下の画像
↓上の画像
↓中の画像
↓下の画像
↓上の画像
↓中の画像
↓下の画像
↓上の画像
↓中の画像
↓下の画像
↓上の画像
↓中の画像
↓下の画像
※管理人のコメントを分けるには「自分のコメントを ”もっと” わかりやすく 」が必要です
※ＣＳＳの編集が出来ないスキンの方は「CSSの編集が出来ないスキンでCSSを使う
」を参考に
※吹き出しタイプは「オリジナルスキンCSSの編集 コメント欄 」を参考にして下さい
画像はダウンロード後、自分のブログの画像フォルダーにアップしてから使ってください
画像の加工は自由にどうぞ
注意・・・画像のＵＲＬを入れるときサムネイル画像を指定しないようご注意ください
（サムネイル画像は _s が付きます _Sを削除すればオリジナル画像になります）
画像のお持ち帰りかた、画像のURLを知るには 画像のＵＲＬって・・・･･･
ＣＳＳ コメント欄をなんとかしちゃおう 11
下の画像（上・中・下に分かれています）をダウンロードして自分の画像フォルダーにアップしてから
青字のＣＳＳをＣＳＳの編集で一番最後に貼り付けてください
/* ゲストコメント */
#comment_module .each_comment{/*コメントタイトル部分*/
margin: 0;
padding-bottom:15px;/*コメントとコメントの間*/
background: url(画像のURL);/*上画像のURL*/
background-repeat : no-repeat;
background-position: center top;
color:#ffffff;/*←ゲストコメント文字色変更の場合*/
}
#comment_module .comment_body{/*コメント文章部分*/
margin: 0;
padding:10px 25px 0;/*コメント分の上と左右と下の余裕*/
background: url(画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
#comment_module .comment_footer{/*コメントフッター部分*/
margin:0;
padding: 10px 0 20px;
background: url(画像のURL);/*下画像のURL*/
background-repeat : no-repeat;
background-position: center bottom;
}
#comment_module .label{/*コメントタイトル*/
font-weight: bold;
font-size:12px;
padding:25px 0 10px 40px;
color:#ffffff;/*←コメントタイトル文字色変更の場合*/
}
.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: center top;
color:#ffffff;/*←管理人コメント文字色変更の場合*/
}
#comment_module .admin_comment .comment_body{
margin: 0;
padding:10px 25px 0;/*コメント分の上と左右と下の余裕 ゲストと同じに*/
background: url(画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
#comment_module .admin_comment .comment_footer{
margin:0;
padding: 10px 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:#ffffff;/*←管理人コメントタイトル文字色変更の場合*/
}
#comment_module .admin_comment .comment_author a {
padding-left : 130px;
background-image : url(画像のURL);/* 管理人のアイコン */
background-position : 110px center ;
background-repeat : no-repeat ;
}
※管理人のコメントを分けるには「新・自分のコメントを "もっと"わかりやすく 」が必要です
※ＣＳＳの編集が出来ないスキンの方は「CSSの編集が出来ないスキンでCSSを使う
」を参考に
※吹き出しタイプは「オリジナルスキンCSSの編集 コメント欄 」を参考にして下さい
画像はダウンロード後、自分のブログの画像フォルダーにアップしてから使ってください
画像の加工は自由にどうぞ
注意・・・画像のＵＲＬを入れるときサムネイル画像を指定しないようご注意ください
画像のお持ち帰りかた、画像のURLを知るには 画像のＵＲＬって・・・･･･
ＣＳＳ コメント欄をなんとかしちゃおう 10
下の画像（上・中・下に分かれています）をダウンロードして自分の画像フォルダーにアップしてから
青字のＣＳＳをＣＳＳの編集で一番最後に貼り付けてください
/* ゲストコメント */
#comment_module .each_comment{/*コメントタイトル部分*/
margin: 0;
padding-bottom:15px;/*コメントとコメントの間*/
background: url(画像のURL);/*上画像のURL*/
background-repeat : no-repeat;
background-position: center top;
color:#333333;/*←ゲストコメント文字色変更の場合*/
}
#comment_module .comment_body{/*コメント文章部分*/
margin: 0;
padding:0 25px;/*コメント分の上と左右と下の余裕*/
background: url(画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
#comment_module .comment_footer{/*コメントフッター部分*/
margin:0;
padding: 15px 0;
background: url(画像のURL);/*下画像のURL*/
background-repeat : no-repeat;
background-position: center bottom;
}
#comment_module .label{/*コメントタイトル*/
font-weight: bold;
font-size:12px;
padding:20px 0 10px 30px;
color:#333333;/*←コメントタイトル文字色変更の場合*/
}
.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: center top;
color:#00008b;/*←管理人コメント文字色変更の場合*/
}
#comment_module .admin_comment .comment_body{
margin: 0;
padding:0 25px;/*コメント分の上と左右と下の余裕 ゲストと同じに*/
background: url(画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
#comment_module .admin_comment .comment_footer{
margin:0;
padding: 15px 0;
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:#333333;/*←管理人コメントタイトル文字色変更の場合*/
}
#comment_module .admin_comment .comment_author a {
padding-left : 130px;
background-image : url(画像のURL);/* 管理人のアイコン */
background-position : 110px center ;
background-repeat : no-repeat ;
}
※管理人のコメントを分けるには「新・自分のコメントを "もっと"わかりやすく
」が必要です
※ＣＳＳの編集が出来ないスキンの方は「CSSの編集が出来ないスキンでCSSを使う
」を参考に
※吹き出しタイプは「オリジナルスキンCSSの編集 コメント欄 」を参考にして下さい
画像はダウンロード後、自分のブログの画像フォルダーにアップしてから使ってください
画像の加工は自由にどうぞ
注意・・・画像のＵＲＬを入れるときサムネイル画像を指定しないようご注意ください
画像のお持ち帰りかた、画像のURLを知るには 画像のＵＲＬって・・・･･･