2010'03.30.Tue

楽しいバナーの作り方☆

もうすでに、いつも見に来て頂いている皆さんは、気づかれていると思いますが、
そうです☆ バナー新しくしたんですよ~♪
(各記事のページでしか表示されませんので、最新記事の記事名をクリックするかコメント欄を開いてみてください)
結構、評判が良いので、今日はその作り方というか、オンマウスで切り替わるオリジナルバナーのタグの書き方をご紹介します。

ハエさん

え~、まず、今回作成したバナーは、3つの画像が使われています!
A画像:最初の画像「ハエ穫って~」画像
B画像:マウスを上に持って来た時に切り替わる画像
C画像:クリックした時に出て来る画像

ハエさん

ひとまず、A画像、B画像、C画像としておきます!
その画像をブログにアップロードして、アップロード先のURLをメモしておいてください。

ハエさん

そして、下記のソースをコピーしてください。
赤字、ピンク字を差し替えて、そのままブログにペーストしてください。

<a href="http://cat.blogmura.com/" target="_blank" onmouseover="rollover.src='B画像URL'" onmouseout="rollover.src='A画像URL'" onmousedown="rollover.src='C画像URL'"><img src="A画像URL" name="rollover" border="0"></a>

ハエさん

赤文字のURLは、リンク先のURLです。
(現在は猫ブログのURLになっていますので、お好きなリンク先に差し替えてください。)

ピンクの文字が画像のURLを入れる部分です。
A、B、Cそれぞれに、オリジナル画像のURLを入れると、下記のようなバナーになるはずですよ~☆

う~ん、どうですかね?
結構、分かりやすく書いたつもりなんですが。。。

トップページで表示できないのが難点。。。
各記事のページだと、ちゃんと切り替わるんですがね。。。
やっぱ、javascript書き込んだ方がいいのかしら?

少しでも、お役に立てたようでしたら、下でハエをポチっとお願いします~♪
↓↓

スポンサーサイト
ガオトラックバック(1)  コメント(18)
Next |  Back

じゃむのアレ

うわぁ~い(大喜)
めちゃめちゃ役に立ちますよ~コレ!
次のお休みで
ぜひ制作挑戦したいと思います!
飼い主さん、アリガトー><

2010/03/30(火) 08:39:25 | URL | [ 編集]

あんずミャミャ

