思わずクリックしたくなるブログランキングバナー? ~ 2つの画像の組合せ&動く&クリックすると画像が変わるバナー | 癒しの音楽試聴♪イチオシ!ヒーリングミュージック

極上の癒し系音楽・ヒーリングCDを、無料試聴&動画視聴ページと共に紹介。 CD最新リリース情報・売上ランキングも随時更新!
♪ ヒーリングCDリリース情報(2017年1~6月) ~ 試聴&紹介 ♪

♪ ヒーリングCD最新売上ランキング Best 5 ~ 試聴&紹介 ♪




↓りんごをクリックして、完熟させてね♪ (ランキングサイトが開きます)
 クリックして、りんごを完熟させてね♪
FC2ブログランキングバナー
記事の冒頭(↑)と、ブログ右上のプラグインに置いてある
ブログランキングのバナーをリニューアルしてみました。

以前から、「官公庁ビックリバイト体験4コママンガ」という
ブログにあるバナー(クリックするとバナナがむける)のような、
かわいい&思わずクリックしたくなるバナーにしたいなぁ、
と思っていたのですが、クリックしたら画像が変わるバナーの
作り方がわからず・・・

ところが先日、あし@のあしともさんにやり方を教えて頂いて、
ようやく作ることができました!

まず、果物アイコンとランキングアイコン、2つの画像の組合せ
ですが、JTirmというフリーソフトを利用して作りました。

JTirm起動後の画面に、1つ目の画像をドラッグ&ドロップして、
編集→連結を選んでから、詳細設定を行うと作成できます。

JTirmの使い方・解説サイト

 apple_184_r.gif

りんごの色が点滅しているアニメーションは、2色のりんご画像を
元に、↑の操作で、2つの組合せ画像を作った上で、Visual G++
という、動くバナー(GIFアニメ)を作るソフトで作成しました。
(動くバナーとランキングバナーを最初から組み合わせると、
なぜか動かなくなってしまうので・・・変則的な作り方かもです)

Visual G++を起動した画面の左側に、画像を、動かしたい順番に
ドラッグ&ドロップして、GIFアニメ化のボタンを押すとできあがり。
(ディレイーの数字を大きくすると、動きがゆっくりになります)

 apple_green_anime.gif

※りんごとバナナのアイコンは、下記サイト様から頂きました。
 -りんご・・・素材屋カララバ
 -バナナ・・・ザ源氏のしっぽ

こうして、オリジナルバナー(今回のは、かなりパクリですが。。(汗))
ができたら、実際にバナーを貼る記事やプラグインの中で、
クリックしたら画像が変わる設定(下記)にします。

onclickを、img srcで始まる画像設定タグ内に挿入します。
-------------------------------------------------
onclick="this .src='クリックしたときに表示する画像URL'"
-------------------------------------------------

これで、↓のように、クリックすると、完熟した赤いりんごが
表示されるバナー
の完成です!

 クリックして、りんごを完熟させてね♪

なお、マウスカーソルをあわせたときの画像を変えたいときには、
-----------------------------------------------------
onmouseover="this .src='カーソルをあわせたときの画像URL'"
onmouseout="this .src='カーソルを外したときの画像URL'"
-----------------------------------------------------
のように設定します。

 

こうしたバナーで、少しでもアクセスアップにつながるといいですよね。
また機会があったら、改良 or 新しく作ってみたいと思います。 ^^
関連記事
コメント
この記事へのコメント
>きんととさん
ご丁寧にメッセ頂きまして、ありがとうございました!
きんととさんのブログのバナー、本当に参考にさせて頂き、大変感謝しています(正直パクリです。。)。 m(_ _)m
きんととさんのバナーの絵(&記事のマンガ)は素敵ですね~。
私は絵心がないので、ただただ尊敬です。
こちらこそ、これからもよろしくお願い致します。 m(..)m
2008/09/24(水) 20:07 | URL | りぃみぃ>きんととさん #jI5XCJ0.[ 編集]
バナナバナーのきんととです。(笑)このたびはご紹介下さり、
ありがとうございました。

