今回はスクロールバナーを作成してみました。スクロールバナーとはマウスのホイールに追随して移動する広告のことです。こうすることで、常に広告がユーザーの目にとまるようになり、クリック率の増加が期待できます。
また、作成方法も「css」と「jQuery」をほんの少し追加してあげるだけです。
デモサイト
こちらから
追加したコード
/*画面右側に広告表示*/
#jq-fixbanner{
background-color:#fff;
position:absolute;
top:250px;
right:-200px;
width:150px;
height:300px;
padding:20px 20px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
border-radius: 5px;
box-shadow:3px 3px 3px rgba(0,0,0,0.4);
}
/*広告の間隔*/
#jq-fixbanner p{
padding:30px 0 0 0;
font-size:16px;
}
追加したコード【fixbanner.js】
$(function() {
var fixarea = $('.fix');
var fixTop = fixarea.offset().top;
$(window).scroll(function () {
var winTop = $(this).scrollTop();
if (winTop >= fixTop) {
$(fixarea).css({ positon:'fixed', top:'100'});
}
if (winTop <= fixTop) {
$(fixarea).css({ positon:'relative', top:winTop});
}
});
});
設置方法
設置するページの<head>～</head>に以下のコードを記述
フォルダの格納場所は、各自変更してください。
<!--サイド広告(スクロールバナー)--> <link href="css/jqfixbanner.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="js/fixbanner.js"></script>
コンテンツの中に以下のコードを記述
hpb18のテンプレートを使用している場合、「<!– aside end –>」の次の行に挿入してみてください。
<div id="jq-fixbanner" class="fix"> <p>広告１</p> <p>広告２</p> <p>広告３</p> <p>広告４</p> </div>
以上でスクロールバナーの設置が完了です。