2015　0103
シリウス外部カスタマイズ　サイト背景でスクロ―ル対応

 

当コンテンツは上部サイト
スクロールに追従するクリック画像を設置するシリウスカスタマイズからの延長解説となります

 

今回はサイトカラムの外側に追従型テキストやバナー広告を設置する
解説となります

 

サイト内部ですとサイドメニューや記事を一部隠してしまうことがあり
時として邪魔な存在になりますが　サイトの外でしたら障害はありませんね

 

 

設置手順としては3か所の配置のみで完了します

 

スポンサーリンク

 

 

---

 

まず　スクリプトは上部ページと同じもの

 

すべてコピーしてお使いください

 

以下コードをＨＴＭＬトップページ内テンプレートのｈｅａｄ内に配置します

 

用意したコード内に　3つとも　siriusu　とありますがＩＤです
このままでもよいし　変える場合は3つともすべて同じにしてください
一つの記載ミスでもあれば呼び出しが出来なくなり動きません

 

コピーコード

 

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="/jquery.sticky.js"></script>
<script>
$(document).ready(function(){
$("#siriusu").sticky({topSpacing:0});　変えるところ
$("#buttons").sticky({topSpacing:70});　　このまま
$("#authorinfo").sticky({topSpacing:160});　このまま
});
</script>

 

---

 

画像指定コード

ｈｅａｄと
bodyの間に記載します

 

少なめのスペースにいれるため　height:0pの数値は０にしましたが

 

少し下が良いという方は数値を入れてください　
100とか300とかですね

 

コピーコード

 

<div style="height:0px;">
<div id="siriusu">　変えるところ
画像テキストコードやバナーコード
</div>
</div>

 

---

 

スタイルシートにコード追加
一番下でよいです

 

コピーコード
div#siriusu{position:absolute; right:30px;}

 

変えるところsiriusu

 

右に指定してあるのでright:と指定してます

 

30pxは左右のバランス指定
左右の位置ずらしを指定してますので

 

設置後数値を変えて調整してください

 

 

右上に設置完了

 

 

再報告

 

サイド実証しましたがプレビュー画面ではなぜか動きません

 

アップ以降は正常作動が確認いただけます

 

 

シリウスのサイト背景に追従型テキストやバナー設置するカスタマイズ
スクロールに追従するクリック画像を設置するシリウスカスタマイズ
シリウスカスタマイズトップ