jQuery_Smooth_Scroll – インクループ株式会社|神奈川県相模原市 ホームページ制作、WEBマーケティング https://incloop.com インクループ株式会社は、お客様の顧客獲得をマーケティングを活用して支援する会社です。 データ分析、市場調査に基づく企画立案、コンテンツ制作、運用を通じてお客様の目標を実現します。 Thu, 19 Nov 2020 00:59:16 +0000 ja hourly 1 https://wordpress.org/?v=4.9.19 「jQuery Smooth Scroll」でページトップへ戻るボタンを簡単に設置して、ボタンを好きな画像に変更する方法 https://incloop.com/%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%88%e3%83%83%e3%83%97%e3%81%b8%e6%88%bb%e3%82%8b%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%92%e7%b0%a1%e5%8d%98%e3%81%ab%e8%a8%ad%e7%bd%ae/ https://incloop.com/%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%88%e3%83%83%e3%83%97%e3%81%b8%e6%88%bb%e3%82%8b%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%92%e7%b0%a1%e5%8d%98%e3%81%ab%e8%a8%ad%e7%bd%ae/#respond Mon, 30 Jan 2017 07:18:07 +0000 https://incloop.com/?p=10526 00_jQuery_Smooth_Scrollを使ってページトップボタン実装

WordPressのプラグイン記事が多くなってきました、網干です。 どうもプラグイン系の記事を書いていると、記 […]]]>
00_jQuery_Smooth_Scrollを使ってページトップボタン実装

WordPressのプラグイン記事が多くなってきました、網干です。

どうもプラグイン系の記事を書いていると、記事が長くなってしまうのが気になります。
もう少し簡単なプラグインを紹介すべきでは? と思い始めました。

ということで、今回は便利プラグイン「jQuery Smooth Scroll」を使ってページトップに戻るボタンをカップ麺に注ぐお湯が完成する前に設置する方法を紹介します。
※ガスコンロを使用してお湯を沸かす場合は絶対に目を離さないでください!

参考記事は下記になります。
jQuery Smooth Scroll – ページトップに戻るボタンを追加できるWordPressプラグイン

今回の記事を読む事で、下記記事のようなページトップへ戻るボタンを設置することができます。
03_実装確認

「jQuery Smooth Scroll」のインストール方法

WordPressのプラグイン検索で「jQuery Smooth Scroll」と検索してプラグインを探します。
プラグインが見つかったら「今すぐインストール」を押してインストールを行います。
01_プラグイン検索

インストールが終わったらボタンが「有効化」に変わるので、ボタンを押してプラグインを有効化します。
02_有効化

以上で「jQuery Smooth Scroll」のインストールは完了になります。

インストール後に記事一覧等のページを表示して下にスクロールすると、右下にページトップに戻るための矢印ボタンが表示されます。
03_実装確認

どうでしたか? お湯が完成する前にできてしまいましたね。

ボタンを別の画像に変更する

プラグインを入れた状態ではデフォルトの画像になっていますので、少しカスタマイズしてみましょう。
具体的には、右下の画像を変更してみます。
03_実装確認

プラグイン編集の「編集するプラグインを選択」の箇所から「jQuery Smooth Scroll」を選択します。
04_プラグイン編集

プラグインファイルの「jquery-smooth-scroll/css/jss-style.css」を選択します。
05_ソースコード選択

backgroundのurlで囲まれた部分を設定したい画像のurlに変更します。
06_画像変更

今回は非常にキュートな某T氏のアイコンを右下に設定してみましょう!
田中さん2

「ファイルを更新」ボタンを押すと、右下にキュートな某T氏の画像が表示され…!
07_画像変更確認

あっ…画像サイズが…

…、まぁいいか…。

画像のサイズには注意が必要ですね!

簡単なプラグインを使って短時間でホームページを改良しましょう

いかがでしたか?

こだわりたい部分はトコトンこだわって、こだわらなくて良い部分はプラグインで対処してしまうことも時には大事です。
こだわらなくて良い部分に時間を割かないためにも、インストールするだけで済んでしまうプラグインというのは知識として持っていると役に立ちそうですね。

ではまた!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]>
https://incloop.com/%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%88%e3%83%83%e3%83%97%e3%81%b8%e6%88%bb%e3%82%8b%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%92%e7%b0%a1%e5%8d%98%e3%81%ab%e8%a8%ad%e7%bd%ae/feed/ 0