ファンブログ カスタマイズ　ぽあろの休日

セミナー記事も完結したことだし、いい加減TOP下のリンクを
変えなきゃな〜と、ずっと思いつつ、早1週間。

いい機会なので、今回ズバッと心機一転、
ローテーションバナーを設置してみました。

１．ローテーションバナーとは？

　ローテーションバナーがどういうものかというと、
　アフィリエイトサイトなどによく見られる、一定時間毎に切り替わるバナーのことです。

　A8のサイトで例を挙げると、TOP下のこれですね。



　　



　アフィリエイト目的なら、A8の機能として用意されているので、
　すぐファンブログで使用することができます。


　ローテーションバナーの作成方法
　　A8で提供されているローテーションバナーの作成方法です。
　　A8のアフィリエイトで使用することができます。



　今回は、ブログの記事紹介で使用するので、独自に設置するのが目的です。

２．ローテーションバナーを設置するメリット

　まずは、ローテーションバナーを設置するメリットを考えてみましょう。
　私が思うメリットは以下の３点です。


　１）設置スペースのスマート化

　　例えば、４種類のバナーを設置しようとすると、当然のごとく
　　４つ分のバナースペースを確保する必要があります。
　　こんな感じですね。


　　　　


　　かなりのスペースを占有してしまいます。
　　あと、バナーを増やしすぎると、ごちゃごちゃ感もちょっと否めませんよね。

　　ローテーションバナーを使うと、このスペース問題が一掃されます。


　　　　



　２）画像表示による情報量アップ

　　バナーの利点の一つに、画像を使用できるというのがあります。
　　味気ない文字だけのリンクより、画像を使用したリンクのほうが訴求力が高いですよね。
　　また、より詳しい内容を明記出来る点でも優れています。



　　例えば、

　　　　・カスタマイズ

　　よりも、


　　　　


　　の方が、より興味を惹かれるのではないでしょうか。



　３）動的コンテンツによるアピール性

　　人というのは、動きがあるものを無意識的に追う習性があります。
　　これは、ブログやサイトでも同様で、動きのあるコンテンツは
　　訪問して頂いた読者の目に止まります。


　　こちらは、動画ではなく、アニメーションGIFと呼ばれる画像で作られています。


　　　　


　　画像だと思っていたものが、急に動き出すとびっくりしますよね。
　　詳しくはこちらのサイトで。

　　多くのサイトにおいて、TOPページの目に入りやすい所に動的コンテンツが
　　設置されていることからも、その重要性が垣間見れます。

　　一定間隔でアニメーションをし続けるローテーションバナーは、
　　まさにこの動的なコンテンツと言えます。


　以上、メリットを挙げていきましたが、もちろん、デメリットもあります。
　その最たるは、独自で設置するのがちょっと面倒という点です。
　どうしても、ある程度Flashやスクリプト言語について学ぶ必要があります。

　前述したA8のローテーションバナーのように、提供されているブログパーツを
　使用する場合は、簡単に設置出来るのですが…。

４．ちょっと機能を追加してみよう

　以上で一通り実装はできたのですが、使っていて不便と思った所があったので、
　ちょっと独自で機能追加をしています。


　１）バナーにマウスオーバーした時の処理

　　サンプルでは、マウスがどの位置にあろうと、一定時間が経過したら次のバナーへと
　　移動するようになっていました。

　　これって、タイミングによっては、いざクリックしてみようって時に、
　　次のバナーに移ってしまう可能性があるんですよね。


　　　


　　この点を解消するために、バナーにマウスカーソルがある場合は、
　　タイマー処理を停止するようにしました。

　　同時に、バナーからマウスカーソルが外れた場合、タイマーを再開する処理も
　　組み込んでいます。

 
	//バナーにマウスオーバー時、タイマーストップ
	$('#banner ul li').mouseover(function() {

		//タイマーストップ
		timerStop(timerID);
	});

	//バナーからマウスアウト時、タイマー再開
	$('#banner ul li').mouseout(function() {
		timerStart();
	});
    
	function timerStart() {

		var _timer = 6500;	//タイマー時間
	
		//一定時間ごとにimageMoveを実行
		timerID = setInterval(function(){
			imageMove(_current +1);
		}, _timer);
	}

	function timerStop(timerID) {

		//タイマーストップ
		clearInterval(timerID);
	}    

　　新規に関数timerStart、timerStopを作成、clearInterval関数を使って、
　　一時的にタイマー処理を止めています。



　２）ページネーションにマウスオーバーした時の処理

　　バナー下にあるページネーションについても１）と同様の事がいえるので、
　　こちらも処理を追加しています。


　　　

５．今後の改善点

　今後の改善点としては、以下の３点を考えています。
　まとまった時間がとれた時にでも、チャレンジしてみたいと思います。

　
• バナーにマウスオーバー時、左右に移動矢印を表示。
  矢印クリックで、前後のバナーへ移動出来るようにする。


• ページネーションクリック時に、直接バナーのリンク先に
  移動出来るようにする。


• 現状、必ず始めに１つ目のバナーが表示されてしまうので、
  開始バナーをランダムにする。

以上、ファンブログにローテーションバナーを設置するカスタマイズの紹介でした。
少々面倒な所もありますが、興味のある方は是非試してみてください。






【スポンサード リンク】