• MENU●●●●
  • シリウスのサイト背景に追従型テキストやバナー設置するカスタマイズ


    シリウスカスタマイズ アコーディオンブラインドメニューシリウスへ取り付け完了 詳細は外部カスタマイズメニューでご覧ください

    スポンサー広告

    関連記事


    サイト背景に追従型テキストやバナー設置する方法

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

     

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

     

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

     

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

     

     

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

     

    スポンサーリンク

     

     


     

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

     

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

     

    以下コードをHTMLトップページ内テンプレートのhead内に配置します

     

    用意したコード内に 3つとも siriusu とありますがIDです
    このままでもよいし 変える場合は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>

     


     

    画像指定コード

    headと
    bodyの間に記載します

     

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

     

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

     

    コピーコード

     

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

     


     

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

     

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

     

    変えるところsiriusu

     

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

     

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

     

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

     

     

    右上に設置完了

     

     

    再報告

     

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

     

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

     

     

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

       広告

    .













    お勧め目 抜粋






















































    shop

    特典付き広告..ポチする
    【上位版】次世代型サイト作成システム「SIRIUS」


    シリウスカスタマイズで気を付けること


    サイトにnorton|ノートンの安全評価を付ける


    カスタムに使える情報

    Webデザインで使えるWeb配色ツールまとめサイト