ほぼコピペでOK！スクロール追従型の広告をサイドバーに設置する方法

TechMemo > JavaScript >

ほぼコピペでOK！スクロール追従型の広告をサイドバーに設置する方法

himecas
2013/05/02
JavaScript
6 Comments
ほぼコピペでOK！スクロール追従型の広告をサイドバーに設置する方法

下にスクロールするとサイドバーの広告などがついてくる追従型のコンテンツをよく見かけるようになりましたね。やはり常に画面内にあるコンテンツの方がクリック率は高まります。

当ブログでもソーシャルボタンがついてくる Sharebar という WordPress プラグインを導入していますが、プラグインを使わなくても実装することは可能です。プラグインを使わない方が、広告など自分の好きなコンテンツを設置することができていいかもしれませんね。

また、スクロール追従型のコンテンツは一番下までスクロールすると、フッター部分に被っていることがよくありますね。今回ご紹介する方法では、フッター部分に被ることもありません。

少しだけ環境に合わせて変更するだけでほぼコピペで設置できちゃうので、スクロール追従型コンテンツを設置したいと思っている方はぜひ参考にしてみてください。

jQueryのロードとスクリプトの貼り付け

スクロール追従型のコンテンツを配置する場合、まずは jQuery のロードと追従用のスクリプトを追加する必要があります。

以下のコードを <head>～</head> 内か </body> の直前など、好きな場所に貼り付けてください。よくわからない場合は、</body> の直前に貼り付ければOKです。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
(function(){
  $(function(){
  var fix = $('#side-ad'), //固定したいコンテンツ
  side = $('#sidebar'), //サイドバーのID
  main = $('#content'), //固定する要素を収める範囲
  sideTop = side.offset().top;
  fixTop = fix.offset().top,
  mainTop = main.offset().top,
  w = $(window);

  var adjust = function(){
    fixTop = fix.css('position') === 'static' ? sideTop + fix.position().top : fixTop;
    var fixHeight = fix.outerHeight(true),
    mainHeight = main.outerHeight(),
    winTop = w.scrollTop();
    if(winTop + fixHeight > mainTop + mainHeight){
      fix.css({
        position: 'absolute',
        top: mainHeight - fixHeight
      });
    } else if(winTop >= fixTop) {
      fix.css({
        position: 'fixed',
        top: 0
      });
    } else {
      fix.css('position', 'static');
    }
  }
  w.on('scroll', adjust);
  });
})(jQuery);
</script>

スクリプトの変更

貼り付けたスクリプトは一部分だけ環境に合わせて変更する必要があります。それは以下の3行です。

var fix = $('#side-ad'), //固定したいコンテンツ
side = $('#sidebar'), //サイドバーのID
main = $('#content'), //固定する要素を収める範囲

var fix = $(‘#side-ad’) の #side-ad には、固定したいコンテンツが囲まれている ID を入力します。side = $(‘#sidebar’) の #sidebar にはサイドバーの ID を入力します。main = $(‘#content’) の #content にはメインコンテンツ部分の ID を入力します。

それぞれ環境に合わせて変更してください。これらをちゃんと変更しないと正常に動きません。

また、サイドバーなどに ID が振られていない時は、ID を指定してからスクリプトを変更してください。

CSSの変更

サイドバーには position:relative; を指定しておく必要があります。そのため、以下のようにサイドバーの CSS を変更してください。

#sidebar {
  position:relative;
}

ここまで完了したら、スクロール追従型コンテンツの設置完了です。あとは、固定したいコンテンツの中に広告を入れて追従させちゃいましょう。

注意点

Google AdSense の広告をスクロール追従型にするのは、ガイドライン違反になるので気をつけましょう。ガイドラインに違反すると最悪アカウントが停止されます。

有名なサイトでやっているところもありますが、あれは特別に許可されているらしいです。

あとがき

ちょっと複雑に見えるかもしれませんが、実際に作業してみると意外と簡単です。ID を調べるのを入れても 5～10 分くらいで終わっちゃうと思います。

この記事が気に入ったら
いいね！してね♪

シェアする
ツイートする
Twitter で

6 thoughts on “ほぼコピペでOK！スクロール追従型の広告をサイドバーに設置する方法”

  1. アフィ

    とうとう追尾型まできましたかぁ…
    ほんとアフィリエイトはうっとおしい（´-`）.｡oO（ステマもな

    Reply ↓
    1. himecas Post author

      アフィさん、
      コメントありがとうございます。

      広告は邪魔だと思う人も多いですよね。。。ブログ運営者にとっても難しいところだと思います。
      追尾型はクリック率がいいらしいので少し前から流行ってますね。

      Reply ↓
    1. himecas Post author

      タロウさん、コメントありがとうございます。

      途中までしか追従させないためには、固定する要素を収める範囲である「main = $(‘#content’)」のIDを変更します。
      ※スクリプトの7行目です。

      収める範囲を変えてあげれば、そこまでしか追従しません。

      Reply ↓
  3. けんいち

    質問させてください。
    こちらのものをコピーしてサイドバーが追従するようになりました。
    ありがとうございました。

    しかし、これを少し修正できたらと思っています。

    私はサイドバーに人気記事ランキングを15位まで設置しているのですが、
    サムネイル付きなのでスクロールしないと
    下のほうが見られない状態です。

    なので、このスクリプトを使用した場合、
    サイドバーのトップの部分がついてくるので、
    しばらくスクロールしてやっと下の順位が表示されるようになっています。

    これをサイドバーの下の部分が画面に追従してくるように
    変更することは可能でしょうか？

    よろしくお願いいたします。

    Reply ↓

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です