ボタンの画像を変えてみる

こんばんは、CSS勉強中スタッフです。

今日はボタンの画像を変えてみる

ボタンの画像を用意する

緑色が好きなので、こんなボタン画像を作ってみた

ボタンの画像は
横幅 128px
縦幅 28px
を目安に作ってね

文字と本の形のマークは入れなくて大丈夫だよ

CSSを書く箇所を探す

まずここを探す

/* (2-2) アイコン付きボタン[横128px 縦28px]
--------------------------------------------*/

その下の .skinImgBtnS にCSSを書くよ

.skinImgBtnS

画像のパスを自分の画像のパスに書き換える

.skinImgBtnSの中の画像のパスが書いてある箇所を書き換えるよ。

「 background-image:url( 」から「 ); 」の間に初めから入っている画像のパスを
自分の画像のパスに書き換えてね

※画像のパスは、CSS編集画面で画像をアップロードした下に表示されているよ

.skinImgBtnS{
background-image:url( ここを自分の画像のパスに書き換える );
}

↓↓↓

実際に書き換えるとこんな感じになるよ

.skinImgBtnS{
background-image:url(http://xxxxxxxxxxxxxxxxxxxxxxxx);
}

できたかな？？

ちなみに、いろいろ工夫した結果、こんな感じになりました

読者になる

こんなのもできたよ

※CSS編集がうまくいかないときは、この記事⇒「【Tips】CSS編集がうまくできないとき」を参考にしてください。
※このブログのカスタマイズは、「CSS編集用デザイン」 を使ったものです。
※推奨環境でお試しください
※画面、仕様は記事が投稿された時のものです。

CSS勉強中スタッフのブログ