新着記事

2016.05.11 Wednesday

ブログのサイドに追尾広告をつける方法


  1. HOME
  2. webデザイン・SEO(コーディング)
  3. ブログのサイドに追尾広告をつける方法

全てのカスタマイズ記事をまとめています。記事の投稿と一緒に更新します。↓
JUGEMスマホテンプレート徹底カスタマイズ講座まとめ


今回は自分の覚書のための記事です。

ブログのサイドメニューのところに、追尾する広告やコンテンツをつけたい方は多いのではないでしょうか。


簡単なところだとCSSでボックスにposition: fixed;を設定すればいいのですが、それだとこのボックス以外のコンテンツ幅が限られてしまって、微妙に使いにくかったりしますよね。




そうじゃなくって、




こうしたい!って方は多いはず。

以下をコピペで簡単にできます。

<head></head>あるいは<body></body>の中に
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
var nav = $('.scroll'),
offset = nav.offset();
$(window).scroll(function () {
if($(window).scrollTop() > offset.top - 10) {
nav.addClass('fixed');
} else {
nav.removeClass('fixed');
}
});
});
</script>


と記述

CSSに
.fixed {
position: fixed;
top: 20px;
left: 0px;
}

と記述。
コンテンツ位置を調整する場合は
top: 20px;
left: 0px;
のpxの数値を変えてください。

追尾させたいコンテンツを
<div class="scroll">
ここに追尾させたいコンテンツ
</div>

<div class="scroll"></div> で囲みます。






こちらの記事はlivedoorブログでサイドバーに追尾広告をつける方法 : サイト作成メモを参考に、複数個所で追尾コンテンツを使用してもきちんと動作するようにしました。


シェアする


こちらの記事も読まれています。
ブログランキング・にほんブログ村へ
関連する記事
    コメント

    コメントする