Seesaaブログのサイドバーに追尾型の広告を設置する方法【新システム】

この記事はSeesaaブログの新システム版です。旧システムを利用している方はこちらの記事を参考に。
シーサーブログのサイドバーに追尾型の広告を設置する方法

今回はSeesaaブログのサイドバーのコンテンツを追尾させる方法を紹介します。スクロールすると指定したサイドバーのコンテンツが追尾してくるアレね。ここに広告を設置する事もできますし、人気記事を追尾させてもいいですね。

ただしGoogleアドセンスの場合は追尾は禁止されているのでアドセンス以外のコンテンツにする事。それでは早速スタート!

HTMLにスクリプトを入れる

まずは追尾するためのスクリプトをHTMLに入れていきます。管理画面から「デザイン」⇒「デザイン設定」⇒「適応中のデザインタイトル」をクリックして「HTMLの編集」タブを選択。

新デザインパンくず-2

HTMLのコードの最初の方に「head」という部分と「/head」という部分があります。この「/head」の直前に次のコードを入れます。

<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");
  var targetTop = target.offset().top+$(".header").height();
  var wrapH = $(".l-content").height();
  $(window).scroll(function () {
    if($(window).scrollTop() >= targetTop) {
      if($(window).scrollTop() >= wrapH-target.height()) {
        target.css({position:"fixed",top:wrapH-target.height()-$(window).scrollTop()});
      } else {
        target.css({position:"fixed",top:0});
      }
    } else {
      target.css({position:"static"});
    }
  });
});
</script>

もしこのブログで紹介している「ページの先頭に戻るボタン」を設置している場合には1行目は削除してもOK。

新システム追尾-1

追加できたら「保存」しておきましょう。

サイドバーに追尾するコンテンツを追加する

HTMLにスクリプトを入れたら次に「サイドバーの一番下」に自由形式を追加します。管理画面から「デザイン」⇒「コンテンツ」と進み、サイドバーの一番下に「自由形式」を追加。

新システム追尾-2

次に自由形式の「」マークをクリックして「自由テキスト」の部分に次のコードを追加します。

<div id="scroll">
ここに表示したいコンテンツとか広告コード
</div>

こんな感じで。

新システム追尾-3

できたら「保存」をクリックして自由形式の画面を閉じ、コンテンツ一覧画面になるので再度「保存」で完了です。

これでブログを表示させ、スクロールすれば自由形式に追加したコンテンツが追尾してくるはずです。もしスクロールしても動かないという場合には「Ctrl」と「F5」を同時に押してリロードして確認してみて下さい。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。