• MENU ●●●●
  • スクロールに追従するクリック画像を設置するシリウスカスタマイズ


    シリウスカスタマイズ 記事一覧を記事中段へ移動して情報を解り易く明示しましょう グーグル検索で好評かを得られるかも?

    スポンサー広告

    当該サイトコンテンツ関連記事

    スクロールに追従するクリック画像を設置する方法

    2014 1231
    シリウス外部カスタマイズテーマ スクロール追従ボタン画像の設置

     

    大手サイトなどでたまに見かけるサイトをスクロールしても
    スクロールと同スピードで下に動くボタン画像みたいなもの

     

    ダウンロードサイトや 一押しを進めるうえで

     

    これ押せおばかりに 興味を引くものです

     

     

    一例としてはこんなスタイル

     

    すみません
    これは画像で動かないのです

     

    当サイトはプレグインか何か反響しているため作動は出来ませんでしたが
    他サイトではスムーズな動きが確認されております

     

    作動はこちらの配布サイトSticky Pluginでご確認ください
    http://stickyjs.com/

     

    作動が確認できましたらプラグインをダウンロードしておきましょう

     


     

    設定は難易そうですが やってみれば然程面倒でもありません

     

    ただし 今回の解説はサイト内に設定するまでとなります

     

    サイト外に設置する手順は数日お待ちください

     


     

    設置手順

     

    配布サイトでSticky Pluginは段ロードしたとして進めます

     

    解凍したファイルから以下の4つをサイトのあるフォルダーにアップロード

     

    もう一つquery/1.4.2min.jsをアップロード

     

    お持ち合わせのない方はこちらでダウンロード
    http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

     

     


     

    html記載

     

    貼り付けコードをコピーしてhtmlテンプレートの
    head に貼り付けますが 記事内に呼び出すIDと同じ記述に
    しなければならない箇所がございます

     

    siriusu と記載しているところです

     

     

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

     

     

    こちらが記事内に張り付けるコードですが
    id=siriusuとしていますが 
    好みのID名称にどちらも同じく書き換えてください

     

    同じでないと動きません

     

    画像コードを好みのものに入れ替えてください

     

    <div style="height:1000px;">
    <div id="siriusu">
    <img src="<% pageDepth %>img/clipimage_79.jpg" alt="<% pageTitle %>" />
    </div>

     

     

    これで終了ですが 記事と画像が重なる 距離がある場合は
    1000の数値を変えて調整します

     

     

    ここまでは記事内での表示方法ですが
    サイトのメインカラムの外で作動させる場合は 
    以下ページの詳細をご覧ください
    シリウスのサイト背景に追従型テキストやバナー設置するカスタマイズ

     

     

    シリウスのプレビューではなぜか不作動でした

     

    プラグインを入れ替えても変化なし

     

    ご確認はアップロードして閲覧の履歴を削除しながら
    確認してください

     

    スポンサーリンク

     

     

    スクロールに追従するクリック画像を設置するシリウスカスタマイズ記事一覧

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

    2015 0103シリウス外部カスタマイズ サイト背景でスクロ―ル対応当コンテンツは上部サイトスクロールに追従するクリック画像を設置するシリウスカスタマイズからの延長解説となります今回はサイトカラムの外側に追従型テキストやバナー広告を設置する解説となりますサイト内部ですとサイドメニューや記事を一部隠...

    ≫続きを読む

     

     

     

    スクロールに追従するクリック画像を設置するシリウスカスタマイズ
    シリウスカスタマイズトップ

     

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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