記事の詳細
「jQuery Smooth Scroll」でページトップへ戻るボタンを簡単に設置して、ボタンを好きな画像に変更する方法
WordPressのプラグイン記事が多くなってきました、網干です。
どうもプラグイン系の記事を書いていると、記事が長くなってしまうのが気になります。
もう少し簡単なプラグインを紹介すべきでは? と思い始めました。
ということで、今回は便利プラグイン「jQuery Smooth Scroll」を使ってページトップに戻るボタンをカップ麺に注ぐお湯が完成する前に設置する方法を紹介します。
※ガスコンロを使用してお湯を沸かす場合は絶対に目を離さないでください!
参考記事は下記になります。
jQuery Smooth Scroll – ページトップに戻るボタンを追加できるWordPressプラグイン
今回の記事を読む事で、下記記事のようなページトップへ戻るボタンを設置することができます。
「jQuery Smooth Scroll」のインストール方法
WordPressのプラグイン検索で「jQuery Smooth Scroll」と検索してプラグインを探します。
プラグインが見つかったら「今すぐインストール」を押してインストールを行います。
インストールが終わったらボタンが「有効化」に変わるので、ボタンを押してプラグインを有効化します。
以上で「jQuery Smooth Scroll」のインストールは完了になります。
インストール後に記事一覧等のページを表示して下にスクロールすると、右下にページトップに戻るための矢印ボタンが表示されます。
どうでしたか? お湯が完成する前にできてしまいましたね。
ボタンを別の画像に変更する
プラグインを入れた状態ではデフォルトの画像になっていますので、少しカスタマイズしてみましょう。
具体的には、右下の画像を変更してみます。
プラグイン編集の「編集するプラグインを選択」の箇所から「jQuery Smooth Scroll」を選択します。
プラグインファイルの「jquery-smooth-scroll/css/jss-style.css」を選択します。
backgroundのurlで囲まれた部分を設定したい画像のurlに変更します。
今回は非常にキュートな某T氏のアイコンを右下に設定してみましょう!
「ファイルを更新」ボタンを押すと、右下にキュートな某T氏の画像が表示され…!
あっ…画像サイズが…
…、まぁいいか…。
画像のサイズには注意が必要ですね!
簡単なプラグインを使って短時間でホームページを改良しましょう
いかがでしたか?
こだわりたい部分はトコトンこだわって、こだわらなくて良い部分はプラグインで対処してしまうことも時には大事です。
こだわらなくて良い部分に時間を割かないためにも、インストールするだけで済んでしまうプラグインというのは知識として持っていると役に立ちそうですね。
ではまた!
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。