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

m(_ _)m すでに何人かの方にはアドバイスしたり変更していただいており

すでに記事にしたと思い込んでいました・・・

変更する部分を選んでいつもの通り、ＣＳＳの最後に加えてください

#comment_show　　外枠部分です

/*青い線の場合*/

#comment_show{
border:1px solid #0000ff;
}

/*ピンクの点線の場合*/

#comment_show{
border:2px dotted #ff99ff;
}

/*ココのように背景画像を使う場合*/

#comment_show{
display:block;
width: 340px;/*画像の横*/
height:165px;/*画像の縦*/
background-image:url(画像のURL);
background-repeat:no-repeat;
}

/*背景色を変更*/

#comment_show{
background-color:#cccccc;

}

#comment_show h4 　コメント投稿　タイトル部分です

/* ワンポイント画像を変える場合 大きな画像を使用する場合はもう一工夫必要かも*/

#comment_show h4{
padding-left:20px;/*画像の横＋余裕*/
font-size:12px;/*文字のサイズ*/
color:#333333;/*文字の色*/
background-image:url(画像のURL);
background-repeat:no-repeat;
}

/*文字の色を変える場合*/
#comment_show h4{
color:#333333;/*文字の色*/
}

#comment_show p　注意書きの部分です（文面は変更できません）

/*文字の色を変える場合*/

#comment_show p{
color:#333333;/*文字の色*/
}

#comment_show input#commentbutton ボタン部分です

※ブラウザーによっては文字が消えない場合もあります

/*ボタン部分に画像を使う場合*/
#comment_show input#commentbutton{
width: 120px;/*「コメントする」の画像の横*/
height: 30px;/*「コメントする」の画像の縦*/
text-indent: -9999px;
background:url(画像のURL);
}

CSSだけでかわいくしてみます

CSS　コメント記入欄のボタンをかわいく・・

画像のボタンだけにしちゃいます

CSS　コメント投稿欄を画像に

記事とかコメントを狭くしている場合は・・
その幅に合わせて狭くします

#comment_show{
width:300px;
}
#comment_module li.lastItem {
width:300px;
text-align:center;
}