読者ボタンをロールオーバー仕様にする。
前回は読者登録ボタンの設置について書きました。
今回はその読者ボタンをロールオーバー仕様にするお話です。
さて、ロールオーバーとは何ぞや?
ロールオーバーとは
ロールオーバーとは、ポインタ(矢印)を画像などに乗せた時に、違う画像に変わる動作のことを言います。
試しに下の画像にポインタを乗せてみて下さい。
↓↓↓↓↓↓↓↓↓
↑↑↑↑↑↑↑↑↑
画像が切り替わって、ボタンを押したような動きですよね。
これは、あらかじめ2枚の画像を用意しておいて、
ポインタが乗ったら変わるようにしたのです。


(画像はどちらも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;/*画像の縦幅*/
}
詳しくは読者登録ボタンの設置を見てくださいね。
上のソースのすぐ下に、以下のソースを足します。
#readerList dl a:hover {
background-repeat:no-repeat ;
background-image:url(ポインタが乗った時の画像のURL);
}
赤文字の部分を、使う画像に合わせて変えて下さい。
用意する2枚の画像は、縦横のサイズが同じ画像を使ってくださいね。
しかし、せっかくロールオーバーにしたのですから、クリックしてもらわなければ割りに合わない(?)ですよね。
わざと一枚目の画像を不完全にして(例えば文字をボヤかすなど)、ポインタで探りたくなるようにするのも一つの手です。
でも、やり過ぎは引かれちゃいますから気をつけてね。
読者ボタンのフリー素材
ごめんなさい。今あるのはさっき使った画像だけです。
時間を見つけて追加しておきますね。
最後に一言。