ＣＳＳ ルームが変わりました
Amebaなうがルームに表示されるようになって
ルームが少し変わっています
今回の変更で・・いままでなかった？基本の文字サイズもできました
プロフィール画像横の・・・
ペタをつけるを消す
<style type="text/css">#peta{display:none;}</style>
アメンバーになるを消す
<style type="text/css">#amember{display:none;}</style>
メッセージを送るを消す
<style type="text/css">#msg{display:none;}</style>
プレゼントを贈るを消す
<style type="text/css">#present{display:none;}</style>
ペタ・アメンバー・メッセージ・プレゼントをまとめて消す場合は・・
<style type="text/css">#userLink{display:none;}</style>
・・・もし最新のなうが必要なければ
<style type="text/css">#nowModule{display:none;}</style>
ペタ・アメンバー・メッセージ・プレゼントをまとめて消してプロフィール画像を中央にしたい・・
<style type="text/css">#leftArea #userImg{border:none;float: none; width: 300px;}#userLink{display:none;}</style>
プロフィールもいらないって～場合・・
<style type="text/css">#profData{display:none;}</style>
全部・・ ルームのフリースペースにこのまま貼り付けてください
リンクより前のボタンの方がよかった・・って方は
CSS ルームが変わりました 3 （アイコンを変更)
ＣＳＳ ルームのタイトル画像2
も参考にして下さい
CSS コメント投稿欄を画像に 2
前回の記事 で・・・
↓こんな画像も使ってみたいのですが・・・
↓必ず枠が表示されちゃいますので・・・・残念です
な・・ことを書いています
border:none;を入れれば枠線は消えるのですが
そうするとクリック感？がなくなってしまいます
このコメント記入欄を表示の汎用ボタンの場合はカーソルが変化しませんので
余計にボタンらしくなくなってしまいます
なので・・枠は消していませんでした・・
そのときコメントでいただいた質問の中に・・
「カーソルの変え方を教えてください」・・・って質問が
あっ・・
クリック感がなくなっちゃうんなら・・手のカーソルに変化させればいいんじゃない！
いい質問をいただきありがとうございました
この際だから・・やってみたいこともあるしね？
で・・・・
こんな画像を作ってください
そしたらＣＳＳの最後に・・
#comment_show input#commentbutton{
width: 200px;/*画像の横*/
height:110px;/*画像の縦*/
background:url( 画像のＵＲＬ );
background-repeat:no-repeat;
margin:0 auto;
padding:0;
text-indent: -9999px;
border:none;
cursor:pointer;
}
#comment_show,
#comment_module form ul,
#comment_module form li,
#comment_module li.lastItem{
width:200px;/*ボタン画像の幅*/
}
#comment_show {
border:none;
background-color:transparent;
}
#comment_show h4,
#comment_show p {
display:none;
}
今回はコレで終わりではありません・・・・？
やってみたかったことです・・・
こんな画像も作ってください（サイズは上で作ったのと同じにして下さい）
カーソルがのった時に画像を変える必要がない場合
２枚も画像を作るのメンドイって方・・は
ココからはやらなくてもかまいません
画像が出来ましたら・・ＣＳＳの最後に・・
#comment_show input#commentbutton:hover{
background:url( 画像のＵＲＬ );
background-repeat:no-repeat;
}
hover疑似クラスはIE6ではa要素以外は適用されません
つまり・・IE6で見たときはカーソルがのっても変化はしません
IE以外のブラウザーで見た場合に変化します
IE以外ではこのようになります↓
このブログも少しの間・・このようにしていきますので確認下さい
（IE以外でしたら画像変化するはずです・・IEでもカーソルは変化しています）
このブログは元に戻せるように背景の上に表示されています
CSS コメント投稿欄を画像に
前の記事で ・・記事幅は変更したくないけど
コメント投稿欄を画像にしたいってリクが・・・
このような画像を作ります・・前の記事の使いまわしですみません
230px × 100px
230px × 100px
230px × 100px
ボタンの背景として表示しますので四角い枠ができてしまいます
なので・・画像は四角く作ってください
↓こんな画像も使ってみたいのですが・・・
↓必ず枠が表示されちゃいますので・・・・残念です
逆に枠が自動的につきますので画像は単純でかまいません
あるいは枠が付くことを計算して面白いデザインを考えてください
枠を消した方法も記事にしました2010.1.24
みなさまに使ってもいいよ～ってよい画像や面白い画像が出来たらコメント下さい
この記事でで紹介しちゃいます
画像さえできれば・・ＣＳＳの最後に
#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;
}
コチラも参考にして下さい
ゆうこせんせい さま作
他にもありますよ・・この画像が欲しい方は
http://ameblo.jp/yutannojr/entry-10440433187.html