スクロールアップのダウンロードと設定設置

トップイメージ:スクロールアップのダウンロードと設定設置

本ページでは、ページトップへ戻るWebツール スクロールアップをダウンロードできます。あわせて、ダウンロードしたスクロールアップの設定設置のしかたについて詳しく解説します。

フォルダとファイルの構成

スクロールアップは本ページの下のほうで、圧縮ファイル scroll-up.zip としてダウンロードできます。その scroll-up.zip を解凍すると、以下のフォルダが現れます。

scroll-upフォルダ
|-jquery.scroll-up.js
|-scroll-up.css

これらのフォルダやファイルの内容は、まったく変える必要はありません。
なお、jquery.scroll-up.js は jQuery のプラグインとして書かれています。
jquery.js 3.x を読み込んでください。

設定設置の流れ

  1. 設置するページ(ファイル)のバックアップを取る。
  2. 設置するファイルからプログラムにリンクを張る。
  3. スクロールアップと設置するファイルをアップロードし、テストする。

ここでは、通常の html に設置する場合と 代表的な CMS WordPress に設置する場合に分けて、具体的にコードを例示しながら解説します。ただし、設定設置には html なり、WordPress のテンプレートタグに関する正確な知識とスキルがないと、トラブルに対応できません。
うまくいかない場合は、頑張らないで、専門家に依頼しましょう。

通常の html に設定する場合

通常の html とは、プログラムで生成されたものではなく、html と css というプログラム言語で書かれたホームページのことです。

  1. 作業をする前に、スクロールアップを設定したい html のバックアップを取っておきます。
  2. html の </head> の直前に scroll-up.css を読み込むリンクを書きます。
    例)
    <link href="scroll-up/scroll-up.css" type="text/css" rel="stylesheet" />
    </head>
  3. </body> の直前に、id="scroll-btn" という div 要素を設定し、色指定をします。
    例)
    <div id="scroll-btn" class="色"></div>
    </body>
    なお、色のクラス指定は次のようになります。
    ボタンクラス指定
    class="red"
    オレンジ
    class="orange"
    class="green"
    class="blue"
    class="purple"
    class="yellow"
    クラス指定なし
  4. さらに、</body> の直前に、jQuery と jquery.scroll-up.js を読み込むリンクを書きます。
    例)
    <div id="scroll-btn" class="色"></div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="scroll-up/jquery.scroll-up.js" type="text/javascript"></script>
    </body>
  5. 上記コードを書き込んだ html ファイルをアップロードし、既存のものに上書きします。
    同時にスクロールアップをフォルダごと同じ階層にアップロードします。
  6. テストして意図通りに動けば OK です。

意図通りにいかない場合は、html 内のパスを確認してください。
ファイル名やパスをミスすると、動きません。
どうしてもうまくいかないときは、専門家に任せましょう。scroll-up フォルダをアップロードし、各 html から css ファイルや js ファイルへ正しくパスを通します。

WordPress に設定する場合

  1. 作業をする前に、現在のテーマフォルダ内の functions.php のバックアップを取っておきます。
  2. 1と同じ階層に scroll-up フォルダを、FTP ソフトでアップロードします。
  3. WordPress の管理画面にログインして、スクロールアップを設定したいページの末尾に id="scroll-btn" という div 要素を設定し、クラスで色を指定します。
    例)
    <div id="scroll-btn" class="色"></div>
    色のクラス指定は、上記「通常のhtmlに設定する場合」の3をご参照ください。
  4. functions.php に css ファイルと js ファイルを読み込むためのコードを書きます。 以下は、xxxというスラッグのページから呼び出す場合の書き方です。
    例)
    function cb_enqueue() {
    if (is_single ('xxx')) {
    wp_register_style ('scroll_style', get_stylesheet_directory_uri()."/scroll-up/scroll-up.css");
    wp_enqueue_style ('scroll_style');
    wp_register_script ('scroll_script',
    get_stylesheet_directory_uri()."/scroll-up/jquery.scroll-up.js",
    array('jquery'), false, true);
    wp_enqueue_script ('scroll_script');
    }
    }
    add_action ('wp_enqueue_scripts', 'cb_enqueue');
  5. テストして意図通りに動けば OK です。

意図通りにいかない場合は、バックアップしていた functions.php に戻し、技術担当者に設定設置を依頼してください。

スクロールアップの撤去

  1. 設定の際、上記コードを書き込んだファイルから設定コードをすべて削除します。
    • jquery へのリンク
    • scroll-up.css へのリンク
    • jquery.scroll-up.js へのリンク
    • id="scroll-btn" を設定した div 要素
  2. アップロードした scroll-up フォルダをすべて削除します。

スクロールアップの使用条件

スクロールアップは、CC(クリエイティブ コモンズ)ライセンスの 表示 + 継承 です。
jquery.scroll-up.js と scroll-up.css 冒頭の弊社のクレジットは消さないでください。
プログラムの改変は自由ですが、改変したプログラムは、本プログラムと同様、CC(クリエイティブ コモンズ)ライセンスの 表示 + 継承 で公開しなければなりません。
なお、商用/非商用関係なく、許可なく、お使いいただけます。

スクロールアップのダウンロード

下記のダウンロードボタンからスクロールアップが入手できます。
ただし、現段階では日本語パックを利用しているデバイスでのみ有効です。
多言語向けに実装したい方は、本ページのコメント欄を使ってご連絡ください。


コメントを残す