実は私も難しくて作れません。(笑)
絵だけ用意して、いつも夫か身内に頼んでおります。
重度のパソコン音痴です。(恥)

ステキなバナーが出来ましたね。
パクリなんてとんでもない、
思わず手を伸ばしたくなる
オリジナルバナーですよ。
私のバナナは少々Hバナナなので…
(笑)
折角なので、
バナナバナーの作成秘話を
トラックバックしてみたのですが、
うまく送れなかったようです。
やはり少々じゃなかったのかのう。(笑)
またぜひお話しましょう。ぽちぽち
2008/09/24(水) 01:07 | URL | きんとと #98YKPiUA[ 編集]
>羽毛球だいすき。さん
ありがとうございます。
クリックする方が、少しでも楽しめるバナーだとうれしいですね。 ^^
2008/09/17(水) 20:56 | URL | りぃみぃ>羽毛球だいすき。さん #jI5XCJ0.[ 編集]
すばらし~
どんどん押したくなっちゃいますよね
2008/09/16(火) 23:41 | URL | 羽毛球だいすき。 #c0nfB4DA[ 編集]
>コリアマスターさん
いえいえデザインだなんて・・・2つの画像を横に並べただけですので。
(しかも、発想もほぼパクリですし ^^;)
カテゴリーのツリー表示は、このブログの左上のような感じでしょうか?
このツリーは、簡単なJavaScriptで作りました。
2008/09/16(火) 21:20 | URL | りぃみぃ>コリアマスターさん #jI5XCJ0.[ 編集]
>トッタィさん

今回使った画像ソフトは、かなり使い勝手よかったです。
それと、記事にリンクを載せた解説サイトがとてもわかりやすいので、あまり時間をかけずに作れました。
時間があるときに、ぜひ挑戦してみてください。 ^^
2008/09/16(火) 21:17 | URL | りぃみぃ>トッタィさん #jI5XCJ0.[ 編集]
>raymondさん
raymondさんのおかげで、完成させることが出来ました。
本当にありがとうございました!
2008/09/16(火) 21:15 | URL | りぃみぃ>raymondさん #jI5XCJ0.[ 編集]
>hanaさん
応援ありがとうございます。
少し時間が取れたので、作ってみました。 ^^
2008/09/16(火) 21:14 | URL | りぃみぃ>hanaさん #jI5XCJ0.[ 編集]
すごいですね^^
バナーをデザインできるなんて、すごいですね~^o^
私もブログのディテールを工夫したいのですが、初心者なのでよく分からず・・・^^;
特に、カテゴリーをツリー化(サブカテゴリーを作って細分化)したいんですけど、ココログは難しそうですねTT

でも、見ている方により楽しんでもらえますよう、頑張っていきます!^o^
2008/09/16(火) 08:02 | URL | コリアマスター #-[ 編集]
おおお 作りましたね!
私もやってみようかと思いますが

しばらく出来ないかなー?

時間があるときに挑戦したいと思います。
画像フリーソフトは色々ありますが、これは使い勝手いいですか?
2008/09/15(月) 23:52 | URL | トッタィ #-[ 編集]
おー綺麗にできてますね~
これはポチポチしてみたくなります
2008/09/15(月) 23:01 | URL | raymond #xwAxL2Zo[ 編集]
すごーいv-353
仕事が早いですね
可愛いリンゴちゃんに応援ポチっ
2008/09/15(月) 22:05 | URL | hana #-[ 編集]
>アニーさん
完全に、バナナがむけるバナーのパクリ&2つのバナーが離れてしまっているので、不正かどうかグレーゾーンっぽいのですが・・・
何せデザイン&絵のセンスがないので。 (^^;
2008/09/15(月) 21:45 | URL | りぃみぃ>アニーさん #jI5XCJ0.[ 編集]
あ~クリックすると青リンゴが
完熟真っ赤に変身するんですね~。

可愛い! 私も作るのチャレンジ
してみます(^_^)v
2008/09/15(月) 14:18 | URL | アニー #-[ 編集]
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
http://riimii.blog80.fc2.com/tb.php/313-067a0886
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック