ボタンの背景画像

なんかここしか変わらないんだけど…

←


わけわかめ。




元々の背景画像
━─━─━─━─━─━─━─━─━─━─

/* ボタンの背景画像 ※[横180px 縦35px]のボタンの背景画像を指定 */
.skinImgBtnM{
background-image:url(http://stat100.ameba.jp/p_skin/wu_pf_cssedit/img/skin_btn_m.png);
}

━─━─━─━─━─━─━─━─━─━─


中のアドレスにあった画像は



こんな感じ。




適当に即席画像で…



大きさは同じです。
そりゃねぇ。フレーム一緒にしたら同じだわねぇ。


画像のURL ⇒ http://stat.ameba.jp/user_images/20121117/02/lemonlipton0708/01/e5/p/o0180003512289329100.png



形にすると
━─━─━─━─━─━─━─━─━─━─

/* ボタンの背景画像 ※[横180px 縦35px]のボタンの背景画像を指定 */
.skinImgBtnM{
background-image:url(http://stat.ameba.jp/user_images/20121117/02/lemonlipton0708/01/e5/p/o0180003512289329100.png );
}

━─━─━─━─━─━─━─━─━─━─
こんな感じ。
あ、このブログのルールですが、点線の中をコピペしてくださいね。
って当たり前か。




なったかな？

これまた需要あるかわからないけど、やってみました。
ド素人なもので…　手がつけられそうなところからちまちま理解していくつもりです。
まるでパズルだ…！

「コメントする」のボタンの画像

コメントを書いてもらうためのボタン。

本来はこんな感じです。


　　　



上の画像は、横が202px、縦が28pxです。
これは好きに大きさ変えられます。

この画像も、好きな画像にする、と。
URLを変えてみましょう！

━─━─━─━─━─


/*「コメントする」ボタン変更 コピペ ココから*/
.commentBtn{
width:202px;
height:28px;
background-image:url(http://画像のURL);
background-repeat:no-repeat;
background-color:transparent;
border:none;
text-indent:-9999px;
}
/*「コメントする」ボタン変更 コピペ ココまで*/



━─━─━─━─━
とりあえず■の部分は自由にできそうです！




例えば即席の画像で

（サイズ・横280px、縦60px）



URL　⇒　http://stat.ameba.jp/user_images/20121114/21/lemonlipton0708/2f/c5/p/o0280005012286141137.png



の場合、



━─━─━─━─━─


/*「コメントする」ボタン変更 コピペ ココから*/
.commentBtn{
width:280px;
height:50px;
background-image:url(http://stat.ameba.jp/user_images/20121114/21/lemonlipton0708/2f/c5/p/o0280005012286141137.png);
background-repeat:no-repeat;
background-color:transparent;
border:none;
text-indent:-9999px;
}
/*「コメントする」ボタン変更 コピペ ココまで*/



━─━─━─━─━




あまり意味はないかもしれない。
可愛くしたい人は好きに画像を作ったりして遊べます！

CSSで遊ぶためのブログです。

こんにちは。サブアカのちゃこです。
本アカは、いずれご紹介ww

えっとね、本アカがどうなるか恐いんで、サブに実験してもらってます！

「銀魂Wall」というCSSカスタムユーザ様のブログがありまして
ボタンとか、アメ認証の画像などはそちらからお借りすることもあるかと。
いつか自分の画像で作れたりするまで、お借りします”

とりあえずは機能の実験からしてこうぜ ！ということで。


始めのうちは、私的自己満足用に偏ると思いますが、
自分が理解でき次第、記事としてお伝えします。




先ほどの文でお分かりかとはおもいますが
銀魂好きです。

本アカ、わかるかなぁ…



.