初心者のためのアメブロの歩き方 【カスタマイズ・使い方】 -15ページ目

読者ボタンをロールオーバー仕様にする。

前回はリンク1リンク2読者登録ボタンの設置について書きました。
今回はその読者ボタンをロールオーバー仕様にするお話です。



日々勉強!アメブロカスタマイズ-読者ボタンをロールオーバー仕様にする。


さて、ロールオーバーとは何ぞや?


ロールオーバーとは


ロールオーバーとは、ポインタ(矢印)を画像などに乗せた時に、違う画像に変わる動作のことを言います。


試しに下の画像にポインタを乗せてみて下さい。


↓↓↓↓↓↓↓↓↓

↑↑↑↑↑↑↑↑↑


画像が切り替わって、ボタンを押したような動きですよね。


これは、あらかじめ2枚の画像を用意しておいて、
ポインタが乗ったら変わるようにしたのです。

日々勉強!アメブロカスタマイズ-reader03日々勉強!アメブロカスタマイズ-reader03_on

(画像はどちらも153x32ピクセル)


ロールオーバーをするために、本来ならやり方は何通りかあるのですが
アメブロでロールオーバー仕様にするには、CSSをイジる他ありません。



読者ボタンをロールオーバー仕様にする。


まずは前回のソースを記述します。


/* サイドバー読者ボタン */
#readerList img {
visibility:hidden;
}
#readerList dl a{
display:block;
padding:0;
margin:0;
background-repeat:no-repeat;
background-image:url(最初に表示される画像のURL);
height:32px;/*画像の縦幅*/
}


詳しくはリンク1リンク2読者登録ボタンの設置を見てくださいね。


上のソースのすぐ下に、以下のソースを足します。


#readerList dl a:hover {
background-repeat:no-repeat ;
background-image:url(ポインタが乗った時の画像のURL);
}


赤文字の部分を、使う画像に合わせて変えて下さい。
用意する2枚の画像は、縦横のサイズが同じ画像を使ってくださいね。


しかし、せっかくロールオーバーにしたのですから、クリックしてもらわなければ割りに合わない(?)ですよね。
わざと一枚目の画像を不完全にして(例えば文字をボヤかすなど)、ポインタで探りたくなるようにするのも一つの手です。
でも、やり過ぎは引かれちゃいますから気をつけてね。



読者ボタンのフリー素材


ごめんなさい。今あるのはさっき使った画像だけです。
時間を見つけて追加しておきますね。



最後に一言。


うちのブログの読者になりませんか?
日々勉強!アメブロカスタマイズ-読者ボタン01