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

前の記事で ・・記事幅は変更したくないけど

コメント投稿欄を画像にしたいってリクが・・・

このような画像を作ります・・前の記事の使いまわしですみません

230px ×　100px


230px ×　100px

230px ×　100px

ボタンの背景として表示しますので四角い枠ができてしまいます

なので・・画像は四角く作ってください

↓こんな画像も使ってみたいのですが・・・

↓必ず枠が表示されちゃいますので・・・・残念です

逆に枠が自動的につきますので画像は単純でかまいません

あるいは枠が付くことを計算して面白いデザインを考えてください

枠を消した方法も記事にしました2010.1.24

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

みなさまに使ってもいいよ～ってよい画像や面白い画像が出来たらコメント下さい

この記事でで紹介しちゃいます

画像さえできれば・・ＣＳＳの最後に

#comment_show input#commentbutton{
width: 230px;/*画像の横*/
height:100px;/*画像の縦*/
background:url(画像のＵＲＬ);
background-repeat:no-repeat;
margin:0 auto;
padding:0;
text-indent: -9999px;
}
#comment_show,
#comment_module form ul,
#comment_module form li,
#comment_module li.lastItem{
width:230px;/*画像の幅*/
}
#comment_show {
border:none;
}
#comment_show h4,
#comment_show p {
display:none;
}

背景が白以外の場合・・・

ボタンの下に変な？IEで見たときに白い部分が現れます

背景が白以外の場合はこれもつけます

#comment_show {
background-color:transparent;
}

コチラも参考にして下さい

CSS コメント投稿の枠やボタンの変更

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

ゆうこせんせい さま作

他にもありますよ・・この画像が欲しい方は
http://ameblo.jp/yutannojr/entry-10440433187.html

http://ameblo.jp/yutannojr/entry-10442486578.html