記事の詳細

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_画像変更確認

あっ…画像サイズが…

…、まぁいいか…。

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

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

いかがでしたか?

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

ではまた!

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

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

The following two tabs change content below.
網干 裕介

網干 裕介

コーダーの網干裕介(あぼしゆうすけ)と申します。webサイトは見た目が非常に重要なのですが、サイトを構成するソースコードも見た目が重要だと考えています。内も外も魅力的なコンテンツが作れる人物になれるよう、日々努力しています。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

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

AD

ページ上部へ戻る