前回までで自由形式の使い方の基本と応用を色々記事にしてきたのだが、今回はシーサーブログのサイドバーに追尾型の広告を設置する方法を紹介しよう。追尾させるのは広告に限らず「ソーシャルボタン」でもいいし、以前紹介した「人気記事一覧」とかでもいいだろう。自分で工夫して設置してみてくれ。

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

スポンサードリンク

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

追尾型のコンテンツの設置は簡単だが、その前にどのコンテンツ（広告）を追尾させるか考えておく。Googleアドセンス広告での追尾は禁止事項になっているのでそれ以外の広告またはコンテンツを用意する。必要であれば広告のサイズに合わせてサイドバーの幅も変更しておくといいだろう。ブログの幅を変更する場合は以前の記事「シーサーブログのコンテンツやサイドバーの幅を変更するカスタマイズ」を参考にやってみてくれ。

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

それでは早速追尾型コンテンツ（広告）を設置していく手順を解説していく。まずはシーサーブログの管理画面から「デザイン」⇒「HTML」をクリックする。すでにHTMLを作成している場合は適応中のHTMLをクリック。初めてHTMLを追加する場合は「HTMLを追加」をクリックして名前を付けておく。

そしてHTMLのソースを見ていくとすぐに「head」と「/head」に囲まれた部分がでてくる。この「head」から「/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($) {
    $(document).ready(function() {
       
        var main = $('#content'); // メインカラムのID
        var side = $('#links'); // サイドバーのID
        var wrapper = $('#scroll'); // 追尾コンテンツのID
 
        var w = $(window);
        var wrapperHeight = wrapper.outerHeight();
        var wrapperTop = wrapper.offset().top;
        var sideLeft = side.offset().left;
 
        var sideMargin = {
            top: side.css('margin-top') ? side.css('margin-top') : 0,
            right: side.css('margin-right') ? side.css('margin-right') : 0,
            bottom: side.css('margin-bottom') ? side.css('margin-bottom') : 0,
            left: side.css('margin-left') ? side.css('margin-left') : 0
        };
 
        var winLeft;
        var pos;
 
        var scrollAdjust = function() {
            sideHeight = side.outerHeight();
            mainHeight = main.outerHeight();
            mainAbs = main.offset().top + mainHeight;
            var winTop = w.scrollTop();
            winLeft = w.scrollLeft();
            var winHeight = w.height();
            var nf = (winTop > wrapperTop) && (mainHeight > sideHeight) ? true : false;
            pos = !nf ? 'static' : (winTop + wrapperHeight) > mainAbs ? 'absolute' : 'fixed';
            if (pos === 'fixed') {
                side.css({
                    position: pos,
                    top: '',
                    bottom: winHeight - wrapperHeight,
                    left: sideLeft - winLeft,
                    margin: 0
                });
 
            } else if (pos === 'absolute') {
                side.css({
                    position: pos,
                    top: mainAbs - sideHeight,
                    bottom: '',
                    left: sideLeft,
                    margin: 0
                });
 
            } else {
                side.css({
                    position: pos,
                    marginTop: sideMargin.top,
                    marginRight: sideMargin.right,
                    marginBottom: sideMargin.bottom,
                    marginLeft: sideMargin.left
                });
            }
        };
 
        var resizeAdjust = function() {
            side.css({
                position:'static',
                marginTop: sideMargin.top,
                marginRight: sideMargin.right,
                marginBottom: sideMargin.bottom,
                marginLeft: sideMargin.left
            });
            sideLeft = side.offset().left;
            winLeft = w.scrollLeft();
            if (pos === 'fixed') {
                side.css({
                    position: pos,
                    left: sideLeft - winLeft,
                    margin: 0
                });
 
            } else if (pos === 'absolute') {
                side.css({
                    position: pos,
                    left: sideLeft,
                    margin: 0
                });
            }
        };
        w.on('load', scrollAdjust);
        w.on('scroll', scrollAdjust);
        w.on('resize', resizeAdjust);
    });
})(jQuery);
</script>

このコードの最初の方にこのような部分がある。

 var main = $('#content'); // メインカラムのID
 var side = $('#links'); // サイドバーのID
 var wrapper = $('#scroll'); // 追尾コンテンツのID

ここにサイドバーのIDというのがある。ここでは「#links」としているが、これは「右サイドバー」の場合だ。

左サイドバーに追尾をこの方法でやると上手くできなかったので左サイドバーの場合はこちら。

<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>

一応追尾型コンテンツのIDには「#scroll」という名前を付けておいた。

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

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

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

追加できたらこの「自由形式」をクリックして内容の部分に追尾したい広告のリンクコードを貼り付けたり、自由に内容を作っても良い。タイトルも一緒に追尾表示したい場合は後から解説するからタイトルも自由に変更しておいてもいいだろう。

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

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

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

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

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

最初にHTMLで追加したコードで追尾するコンテンツの名前を「#scroll」と名づけたのでこの自由形式のHTMLを「scroll」という要素にしておいたという訳だ。これで「保存」をクリックしてこの画面を閉じ、コンテンツ一覧の画面に戻るので念のためもう一度「保存」をクリックして追尾広告（コンテンツ）の設置は完了だ。ブログを表示させてみて確認してみてくれ。

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

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

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

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

タイトルを入力したら下の「保存」をクリックして変更を保存しておく。次にこの自由形式の「コンテンツ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まとめ