2005年8月 5日 12:18
タグ:
アイコン,
ブログパーツ,
メロメロパーク
このページのソースに、間違いがありました。すみません。
<img src="meroccio10.gif" onmouseover="this.src='meroccio11.gif'" onmouseout="this.src='meroccio12.gif'" width="40" height="31" alt="メロッチョ" />
赤字の部分が、抜けている所がありました(メロッチョとモフモフ)。
お手数ですが、確認していただけると嬉しいです。
(ぱんだこさん、ありがとうございます~。 9/9修正)
■ ロールオーバーのアイコン単体
 |  |  |  |
表示 (マウスを乗せてみると) | = 通常時 | + マウスオーバー | + マウスアウト |
画像は2つ or 3つ必要になります。
それぞれ、サーバーにアップしてアドレスを控えてください。
そして、次のようなソースを、表示箇所に貼り付けます。
<img src="meroccio10.gif" onmouseover="this.src='meroccio11.gif'" onmouseout="this.src='meroccio12.gif'" width="40" height="31" alt="メロッチョ" />
src="meroccio10.gif"
:通常時の画像アドレス
onmouseover="this.src='meroccio11.gif'"
:マウスオーバー(マウスを画像に載せたとき)の画像アドレス
onmouseout="this.src='meroccio12.gif'"
:マウスアウト(マウスを画像から外したとき)の画像アドレス
alt="メロッチョ"
:自分のメロの名前などに変えたり。
■ ロールオーバーのアイコン + 背景
150*55の背景画像の場合は、この記事の一番最後も見てください。
ここでは、divで囲み、その背景に画像を指定しています。
<div style="background:url(m_bg01.gif) no-repeat center;width:140px;padding:9px 0px 5px;margin:5px auto;text-align:center;">
<img src="meroccio10.gif" onmouseover="this.src='meroccio11.gif'" onmouseout="this.src='meroccio12.gif'" width="40" height="31" alt="メロッチョ" /><img src="merolin10.gif" onmouseover="this.src='merolin11.gif'" onmouseout="this.src='merolin12.gif'" width="40" height="31" alt="メロリン" /><img src="mofmof10.gif" onmouseover="this.src='mofmof11.gif'" onmouseout="this.src='mofmof12.gif'" width="40" height="31" alt="モフモフ" /></div>
m_bg01.gif
:背景画像のアドレス
padding:9px 0px 5px
:画像上と下のスペース。この画像では、この数値で。
margin:5px auto
:divの周りとのスペース。上下に5px、左右にはセンタリング(IE以外?)
text-align:center
:画像のセンタリング。
灰色部分に、ロールオーバーのアイコン単体のタグ。
■ その他
※ もし、アイコンにリンクを貼る場合は、border=0を足すと周りに線が出なくなります。
<img src="meroccio10.gif" onmouseover="this.src='meroccio11.gif'" onmouseout="this.src='meroccio12.gif'" width="40" height="31" alt="メロッチョ" border=0 />
※ アイコンの下に、隙間ができてしまうのは、<img>と<img>の間で改行(\n)がある為のようです。
(追記)
改行していなくても、隙間が空いてしまう場合は、以下のようなpadding値にしてみてください;
<div style="background:url(m_bg01.gif) no-repeat center;width:140px;padding:10px 0px 2px;margin:5px auto;text-align:center;">
<img src="meroccio10.gif" onmouseover="this.src='meroccio11.gif'" onmouseout="this.src='meroccio12.gif'" width="40" height="31" alt="メロッチョ" /><img src="merolin10.gif" onmouseover="this.src='merolin11.gif'" onmouseout="this.src='merolin12.gif'" width="40" height="31" alt="メロリン" /><img src="mofmof10.gif" onmouseover="this.src='mofmof11.gif'" onmouseout="this.src='mofmof12.gif'" width="40" height="31" alt="モフモフ" /></div>
(さらに追記 H19.5.17)
150*55背景を使用する場合は、widthやpaddingの値が変わります~。
<div style="background:url(m_bg01.gif) no-repeat center;width:150px;padding:14px 0px 10px;margin:5px auto;text-align:center;">
<img src="meroccio10.gif" onmouseover="this.src='meroccio11.gif'" onmouseout="this.src='meroccio12.gif'" width="40" height="31" alt="メロッチョ" /><img src="merolin10.gif" onmouseover="this.src='merolin11.gif'" onmouseout="this.src='merolin12.gif'" width="40" height="31" alt="メロリン" /><img src="mofmof10.gif" onmouseover="this.src='mofmof11.gif'" onmouseout="this.src='mofmof12.gif'" width="40" height="31" alt="モフモフ" /></div>
トラックバック(1)
トラックバックURL
(重複したものは、勝手に削除します。気になさらずに~。)
» メロ3種切り替えアイコン
from ayabittann76 ( 2005年8月31日 05:59 )
以前可愛いメロアイコン発見!!!って記事にてアイコンでの切り替えをやった旨記事に [続きを読む]
初めまして メロメロパークのロールオーバー画像お借りしました!
私も最近ヤプログから引越ししたばかりなんです。
ヤプログの際はカスタマイズで参考にさせて頂いてました^^;
移行作業 大変だと思いますが 頑張ってください♪
> nyancyさん
こんにちは~。
元ヤプログ仲間さんですねv
fc2さんも使い勝手がよくて良いですね~。
やはり夜になると重いとかは聞きますが(これは、ある程度はしょうがないのでしょうが)。
画像、利用してもらえると嬉しいですv
以前お世話になりましたあやびったんです
再度設置の方法を自分なりに記事にして理解しようおもい記事にしました でも結構わすれてるもんですね^^;なさけないです 再度ここにおじゃましたらこれまたとっても親切に説明されておりタダリンク貼ればよかったとおもいました^^ははははっでも復習にもなり再度あらたな発見もあり感謝しています ありがとうございました
> ayabittann76さん
私(自分でやりやすいように作っているので分かっている)と、設置される方とは違いますからね;
多分つまづきやすいポイントとかもあるのでしょうが、私にはなかなかそれがわからなくって・・・。
ですから、説明してもらえると嬉しいですv
はじめまして。
メロパークのロールオーバーのアイコンお借りしました。
とてもかわいいです☆
これからもがんばってください
> ゅかさん
こんにちは~。
可愛がってもらえると嬉しいです~♪
はじめましてこんにちは^∀^
ロールオーバーセットをお借りしました!
かわいくてお気に入りです。
ありがとうございましたm(_)m
> bocoriさん
ご利用、ありがとうございます~。
可愛がってもらえると、嬉しいです♪
はじめまして。
ロールオーバーのアイコンお借りしました。
無事設置できました。
どうもありがとうございます。
初めまして。
まる・かと申します。
ロールオーバーアイコンをお借りしました。
かわいくって、どこにあるんだろう?と気になっていたので、
なんとか無事に設置できて嬉しいです♪
どうもありがとうございました。
メロの友達申請もさせていただきましたので、
どうぞよろしくお願いします。
以前から、ロールバーアイコンお借りしていました^^;
今回、質問を受けたので、こちらへのリンクと紹介およびアメブロでの設置方法を記事にさせていただきました。
問題あるようでしたら、ご連絡いただけましたらすぐに対応させてもらいますのでよろしくお願いします。
はじめまして♪
ロールオーバー + 背景お借りしました。
実はどこのサイト様で配布されているんだろう?とずっと探していたので、見つかってとても嬉しいです^^
ありがとうございました♪
> ちほっこさん、まる・かさん、cocoさん
こんにちは~。
利用してもらえて嬉しいですv
設置がややこしいですが、良かったら可愛がってやってくださいませ。
> さるさるさん
メロ切り替えスクリプトと併用だと、またちょっと違うんですよね(私はさぼって解説してませんが;)。
私は説明下手なので、こういうのを書いてもらえると助かりますv
とーこさん、はじめまして!
メロチェンジャー用の素材お借りしました。
動きがとっても可愛いです^^
素敵な素材ありがとうございました。
はじめましてヽ(゚∀゚)ノ
メロメロのバナーとアイコンDLさせていただきました♪
後、ヤプログのツリー式タグの方も勉強させてもらったんですけど・・やはりσ(。・ω・。)には無理があり゚(゚ノ∀`゚)゚。アヒャヒャ。でも勉強になりましたヽ(゚∀゚)ノ
ありがうございました┏o ペコリーン
こんにちは。
私もとうとう2匹目のメロちゃんを飼ってしまいました。
で、ロールオーバーのアイコンをお借りしました。
理解するのに結構時間がかかってしまいましたが、
何とか設置することができました。
ありがとうございました。
それから「りねむちゃん」にメロ友の申請をしたいと思いますので、
よかったらお友達になってくださいね。
はじめまして こんにちは。
ロールオーバーと背景をお借りしました^^
とってもかゎいくてお気に入りです♪
無知な私にもわかりやすくソースを書いてくださって
ありがたいです。
私はヤプログなのですが、アイテムリストなどフラッシュのアップが出来なくて苦戦中デス^^;
こちらで少し勉強させていただこぅと思います。
よろしくおねがいしまーす^^
はじめまして、ゆっかと申します。
メロパのチェンジャのアイコンセットをお借りしました。
ずっとこのアイコンの配布サイトを探していました。
見つかってとても嬉しいです。
早速アイコンセットを取り替えます。
ありがとうございました。m(_ _;)m
> diffiさん、りこさん、Mayumi♪さん、みぃさん、ゆっかさん
ご使用報告、ありがとうございます~。
やっぱりコメント頂けると、使ってくれる人がいるんだって実感できて嬉しいです♪
可愛がってやってくださいv
・・・設置がややこしいですけどTT
はじめまして、おれんじと申します。
ロールバーアイコン、背景を借りました☆
最初は設置が出来なくて、くやしかったですけど、今やっと設置出来るようになって、うれしいです♪
メロチェンジャーのアイコン、どこにあるのかな?と捜してたら、ここのサイトがあって、役にたちました!
どうも、ありがとうございました。m(_ _)m
これからも、頑張って下さい♪
初めまして、ブログ友達に教えてもらってここに来ました(*´∀`)
ロールオーバーアイコン+背景を使わせてもらおうと思って
早速タグを設置したのですが、表示されないんです・・・Σ(´Д`;)
上のほうにある、アイコン+背景のタグを合わせてあるタグを
そのままチェンジャーの設定の所に貼ればいいんですよね?
もちろん、画像のアドレスは1つずつちゃんと貼っていきました・・・。
初めまして。まいのと申します。
ロールオーバー+背景を借用させていただきました。
おかげ様でようやく納得のいく形で2匹飼えるようになりました。
ありがとうございました。
はじめまして☆アイコンお借りしました!
かわいいですね(*^^)v
でもカーソルを持っていくと背景が透化されないんです。。。なぜでしょう??
> おれんじさん、まいのさん
ご使用報告、ありがとうございます~。
可愛がってもらえると、嬉しいです♪
> ●蒼依●さん
えぇと、他の素材利用で解決ってことですよね。
レス遅くてすみません・・・TT
> yossyさん
どうやら、マウスオーバー時の画像背景が、透過されないようになっているようです。
再度、画像をダウンロードしなおしていただけますでしょうか。
↓
初めまして。
ロールオーバーのソースを参考にさせて頂きました。
解説が親切でとても分かりやすいです。
これからも頑張って下さい。
> Luroniさん
お役に立てたなら、良かったですv
跳ねるRSSアイコン、可愛いですね~。
アイコン、お借りしました。
かわいくてとても気にってます♪(●´艸`●)ムピ♪
オイラもしばらくお借りします。( :D)┓アヒャペコリ
あと、勝手にこちら紹介してるのですが、
まづいようでしたらおっしゃってください
初めまして!
ヤプログカスタマイズの方で”記事の日付表示を右寄せ”
にしたくてお邪魔したんですが。。。(^^;
それは上手く出来ず(×△×)メロのRSSアイコンを見付け、
とっても可愛かったのでお借りしました♪
メロダチ申請もさせて頂いたのでよろしくお願いします!
> らきさん
良かったですv
可愛がってやってくださると嬉しいです♪
> みやびさん紹介、ありがとうございます~。
まずいこともなく、嬉しいです~。
> とかげさん日付右寄せはできませんでしたか・・・。
テンプレートの変更箇所が多いと、難しくなりますよね;
アイコンも気に入ってもらえて良かったですv
はじめまして^^
メロチェンジャー用に背景とロールオーバー画像をお借りしました♪これから設置がんばってみます(^^;
ありがとうございましたm(._.*)mペコッ
はじめまして!この度はロールオーバのアイコンをお借りしました。設置方法がどこよりもわかり易く、大変有難うございました。
とーこさん、初めまして。
こちらのアイコンと背景画像をお借りしました。ありがとうございます。
早速、設置し、メロチェンジャーも無事動作しているのですが、
アイコンの背景が抜けてブログのバックグラウンドカラーが見えています。
皆様のブログを拝見して回ったのですが、同じ事例はなく・・・。
お手数をお掛けしますが、お時間のある時にアドバイスを頂けますでしょうか。
よろしくお願い致します。
> 夏樹さん、姫うさぎさん
ご使用報告、ありがとうございます~。
可愛がってもらえると、嬉しいです♪
> マヤさん
こんにちは。
というか、遅すぎますね、スミマセン;
まだ見ているようなら、ソースを見させてもらえれば何かできるかもしれませんが・・・遅いですねTT
背景&ロールオーバーのアイコンお借りしました。
なんとか設置も出来て可愛くて気にいってます!