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

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

本ページでは、ページトップへ戻る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. 設定ファイルからプログラム等へリンクを張る。
  4. scroll-upフォルダをアップロードする。
  5. テストする。

ここでは、通常の html に設置する場合と 代表的な CMS WordPress に設置する場合に分けて、具体的にコードを例示しながら解説します。

通常の html に設定する場合

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

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

意図通りにいかない場合は、html 内のパスを確認してください。
ファイル名やパスをミスすると、動きません。
どうしてもうまくいかないときは、専門家に任せましょう。

WordPress に設定する場合

  1. 作業をする前に、現在のテーマフォルダ内の functions.php のバックアップを取っておきます。
  2. WordPress の管理画面にログインして、スクロールアップを設定したいページを開きます。
  3. WordPress の管理画面にログインして、スクロールアップを設定したいページを開きます。
    例)
    <div id="scroll-btn"></div>
  4. 同じ div 要素にクラスで色を指定します。
    例)
    <div id="scroll-btn" class="色"></div>
    色のクラス指定は、上記「通常のhtmlに設定する場合」の3をご参照ください。
  5. 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');
  6. FTPソフトでscroll-up フォルダを、上記 functions.php と同じ階層にアップロードします。
  7. テストして意図通りに動けば 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(クリエイティブ コモンズ)ライセンスの 表示 + 継承 で公開しなければなりません。
なお、商用/非商用関係なく、許可なく、お使いいただけます。

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

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

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

コメントを残す