シーサーブログのサイドバーに追尾型の広告を設置する方法

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

今回はシーサーブログのサイドバーに追尾型の広告を設置する方法を紹介します。追尾させるのは広告に限らず「ソーシャルボタン」でもいいですし、以前紹介した「人気記事一覧」とかでもOK。自分で工夫して設置してみましょう。

サイドバーに追尾型の広告やコンテンツを設置するとスクロールにあわせて広告やコンテンツが追いかけてくるようにできます。色々なサイトを見るとよく見かけるアレね。

スポンサーリンク

追尾型コンテンツ設置の前準備

追尾型のコンテンツの設置は簡単ですが、その前にどのコンテンツ(広告)を追尾させるか考えておきます。

Googleアドセンス広告での追尾は禁止事項になっているのでそれ以外の広告またはコンテンツを用意しておきましょう。

必要であれば広告のサイズに合わせてサイドバーの幅も変更しておきましょう。ブログの幅を変更する場合は以前の記事「シーサーブログのコンテンツやサイドバーの幅を変更するカスタマイズ」を参考にして下さい。

追尾型コンテンツの設置の手順

それでは早速追尾型コンテンツ(広告)を設置していく手順を解説していきます。まずはシーサーブログの管理画面から「デザイン」⇒「HTML」をクリック。

すでにHTMLを作成している場合は適応中のHTMLをクリック。初めてHTMLを追加する場合は「HTMLを追加」をクリックして名前を付けておきます。

見出しタグ-2

見出しタグ-3

そしてHTMLのソースを見ていくとすぐに「head」と「/head」に囲まれた部分がでてきます。この「head」から「/head」に囲まれた部分にソースコードを追加していきますが、追加するのは「head」要素の最後の「/head」の直前でOKです

追尾-5

この部分にちょっと長いですが次のコードを追加します。

<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+$("#banner").height();
  var wrapH = $("#container").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行目のコードは削除しておいて下さい。一応追尾型コンテンツのIDには「#scroll」という名前を付けておきました。

ここまでできたら一度「保存」をクリックして変更を保存。初めてHTMLを追加した場合は名前を付け、追加したHTMLの適応にチェックを入れておきましょう。

HTML

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

続いてサイドバーに追尾するコンテンツを追加していきます。シーサーブログの管理画面から「デザイン」⇒「コンテンツ」と進み、サイドバーのコンテンツの一番下に「自由形式」を追加。

追尾-1

追加できたらこの「自由形式」をクリックして内容の部分に追尾したい広告のリンクコードを貼り付けたり、自由に内容を作ってもOKです。

タイトルも一緒に追尾表示したい場合は後から解説しますのでタイトルも自由に変更しておいて下さい。

追尾-2

作成できたら下の「保存」をクリックしておき、次にこの自由形式の「コンテンツHTML」という部分をクリック。

追尾-3

するとHTMLの中身がこのようになっています。

<% content.header -%>
<% content.free.text %>
<% content.footer -%>

これをこのように書き換えます。

<div id="scroll">
<% content.header -%>
<% content.free.text %>
<% content.footer -%>
</div>

最初にHTMLで追加したコードで追尾するコンテンツの名前を「#scroll」と名づけたのでこの自由形式のHTMLを「scroll」という要素にしておいたという訳です。

これで「保存」をクリックしてこの画面を閉じ、コンテンツ一覧の画面に戻るので念のためもう一度「保存」をクリックして追尾広告(コンテンツ)の設置は完了です。ブログを表示させてみて確認してみて下さい。

自由形式のタイトルも表示させたい場合

追尾型の自由形式でタイトルを表示したい場合は2通りあります。

  • タイトルは表示だけで追尾しない設定
  • タイトルも一緒に追尾する設定

この2通りのやり方があるので両方解説しておきます。どちらにしてもタイトルを表示するので自由形式をクリックしてタイトルと追尾させたい内容や広告を入力しておきます。

追尾-4

タイトルを入力したら下の「保存」をクリックして変更を保存しておきます。次にこの自由形式の「コンテンツHTML編集」をクリックし、HTMLを次のように書き換えます。

■タイトルは表示するだけで追尾しない場合のコード。

<div class="sidetitle"><% content.title %></div>
<div id="scroll">
<% content.header -%>
<% content.free.text %>
<% content.footer -%>
</div>

