◆当サイト一押し教材『ルレアプラス』◆

シリウスでサイドバーをスクロール追尾させる方法とは?

シリウスでサイト作成していくと、WordPressだとプラグインで簡単にできるようなサイドバーの追尾機能を使いたくなりませんか?

記事が長めのときはサイドバーが追尾してこないので画面が寂しくなってしまうし、他の記事への誘導にもつながるので、できるなら嬉しいですよね。

色々試してみて、一番簡単にできた方法をシェアします。

必要なファイルを用意する

HTMLで色々な機能を使うにはWordPressのプラグインのようにjQueryという元ネタのファイルが必要になります。

これを使って望む機能を実現するわけです。

 

今回の機能の場合は、

  • jquery.min.js
  • jquery-contained-sticky-scroll.js

という2つのファイルが必要になります。

これらのjQueryファイルは以下のサイトで入手可能でしたが現在サイトが閉鎖しています。

 ⇒Contained Sticky Scroll jQuery Plugin (閉鎖中)

Internet Archiveのサイト経由であればまだダウンロードが可能なので、以下リンクからダウンロードしてください。

Contained Sticky Scroll jQuery Plugin

 

サイトの真ん中辺りからダウンロードできるので、クリックしてダウンロードしてください。

2014-06-21_21h35_12

jQueryファイルをアップロード

ダウンロードした状態ではZIPファイルに圧縮されているので、解凍してください。

2014-06-21_21h37_01

解凍すると以下のように必要なjQueryファイルがあることがわかります。

2014-06-21_21h37_17

次にFTPソフトを使用してサーバーへjQueryファイルをアップロードします。

必要なjQueryファイルは先に述べた2つですが、私は面倒なので3つまとめてアップロードしています。

ここはお好みでどうぞ。

2014-06-21_21h39_36

シリウスでサイドバーを追尾させる方法

シリウスを起動して、HTMLテンプレートの編集画面を開きます。

2014-06-21_21h23_29

このHTMLソースの<head>~</head>の中に以下のコードを記載します。

【duration: 0】の数値を変更することで、スクロール時にちょっと遅れて追尾してくるような動き方をさせることもできます。

色々な数値を入れて試してみてくださいね。

 

また、シリウスの場合は【トップページ】【カテゴリページ】【エントリページ】それぞれでHTMLソースが分かれているので必要に応じてコピペしてください。

 

例えば、

「トップページは追尾無しでエントリページでは追尾させたい」

というときなら、エントリページにのみ記載すればOKです。

 

以上で必要な作業は完了です。

設定を保存してアップロードするか、プレビューで動作を確認してみてください。

 

ちなみに私の作成した、以下のサイトで適用しているので、動作の参考にどうぞ。

⇒ http://tokuten.saku-affili.net/

 

今までのシリウスのテンプレートでも新しいSCKテンプレートでもどちらでも動作は確認できています。他にもjQueryを使用するとできることはたくさんあります。

WordPressプラグインほど簡単にとはいかないですが、大体同じようなことはできます。

 

最後に注意事項ですが、

追尾する部分にGoogleアドセンスを含めないようにご注意ください。

規約違反になってしまいますので。。

◆アフィリエイトで成功するためのオススメ情報商材◆

オススメ情報商材ランキング
実際に私が実践しているアフィリエイトで稼ぐための情報商材をランキング形式でご紹介します。
便利ツールランキング
アフィリエイトの実践を補助する役立つ便利ツールをランキング形式でご紹介します。

◆Facebook始めました◆

最新記事もチェック

◆SAKUの無料メルマガ購読のご案内◆

mail-magazine

6 Responses to “シリウスでサイドバーをスクロール追尾させる方法とは?”

  1. はじめまして!
    シリウスでサイドバーの追尾を調べていたらきました。
    分かりやすく説明されていて助かりかりました。
    ひとことお礼が言いたくてコメントを残させて頂きます!(アドレスはダミーです)

    • 通りすがりさん

      当サイトの情報がお役に立ったようで良かったです。
      今後も役に立つ情報を更新していきます。

      今後ともよろしくお願い致します。

  2. jQueryのファイルダウンロード先、
    現在ダメみたいです。。。

    代替となるダウンロードリンクがあったら教えてくださいm(_ _)m

      • ご回答ありがとうございます。

        ただ、私もウェイバックマシーン経由でやってみたのですが、
        該当のバナーリンクをクリックしても
        バナーリンクのアドレスからウェイバックマシーンのURLを削除して
        再度アドレスバーに打ち込んでみても
        やっぱり取得はできませんでした。

        SAKUさんは可能なのでしょうか?

        • 私の環境ですと該当バナークリックするとダウンロードが
          可能でした。
          どうしても無理そうでしたら、こちらで保存しているファイルで
          良ければ送りますのでご連絡頂けたらと思います。

          よろしくお願い致します。

コメントを残す

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)