便利ツール

sirius-kouka

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

シリウスでサイト作成していくと、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アドセンスを含めないようにご注意ください。

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

 

関連記事

  1. sirius-kouka

    シリウスの背景画像のスクロール機能を固定にする方法

  2. sirius-kouka

    アフィリエイトの作業効率化のためにシリウスの追加ライセンスを購入

  3. sirius-kouka

    【dropbox】シリウスを2台のパソコンでサイトデータを共有して使う…

  4. axis

    【機能比較】「AXIS(アクシス)」と「SIRIUS(シリウス)」の違…

  5. sirius-kouka

    シリウスにjQueryスライダー「bxSlider」を使ってスライドシ…

  6. SCKアフィリエイトは必要か?シリウスの追加テンプレートに注目!

コメント

  • コメント (6)

  • トラックバックは利用できません。

    • 通りすがり
    • 2015年 1月 09日

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

    • 通りすがりさん

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

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

    • リンク切れを発見した名無し
    • 2016年 11月 07日

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

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

    • ご指摘ありがとうございます。
      リンク先を修正させていただきました。

        • リンク切れを発見した名無し
        • 2016年 11月 07日

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

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

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

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

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

  1. この記事へのトラックバックはありません。

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

最強のWordPressテンプレート「賢威」

wordpress-keni

WordPressのSEO対策が気になるならWordPressテンプレートの最高峰「賢威」で間違いありません。

SAKU限定特典&レビュー

究極のサイト作成ツール「シリウス」

sirius

サイトアフィリエイトをより効率的に効果的に進めるサイト作成ツールならシリウス一択です。サイトアフィリエイトの神器みたいなものですよ!

SAKU限定特典&レビュー

アフィリエイトのバイブル「LUREA plus」

LUREA-plus

本気で稼ぐために必要なノウハウがギュッと詰め込まれた、全てのアフィリエイターのバイブルとなる教材です。 アフィリエイトの基礎からしっかりと取り組めます。 再現性も抜群です!

SAKU限定特典&レビュー

LUREA Plus関連記事
PAGE TOP