追尾型広告を作る方法

ブラウザをスクロールした時に追従するウィジェット(ブログパーツ)をコンテンツ・サイト・メーカー2(CSM2)に組み込む方法をご説明します。

手順1:ウィジェットの編集


まず追尾型にしたいウィジェットの編集画面を開きます。

CSM2の管理画面 ⇒ デザイン ⇒ ウィジェットの設定 ⇒ ウィジェットの追加(または編集)

「内容」欄の一番上行の <div class="widget"><div class="widget widget-tracking"> に編集します。


↑クリックで拡大します

その他は他ウィジェット同様好きな内容を入力して保存します。

手順2:ウィジェットの配置


手順1で編集したウィジェットは、右サイドバーでも、左サイドバーでもよいので、他ウィジェットの一番下に配置してください。

CSM2の管理画面 ⇒ デザイン ⇒ ウィジェットの設定 ⇒ ウィジェットの配置

手順3:テンプレートの編集


CSM2の管理画面 ⇒ デザイン ⇒ テンプレートの編集 から

以下の4つのテンプレートに対して全て同じ編集をして保存してください。

PC:トップページ
PC:カテゴリページ
PC:記事ページ
PC:検索結果ページ


まず各テンプレートの20行目ぐらい~30行目ぐらいの場所で次の2行を探します。
<CSM2SmartPhone>
<script type="text/javascript" src="../js/jquery.min.js"></script>

下の行はテンプレートによって微妙に違いますが jquery.min.js という文字があれば問題ありません。

見つかったら、この2行を上下入れ替えてください。

次に、今の場所からもう少し下にある </head> を見つけてその直前に以下のコードを挿入して保存して下さい。

</head>の直前に挿入するコード
2013/02/19改定(IEで滑らかに追尾します)
<script type="text/javascript">
$(window).load(function() {
var widTop = $('.widget-tracking').offset().top;
var widH = $('.widget-tracking').outerHeight();
var widW = $('.widget-tracking').innerWidth();
var widL = $('.widget-tracking').offset().left;
var wrpPL = $('.widget-tracking').parent('div').css('padding-left');
var conTop = $('#content-inner').offset().top;
var conH = $('#content-inner').outerHeight();
var winL;

$(window).scroll(function () {
widTopNow = $('.widget-tracking').offset().top;
winL = $(window).scrollLeft();
if($(window).scrollTop() > widTop) {
if ((widTopNow + widH) < (conH + conTop) || $(window).scrollTop() < widTopNow) {
$('.widget-tracking').css({
position: 'fixed',
width: widW,
top: '0',
left: widL - winL
});
} else {
$('.widget-tracking').css({
position: 'absolute',
width: widW,
top: conH - widH,
left: wrpPL
});
}
} else {
$('.widget-tracking').css({
position: 'static'
});
}
});

$(window).resize(function () {
$('.widget-tracking').css({
position: 'static'
});
widL = $('.widget-tracking').offset().left;
winL = $(window).scrollLeft();
if($(window).scrollTop() > widTop) {
if ((widTopNow + widH) < (conH + conTop) || $(window).scrollTop() < widTopNow) {
$('.widget-tracking').css({
position: 'fixed',
width: widW,
top: '0',
left: widL - winL
});
} else {
$('.widget-tracking').css({
position: 'absolute',
width: widW,
top: conH - widH,
left: wrpPL
});
}
}
});
});
</script>


以上で設置完了です。

編集したウィジェットがスクロールに付いて移動するか確認して下さい。