私、プログラミングとかカスタマイズとか全くできない人なので
こういう記事は本当にありがたいです!!
私にできるかは不明ですが・・・(^^;
この記事、保存して、ぼちぼち作ってみたいと思います!
ありがとうございます!

2010/03/30(火) 09:11:57 | URL | [ 編集]

catnap

ブログサービスによって使えないタグもあるから
難しいとこだよねぇ

でもバナー替えるとクリック率高くなるから
マメにかえたいとこだね!
面倒でずっと使い回しだけど・・・

2010/03/30(火) 09:56:03 | URL | [ 編集]

cocomama

飼い主さん、ありがとうございます(^^♪
やってみます!!!
もっと勉強しないととは思っているのですが、覚えるより忘れる方が多い今日この頃…

2010/03/30(火) 11:12:08 | URL | [ 編集]

m+y

うちも マウスを乗せた時に画像が変わるパターンは
所々に使っているんですが やっぱりクリックした時にも
画像が変わると 更に楽しいですよね~♪
それに ますます押したくなるもん^^v
あぁー うちもやっぱり バナーそろそろオリジナルに戻そうかな・・・

2010/03/30(火) 12:08:49 | URL | [ 編集]

みい

そうそう「こういう使い方があったのね」って
このブログで気付いた(爆)
記事写真には使ったことあるけど、バナーは まだだったわ^^;
つーか、オリジナルバナー作り直そうと思いつつ後回しだったし(苦笑)

お祝いコメントありがとうございます^^
もしyoutubeにガオちゃんの動画をアップしてるなら
動物チャンネルに掲載して貰えると思いますよ♪
芸が無くても 可愛さだけで充分^^
掲載する動画、募集してましたよ^^
よかったら応募してみてね。

2010/03/30(火) 12:39:29 | URL | [ 編集]

たま

javascriptだと読み込みがちょっと・・^^;
出先でクリックできなくなるので、このままのほうが私はありがたいです~。

2010/03/30(火) 15:15:55 | URL | [ 編集]

やらいちょう

なるほどなるほど。
グラフィック専門の自分は
こういう方面には非常に疎いのでためになります。
今度試してみますね!

2010/03/30(火) 15:58:41 | URL | [ 編集]

ズッコのマミィ

バナー、可愛くって、楽しいですねー!
私には何が何やらちんぷんかんぷんですが・・・
あ、説明の仕方問題じゃなくって私の脳みその問題です。
週末にアビちゃんの本物見てきましたよ~!
ちびっこがいて、そいつがもう可愛くって鼻血が出ました。

2010/03/30(火) 16:08:57 | URL | [ 編集]

youbobo

なるほどなるほど@@
ひじょうにわかりやすいです~^^v

2010/03/30(火) 17:54:51 | URL | [ 編集]

-

このコメントは管理人のみ閲覧できます

2010/03/30(火) 17:58:04 | | [ 編集]

タフィー104

シマッタ!
また意味も無く3回も押してしまった・・
バナーの作り方わかりやすかったです。
早速作らなくては・・・・
あ、ランキングやってなかった(笑)

2010/03/30(火) 19:39:02 | URL | [ 編集]

めんまねえちゃん

ほえー。
あれですね。実際にタグうってみないと、
で、「ああ。なるほど!」とならないと
よくわからない感じがしちゃうものなんですよね。
説明は丁寧にしてくださっているのにー。
こんどやってみよう。(こんどっていつだろ?笑)

2010/03/30(火) 22:35:30 | URL | [ 編集]

にゃごママ

今週、繁忙期でバタバタな為
高速訪問とさせてもらいっています☆

これ、ぜひやってみたいです(≧∇≦)

いつもありがとです(*^-^)ゞ♪

2010/03/30(火) 23:13:12 | URL | [ 編集]

猫男爵

そっか、切り替わる時と切り替わらない時が
あるから何でだろうと思ったらトップページだったんですね。(^^;)

でも、何でトップページだとダメなんでしょうね?(・_・?)

ウチもいつか、おまけの画像をランダムで表示させようと
思ってるんですけど、javascript入れたりとかって
あんまり良くなさそうだなと思って躊躇してます。(^-^;

2010/03/31(水) 01:04:54 | URL | [ 編集]

しま

おお~!
タグを書いてくれてあるっ♪
助かります^^
ワタシタグの知識が無いのでいつもネット上を探し回るんです^^;
今度何か作ってみよーっと!

2010/03/31(水) 02:04:11 | URL | [ 編集]

sakura-sunsun

こんにちは~!
クリックした後の画像まで違うのが出てくると、楽しいですね☆
思わず私も何回もクリックしてしまいました(笑)
私も作ってみようかな~などと思ってしまいました(^^;

2010/03/31(水) 14:27:17 | URL | [ 編集]

えりぽん

私は、アメブロしてます♪
作り方が簡単で、とっても素敵なので私も作りたいと思い、作りました!

アメブロに貼ろうと思ったんですけど、
「禁止タグが入っています。エラー」となって、貼ることができません(涙)
どうすればよろしいでしょうか?

もしよければ、私のブログに解決策を書いていただきたいです!
できればでいいので^^
わがまま言ってすいません m(><)m

2012/08/22(水) 00:25:00 | URL | [ 編集]

コメントの投稿











 管理者にだけ表示を許可

トラックバック

この記事のトラックバックURL

ぽちぽちバナー

  「 のびのびガオガオ」さんの記事を参考に作ってみました。画像がうまく切り変わらなかったので、GIFでアニメに。真ん中は日の目をみなかった、ありがとー画像。地味に手間がかかったけど、こういうちまちました作業は好きです。

2010/06/10(木) 11:10:09 | 日々、猫のこと。