FC2ブログランキングバナー
記事の冒頭(↑)と、ブログ右上のプラグインに置いてある
ブログランキングのバナーをリニューアルしてみました。
以前から、「官公庁ビックリバイト体験4コママンガ」という
ブログにあるバナー(クリックするとバナナがむける)のような、
かわいい&思わずクリックしたくなるバナーにしたいなぁ、
と思っていたのですが、クリックしたら画像が変わるバナーの
作り方がわからず・・・
ところが先日、あし@のあしともさんにやり方を教えて頂いて、
ようやく作ることができました!
まず、果物アイコンとランキングアイコン、2つの画像の組合せ
ですが、JTirmというフリーソフトを利用して作りました。
JTirm起動後の画面に、1つ目の画像をドラッグ&ドロップして、
編集→連結を選んでから、詳細設定を行うと作成できます。
JTirmの使い方・解説サイト
りんごの色が点滅しているアニメーションは、2色のりんご画像を
元に、↑の操作で、2つの組合せ画像を作った上で、Visual G++
という、動くバナー(GIFアニメ)を作るソフトで作成しました。
(動くバナーとランキングバナーを最初から組み合わせると、
なぜか動かなくなってしまうので・・・変則的な作り方かもです)
Visual G++を起動した画面の左側に、画像を、動かしたい順番に
ドラッグ&ドロップして、GIFアニメ化のボタンを押すとできあがり。
(ディレイーの数字を大きくすると、動きがゆっくりになります)
※りんごとバナナのアイコンは、下記サイト様から頂きました。
-りんご・・・素材屋カララバ 様
-バナナ・・・ザ源氏のしっぽ 様
こうして、オリジナルバナー(今回のは、かなりパクリですが。。(汗))
ができたら、実際にバナーを貼る記事やプラグインの中で、
クリックしたら画像が変わる設定(下記)にします。
※onclickを、img srcで始まる画像設定タグ内に挿入します。
-------------------------------------------------
onclick="this .src='クリックしたときに表示する画像URL'"
-------------------------------------------------
これで、↓のように、クリックすると、完熟した赤いりんごが
表示されるバナーの完成です!
なお、マウスカーソルをあわせたときの画像を変えたいときには、
-----------------------------------------------------
onmouseover="this .src='カーソルをあわせたときの画像URL'"
onmouseout="this .src='カーソルを外したときの画像URL'"
-----------------------------------------------------
のように設定します。
こうしたバナーで、少しでもアクセスアップにつながるといいですよね。
また機会があったら、改良 or 新しく作ってみたいと思います。 ^^
- 関連記事
-
- 小室哲哉作曲(TM NETWORK)、お気に入りの癒し曲動画
- 思わずクリックしたくなるブログランキングバナー? ~ 2つの画像の組合せ&動く&クリックすると画像が変わるバナー
- ソフトバンクCM犬のカイ君、DVDに予約殺到! ~ ビクターのニッパーとも共演 (カイ君の紹介・CM動画掲載)
きんととさんのブログのバナー、本当に参考にさせて頂き、大変感謝しています(正直パクリです。。)。 m(_ _)m
きんととさんのバナーの絵(&記事のマンガ)は素敵ですね~。
私は絵心がないので、ただただ尊敬です。
こちらこそ、これからもよろしくお願い致します。 m(..)m
ありがとうございました。
実は私も難しくて作れません。(笑)
絵だけ用意して、いつも夫か身内に頼んでおります。
重度のパソコン音痴です。(恥)
ステキなバナーが出来ましたね。
パクリなんてとんでもない、
思わず手を伸ばしたくなる
オリジナルバナーですよ。
私のバナナは少々Hバナナなので…
(笑)
折角なので、
バナナバナーの作成秘話を
トラックバックしてみたのですが、
うまく送れなかったようです。
やはり少々じゃなかったのかのう。(笑)
またぜひお話しましょう。ぽちぽち
クリックする方が、少しでも楽しめるバナーだとうれしいですね。 ^^
どんどん押したくなっちゃいますよね
(しかも、発想もほぼパクリですし ^^;)
カテゴリーのツリー表示は、このブログの左上のような感じでしょうか?
このツリーは、簡単なJavaScriptで作りました。
今回使った画像ソフトは、かなり使い勝手よかったです。
それと、記事にリンクを載せた解説サイトがとてもわかりやすいので、あまり時間をかけずに作れました。
時間があるときに、ぜひ挑戦してみてください。 ^^
本当にありがとうございました!
少し時間が取れたので、作ってみました。 ^^
私もブログのディテールを工夫したいのですが、初心者なのでよく分からず・・・^^;
特に、カテゴリーをツリー化(サブカテゴリーを作って細分化)したいんですけど、ココログは難しそうですねTT
でも、見ている方により楽しんでもらえますよう、頑張っていきます!^o^
私もやってみようかと思いますが
しばらく出来ないかなー?
時間があるときに挑戦したいと思います。
画像フリーソフトは色々ありますが、これは使い勝手いいですか?
これはポチポチしてみたくなります
仕事が早いですね
可愛いリンゴちゃんに応援ポチっ
何せデザイン&絵のセンスがないので。 (^^;
完熟真っ赤に変身するんですね~。
可愛い! 私も作るのチャレンジ
してみます(^_^)v
この記事にトラックバックする(FC2ブログユーザー)
Copyright © 2006 癒しの音楽試聴~イチオシ♪ヒーリング・ミュージック All rights reserved.
Template by ブログ アフィリエイト SEO テンプレート