すべてのカテゴリ » インターネット・パソコン » 技術・プログラミング

質問

終了

アメーバブログをやってます。

記事に毎回オリジナルのペタボタンを貼ってるのですが・・・

このボタンをロールオーバー？マウスオーバー？

マウスを乗せ、クリックすると画像が変わる！

と言う設定をしたいのですが・・・

１、設定の仕方

2、何種類も設定が可能か？

この２点について回答お願いします！

  • 質問者：みるく
  • 質問日時：2009-10-11 22:08:08
  • 0

並び替え：

回答

１．ＣＳＳ
/* ボタンロールオーバー */
.milk-peta a{
width:170px;/*画像の横調整*/
height:88px;/*画像の高さ調整*/
display:block;
background-repeat : no-repeat;
background-image : url(①);
}
.milk-peta a:hover {
background:url(②) no-repeat;
}
①・・・最初の画像
②・・・カーソルを載せたときの画像
２　記事部分

<div class="milk-peta"><a href="③"><img border="0" src="④"></a>
</div>

③・・・・ペタのＵＲＬ
④・・・・ペタ画像　最初の画像

===補足===
milk1-peta
milk2-pata
といように、クラスを複数設定すればＯＫです。
CSS .mik-pata が　CSSでのクラス設定
記事の、<div class="milk-peta">　の　milk-petaがクラスです。
ＣＳＳに、それぞれ、milk1-peta milk2-pata など
複数記述しておくといいです。

  • 回答者：匿名ですよ (質問から2時間後)
  • 0
この回答の満足度
　　
とても参考になり、非常に満足しました。回答ありがとうございました。
お礼コメント

ありがとうございます！

早速、やってみます！


試してみましたが出来ませんでした・・・

何がいけないのでしょうか・・・？

こんなに分かり易く書いて頂いたのに・・・


ちなみに記事には自動的に挿入されるのでしょうか？


どうしてもロールオーバーが出来ません・・・

回答

ランキングボタンで説明してますが
それをペタボタンに置き換えればできますよ。

http://ameblo.jp/bz-125-norinori/entry-10322445505.html

classを変えてCSSに入れておけば何種類も可能です。
記事に貼る時にそのクラスに設定したペタボタンのタグを貼ればおkです。

この回答の満足度
　　
とても参考になり、非常に満足しました。回答ありがとうございました。
お礼コメント

いつもありがとうございます。

ペタボタンに置き換える・・・？がちょっと分からないです・・・

"peace-rank"の部分を"peta-img"とかで良いのでしょうか？

ちなみに記事には自動的に挿入されるのですか？

ブログにコメントが出来ないのでこちらに載せます。


.peace-rank a:hover{　/* カーソルを乗せた時 */
background:url(<div align="center"><a href="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=chibitan-milk" target="_blank"><img src="http://stat.ameba.jp/user_images/20091012/11/chibitan-milk/7d/44/p/o0150011310273817103.png" /></a></a></div>) no-repeat;
}
<div class="milk6-peta">targetAmebaId=chibitan-milk</div>
.peace-peta img{
visibility:hidden;
}
.peace-peta a{
display:block;
width:150px;　/* 画像の幅 */
height:113px;　/* 画像の高さ */
background:url(<div align="center"><a href="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=chibitan-milk" target="_blank"><img src="http://stat.ameba.jp/user_images/20091012/12/chibitan-milk/31/4a/p/t0150011310273886776.png" /></a></a></div>) no-repeat;
}
.peace-rank a:hover{　/* カーソルを乗せた時 */
background:url(<div align="center"><a href="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=chibitan-milk" target="_blank"><img src="http://stat.ameba.jp/user_images/20091012/11/chibitan-milk/cc/63/p/o0150011310273816773.png" /></a></a></div>) no-repeat;
}
<div class="milk7-peta">targetAmebaId=chibitan-milk</div>
.peace-peta img{
visibility:hidden;
}
.peace-peta a{
display:block;
width:150px;　/* 画像の幅 */
height:113px;　/* 画像の高さ */
background:url(<div align="center"><a href="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=chibitan-milk" target="_blank"><img src="http://stat.ameba.jp/user_images/20091012/12/chibitan-milk/66/0d/p/o0150011310273886775.png" /></a></a></div>) no-repeat;
}


これでペタの画面には行くのですが画像が変わりません。

また、上の方の画像をクリックするとアルバムへ飛んでしまいます・・・

何が原因なんでしょうか？

関連する質問・相談

Sooda!からのお知らせ

一覧を見る