【ブログパーツ】 なうボタンｘロールオーバー
気づけば・・・ピグスタッフブログに
なうページ開くボタンが付いてるやん
なんで・・・
真似て作ってみた！
まんまパクるのは、イマイチなのでロールオーバーつけてみた
こんな画像の出来上がり
ついでにペタ用も作ってみた
もともとのピグスタッフブログのものを参考に
縦2倍くらいの大きさでで作ってます・
■ ソース
<div id="now_bt"><a href="http://now.ameba.jp/自分のID/">なうフォローしてみる？</a></div>
■ スタイルシート
#now_bt{position:fixed;top: 130px;right: 0px;z-index: 1800;}
#now_bt a{background:url(ボタン画像のアドレス) no-repeat; display:block;width:87px;height:94px;overflow:hidden;text-decoration:none; line-height:300px;}
#now_bt a:hover{background-position:0px -95px;}
1枚画像なのに全部表示されないで切り替わるようにするための要素は
width: | height: | overflow:hidden | display:block | background-position | a:hover
overflow:hiddenは"width"と"height"で記入した数値を超えたときはみ出た部分を表示しないようにします。
カーソルを持っていった時（a:hover）に画像の表示する位置（background-position）を
下げることでフォローボタンが変わったように見える
スタッフブログのタイプ
■ ソース
<div style="position: fixed; top: 130px; right: 0px; z-index: 1800; ">
<a href="http://now.ameba.jp/自分のID/">
<img src="ボタン画像のアドレス" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; ">
</a>
</div>
なうページ開くボタンが付いてるやん
なんで・・・
真似て作ってみた！
まんまパクるのは、イマイチなのでロールオーバーつけてみた
こんな画像の出来上がり
ついでにペタ用も作ってみた
もともとのピグスタッフブログのものを参考に
縦2倍くらいの大きさでで作ってます・
■ ソース
<div id="now_bt"><a href="http://now.ameba.jp/自分のID/">なうフォローしてみる？</a></div>
■ スタイルシート
#now_bt{position:fixed;top: 130px;right: 0px;z-index: 1800;}
#now_bt a{background:url(ボタン画像のアドレス) no-repeat; display:block;width:87px;height:94px;overflow:hidden;text-decoration:none; line-height:300px;}
#now_bt a:hover{background-position:0px -95px;}
1枚画像なのに全部表示されないで切り替わるようにするための要素は
width: | height: | overflow:hidden | display:block | background-position | a:hover
overflow:hiddenは"width"と"height"で記入した数値を超えたときはみ出た部分を表示しないようにします。
カーソルを持っていった時（a:hover）に画像の表示する位置（background-position）を
下げることでフォローボタンが変わったように見える
スタッフブログのタイプ
■ ソース
<div style="position: fixed; top: 130px; right: 0px; z-index: 1800; ">
<a href="http://now.ameba.jp/自分のID/">
<img src="ボタン画像のアドレス" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; ">
</a>
</div>