■タイトルも一緒に追尾する場合のコード。

<div id="scroll">
<div class="sidetitle"><% content.title %></div>
<% content.header -%>
<% content.free.text %>
<% content.footer -%>
</div>

書き換えたら「保存」をクリックして画面を閉じます。そしてコンテンツ一覧画面でもう一度保存をクリックしておきましょう。これで追尾するコンテンツがサイドバーに出来上がり。このように自由形式は色々な使い方ができるので他の記事も参考にして自由形式を工夫して使ってみましょう

シーサーブログカスタマイズとSEOまとめ

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

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

おすすめの無料セミナー

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

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

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

シーサーブログのサイドバーに追尾型の広告を設置する方法”に14件のコメントがあります。

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

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

  1. しげぞう 投稿作成者

    >daisuke様

    返信ありがとうございます。上手く設置できてよかったです。ブログの仕様の変更等もありますので、このようにコメント頂けると記事の修正もできてありがたいです。こちらこそよろしくお願いいたします。

  2. daisuke

    ありがとうございます。できました!
    これからもいろいろと聞くかもしれませんが、よろしくお願いします

  3. しげぞう 投稿作成者

    >daisuke様

    コメントありがとうございます。IDはそのままでOKです。後は追尾したい自由形式をサイドバーの「一番下」に追加して自由形式のHTMLで「id=”scroll”」を追加してあれば作動すると思います。今回右サイドバーの場合や左サイドバーの場合で2通り書いてますが、修正して1つにまとめてみました。記事修正してあるので、お手数ですがもう一度トライしてもらえないでしょうか?

  4. daisuke

    正しく設置したはずなのに、できませんでした(悲)
    IDのところは自分のIDに変えないといけないのでしょうか?

  5. しげぞう 投稿作成者

    >getta様

    上手くできてよかったです。私も試すまで気がつきませんでした。すみません。おかげ様で記事自体も編集する事ができました、ありがとうございます。今後ともどうぞよろしくお願い致します。

  6. getta

    出来ました!!いつも本当に助かっております!ありがとうございます。

  7. しげぞう 投稿作成者

    >getta様

    返信ありがとうございます。
    <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+$("#banner").height();
      var wrapH = $("#container").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>

    一度試して返信いただけると助かります。

  8. getta

    やってみましたが、ダメでした。
    記事画面からいって下にスクロールすると全体的に左に寄ってしまいます。

  9. しげぞう 投稿作成者

    >getta様

    返信ありがとうございます。現在は追尾のコードを外しているようなのでもう一度追尾コードを設置してコメント頂けたら助かります。コードが設置されていない状態で原因の特定は難しいですが、もしかすると左サイドバーのCSSで
    #links-left {
    margin-right: 30px;}
    の部分が影響しているかも知れません。一度元に戻せるようにバックアップを取っておいて、現在のCSSはそのままにしておいて以下のコードを追加してみて下さい。
    #links-left {
    margin-right: 0px;}
    と余白を一度0にするCSSを追加しておき、さらにコンテンツ中央で左右の余白を取るように変更。
    #content {
    margin-right: 30px;
    margin-left: 30px;}
    もしかするとこれで上手くいくかも知れません。以上のコードをCSSに追加して試してみて下さい。

  10. getta

    こちらになります。
    下に下げる事によって広告がおかしな位置になります

  11. しげぞう 投稿作成者

    >getta様

    コメントありがとうございます。サイドバーと記事が重なるという事なのでサイドバーのサイズをもう一度確認してみて下さい。必要であればバックアップをとってサイドバー左のサイズを変更する事で解消できるかも知れません。よく分からない場合や別の原因かなと思ったら一度URL付きでコメント頂けると助かります。もちろんURLの部分はコメント公開時に削除しておきます。

  12. getta

    両サイドバーで左に追尾型にしたいのですが、うまく出来ません。
    記事と少し重なってしまいます。

  13. しげぞう 投稿作成者

    >匿名様

    わざわざありがとうございます。シーサーブログに追尾コンテンツを設置する記事が検索でもあまり無かったので需要あるかな?と思って追加した記事だったのでそういう風に言って頂けると非常に嬉しいです。励みになります、ありがとうございました。

  14. 匿名

    とてもわかりやすく説明されていて初心者に優しかったです。
    追尾スクロール成功しました。
    本当にありがとうございました。