【ファンブログ】サイドバーに表示している広告を固定（追尾）させる方法

ブログの文章が長くなるとサイドバーの表示が終わってしまい画面が寂しくなるので、一番最後に表示しているコンテンツをスクロールしても固定表示（追尾）するようにしました。
手順としては２ステップだけなので１５分もあれば設定できます。

※ファンブログと「Seesaaブログ」、「So-netブログ」、「さくらのブログ」は同じシステムを使用しているので、共通で利用可能と思われます。
※JavaScriptは「アフィリエイトで稼ぐ方法を全部話そうと思う」さんの記事をベースに、当サイト用にカスタマイズしています。
※PCサイト用の設定です。スマートフォンで見ている場合はデスクトップ版で表示で画面を切り替えてください

完成イメージ

ちょっとわかりずらいかもしれませんが、長い記事でも一番下のコメント欄までコンテンツが追いてきています。

追尾広告(完成イメージ).png

Step１：JavaScriptを設置する

管理画面からデザイン > PC > HTMLの一覧 > HTMLの編集で、HTMLを開き、</head>の前にJavaScriptを追加します。
■HTMの編集画面 追尾広告(JS挿入前).png

■JavaScript
</head>の前に以下のJavaScriptを貼り付けて、「保存」ボタンを押してください。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  var target = $("#scroll_sidebar");
  var targetTop = target.offset().top+$("#banner").height();
  var wrapH = $("#container").height();
  $(window).scroll(function () {
    if($(window).scrollTop() >= targetTop+target.height()) {
      if($(window).scrollTop() >= wrapH) {
        target.css({position:"fixed",top:wrapH-target.height()-$(window).scrollTop()});
      } else {
        target.css({position:"fixed",top:0});
      }
    } else {
      target.css({position:"static"});
    }
  });
});
</script>

Step２：コンテンツの設定をする

■自由形式のコンテンツを追加する サイドバーの一番下に自由形式を追加します。

追尾広告(コンテンツ追加).png

■コンテンツの中身を登録する
今回はGoogleアドセンスを表示させるため、自由形式欄にスクリプトを貼り付けます。終わったら、「コンテンツHTML編集」をクリックします。

追尾広告(自由形式).png

■「コンテンツHTML編集」にタグを設定する
「コンテンツHTML編集」を開き、標準の記述を<div id="scroll_sidebar">～</div>で囲みます。コンテンツの表示位置をずらしたい場合は、適宜改行（<br>）を入れてください。
終わったら「保存する」を押して当画面を閉じ、次の画面で「変更を反映する」を押して完了です。

追尾広告(HTML編集).png