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

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

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

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

スポンサーリンク
アフィリエイトBパートナー募集

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」を同時に押してリロードして確認してみて下さい。

WordPressの始め方
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

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