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

Seesaaブログアフィリエイトとカスタマイズ
2018.04.29

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

MEMO

Googleアドセンスの場合は広告の追尾は禁止されているのでアドセンス以外の広告を取得しておくのがおすすめです。広告の取得がまだの方はこちらも参考にどうぞ。

⇒ASPの比較と選び方

著作情報
この記事を書いた人

WEBエンジニア11年目。これまでに100を超えるサイトの立ち上げや運営に携わり、2017年に法人化。カスタマイズ、デザイン、ツール作成、サイト移転まで何でもこなします。

sigezoをフォローする
もしもへ https://affiliate150.com/important-point
Amazonや楽天のアフィリエイトの併用は「もしもアフィリエイト経由」がおすすめの理由
Amazonアソシエイトと楽天アフィリエイトを併用するなら「もしもアフィリエイト...
affiliate150.com
2023.05.24

追尾型コンテンツを設置する方法と手順

まず先に手順ですが

  • HTMLにコード（スクリプト）を追加
  • サイドバーに自由形式を追加
  • 自由形式を編集する

という流れになります。

HTMLにスクリプトを入れる

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

SeesaaブログHTMLの編集

HTMLのコードの最初の方に「head」から「/head」で囲まれた部分があります。この「/head」の直前に次のコードを入れます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
MEMO

もしこのブログで紹介している「ページの先頭に戻るボタン」を設置している場合にはこれと同じコードが追加されているはずですので上記のコードは不要です。

さらに以下コードも追加します。

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

上記２つのコードを「/head」の前に追加するとこんな感じになりました。

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

追加できたら「保存」を忘れずに。

サイドバーに追尾するコンテンツ（自由形式）を追加する

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

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

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

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

こんな感じで。

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

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

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

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

通常自由形式を追加して「名前」の部分にテキストを入れてもブログでは表示されません。

Seesaaブログの自由形式のタイトルを表示させる方法-1

この名前の部分をブログに表示させるためにはコンテンツHTMLにちょっと変更を加える必要があるので紹介していきます。

自由形式のタイトルを表示させるカスタマイズ

Seesaaブログの管理画面から「デザイン」⇒「コンテンツ」で自由形式を追加して「自由形式」の設定部分をクリック。

Seesaaブログに人気記事一覧を設置する方法-4

自由形式の「コンテンツHTML編集」をクリック。

Seesaaブログに人気記事一覧を設置する方法-6

HTMLが表示されます。1行目に以下のような記述があります。

<section class="module module--free">

これの直後に以下のコード1行を追加。

<h3 class="module__heading"><% parts.title -%></h3>

こんな感じになります。保存を忘れずに。

Seesaaブログに人気記事一覧を設置する方法-11

自由形式に「このコンテンツは独自にHTML編集されています」と表示されていればOK。ここも保存。これで自由形式のタイトルが反映されるようになります。

Seesaaブログに人気記事一覧を設置する方法-9

自由形式の画面を閉じるとコンテンツ一覧画面に戻るのでここでも念のため保存。

Seesaaブログに人気記事一覧を設置する方法-10

これで自由形式のタイトルが反映されるようになります。

Seesaaブログの自由形式のタイトルを表示させる方法-2

以上Seesaaブログのサイドバーに追尾型の広告を設置する方法でした。

ブログを収益化するならWordPress利用がおすすめ

無料ブログでは利用規約の変更やアカウント停止、サービス終了などのリスクがあります。

また、表示速度も重く、スマホのページには消す事のできない広告が多いためブログでの収益化を考えているならWordPressの利用が圧倒的におすすめです。

WordPressと無料ブログの違いや必要な料金などは以下記事でまとめてます。

コメント