アフィリエイト広告を利用しています



ads by google





2015年08月30日

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





大きな紙を持つ女性.jpg

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

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

完成イメージ


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

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

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



Step2:コンテンツの設定をする


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

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


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

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


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

追尾広告(HTML編集).png



最後に

上手くできましたか?特に問題なければ15分もあればできたと思います。
設定が反映されない場合はF5を押して画面内容を更新してみてください。

以上、はてごるでした。

最後まで読んでいただきありがとうございました。 この記事を気に入っていただいたらシェアしていただければ幸いです。






にほんブログ村 地域生活(街) 東京ブログ 恵比寿・代官山・中目黒情報へ    follow us in feedly 




この記事へのコメント
貴重な情報ありがとうございます。
紹介のタグを参考に実装してみましたが、うまく動きませんでした。
おそらくJquery の読み込みタグのリンクが投稿時にアンカータグに変換されているのが原因だと思います。
Posted by 通りすがりの人 at 2016年03月02日 12:58
コメントを書く

お名前:

メールアドレス:


ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバックURL
https://fanblogs.jp/tb/4124913
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック





過去の記事
最新記事

タグクラウド