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

オリジナルスキンCSSの編集 コメント欄3

知らない間に桜が咲いていました

毎日通っていても余裕がないと気が付かないんですね・・・



こんな吹出しはどうでしょう・・・









CSSの最後にコピペしてください


#comment_module .each_comment{/*コメント背景画像上*/
margin: 0;
padding:0 0 10px 0;
background: url(画像のURL) ;
background-repeat : no-repeat;
}
#comment_module .comment_body{/*コメント背景画像中*/
text-align: center;/*コメント中央寄せ*/
margin: 0;
padding:0 15px;/*コメント分の左右の余裕*/
background: url(画像のURL ) ;
background-repeat : repeat-y;
}
#comment_module .comment_footer{/*コメント背景画像下*/
margin:0;
padding-top: 55px;/*画像の高さが目安*/
background: url(画像のURL) ;
background-repeat : no-repeat;
}

#comment_module .label{/*コメントタイトル*/
text-align: center;/*タイトル中央寄せ*/
font-weight: bold;
font-size:12px;
padding:10px 0 10px 10px;/*タイトルの位置*/
}

.comment_footer span.comment_author{/*吹出し部分に合わせるため名前を右に*/
padding-left:30px;
}
.comment_footer span.comment_date{/*名前と日付の間隔*/
padding-left:20px;
}

#comment_module .comment_footer{
border-top:none;
}



オリジナルスキンCSSの編集 コメント欄

オリジナルスキンCSSの編集 コメント欄2

素材 コメント欄 背景画像

オリジナルスキンCSSの編集 コメント欄4


ゲストさまと自分のコメントを分けるためには

新・自分のコメントを "もっと"わかりやすく  を、フリープラグインに設置する必要があります

素材 コメント欄 背景画像

横幅520pxと450pxのコメント欄背景画像です


使い方は 「オリジナルスキンCSSの編集 コメント欄」   へ  

横幅395pxの画像はこちらにあります&CSSが使えない場合のやりかたもこちらで


横幅520px








































横幅450px
































横幅380px


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

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

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

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

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

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



オリジナルスキンCSSの編集 コメント欄

オリジナルスキンCSSの編集 コメント欄2

オリジナルスキンCSSの編集 コメント欄3

オリジナルスキンCSSの編集 コメント欄4


素材 コメント欄 背景画像2

素材 コメント欄 背景画像3

素材 コメント欄 背景画像4


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

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

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

CSS コメント欄をなんとかしちゃおう 4

CSS コメント欄をなんとかしちゃおう 5

CSS コメント欄をなんとかしちゃおう 6

CSS コメント欄をなんとかしちゃおう 7

CSS コメント欄をなんとかしちゃおう 8

CSS コメント欄をなんとかしちゃおう 9

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

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

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

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

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

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

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

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

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

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

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

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

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

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

オリジナルスキンCSSの編集 コメント欄2

今度は画像を使わないでやってみます・・・



本当はコメントについているクラスをブログ管理人と他の方と分けてもらえれば・・・

現在はclass="each_comment"コレを管理人のコメントにはclass="admin_comment"あたりにしてもらえれば

色を分けたりして一発で管理人のコメントだって判るように出来るですが・・・・・

ついでにトップで自分で書いたコメントは「コメントがあります」なんて出さないで・・・

他のブログではCSSで細工可能なところがありますがアメブロでは出来ません・・・・・


他にもニックネームの横にペタで使っているプロフィール画像のサムネイルなんかが

貼ってあったらいいとは思いませんか・・・?


以上、アメブロへの要望でした ( いまのところは実現不可能です )




で、今回はボーターと背景色を使います





色を設定したらCSSの最後にコピペしてください

※今回は探して削除は必要ありません


#comment_module .label{/*コメントタイトル*/
font-weight: bold;
font-size:12px;
color:#ff0000;/*タイトルの文字色*/
padding:10px 0 10px 10px;/*タイトルの位置*/
border-bottom:5px solid #66ffff;/*コメント上線*/
}
#comment_module .comment_body{/*コメント*/
margin: 0;
padding:10px 15px;/*コメント部分の上下、左右の余裕*/
background-color: #fafdfd ;/*コメント背景色*/
color:#66ffff;/*コメントの文字色*/
}

#comment_module .comment_footer{

border-top:1px solid #66ffff;/*コメント下線*/
}
.comment_footer span.comment_author{/*名前を右に*/
padding-left:30px;
}
.comment_footer span.comment_date{/*名前と日付の間隔*/
padding-left:20px;
color:#666666;/*日付の色*/
}



オリジナルスキンCSSの編集 コメント欄


素材 コメント欄 背景画像

オリジナルスキンCSSの編集 コメント欄3

オリジナルスキンCSSの編集 コメント欄4


ゲストさまと自分のコメントを分けるためには

新・自分のコメントを "もっと"わかりやすく  を、フリープラグインに設置する必要があります