ページの先頭へスクロールしてくれるプラグイン【Scroll To Top】の設定

今回はページの先頭へスクロールしてくれるプラグイン「Scroll To Top」のインストールと設定を紹介します。記事が長くなればなるほどこのプラグインは必須ですよね、一気にページの一番上まで戻る事ができるボタンを設置する事ができます。

スクロール-1

■追記

現在はページの先頭に戻るボタンはプラグインではなく自作しております。自作するのは結構複雑なので、最初はプラグインを利用し、慣れてきてから自作してみるといいかも知れません。
ページの先頭に戻るボタンを自作してみた

「Scroll To Top」のインストールと有効化

それでは早速インストールと有効化しましょう。WordPressの管理画面から「プラグイン」⇒「新規追加」と進み、検索窓で「Scroll To Top」と入力し検索。「今すぐインストール」をクリックします。

スクロール-2

インストールしたら有効化もしておいて下さい。有効化できたら一度自分のサイトを表示して確かめてみましょう。

スクロール-3

ブログのど真ん中に「Scroll To Top」というボタンが表示されたと思います。このままでは邪魔ですし、表示の文字も変えたいですよね。そこで今度はこのボタン(アイコン)を編集して行きます。

「Scroll To Top」の設定や編集をする

WordPressの管理画面から「設定」にカーソルを合わせるとサブメニューが開きます。この中に「Scroll To Top」という項目が増えてますのでこれをクリックして下さい。

スクロール-4

この設定画面でボタン(アイコン)に表示されるテキストやボタンの色、幅などを調整できます。ちなみに私の場合はこのように変更してます。

スクロール-5

  • Enable:「Enable」を選択するとアイコン表示、「Disable」を選択すると非表示。
  • Text:アイコン内に表示する文字を入力。
  • Width:アイコンの幅を指定。
  • Text Color:テキストの色を指定。
  • BackGround Color:背景の色を指定。

これでアイコンの設定は完了です。「変更を保存」してクリック。一度表示を確かめてみます。

スクロール-6

ど真ん中の位置の調整と高さも調整したいですよね。これはプラグインの編集で変更して行きます。

表示位置と高さの変更方法

今度はWordPressの管理画面から「プラグイン」⇒「インストール済みプラグイン」をクリックします。するとインストール済みのプラグインの一覧画面になるので、その中から「Scroll To Top」を探して「編集」をクリック。

スクロール-7

「scroll-to-top/stt.php」というファイルが開いている事を確認します。

スクロール-8

このファイルの中から変更する記述を探します。「Ctrl」キーと「F」を同時に押すと検索窓が表示されますので、下記コードを入力してみてください。

'right' : '50%'

この部分が50%になってますね。右から50%つまり中央に表示という記述なので、ここの数字を書き換えます。私の場合は2%にしてます。半角で入力してくださいね。

私はさらに「’top’ : ‘100%’」という部分を97%に変更してます。これで画面一番下に表示されているアイコンを少し上に持ってくることができます。それから「’padding’」という記述が2箇所ありますが、2個目の「’padding’ : ‘3px’」を10pxにしてます。これでアイコンの高さが変わりました。

結果的に3箇所の変更をしてます。(クリックで拡大)。

スクロール-10

これは私の場合の設定ですが、好きな数字に変更してみて下さいね。

WordPressの始め方
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

ページの先頭へスクロールしてくれるプラグイン【Scroll To Top】の設定”に7件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. 恋病

    返信ありがとうございます。
    表示されてませんか・・・。
    自分で確認すると表示されているのですが、意味ないですね^^;
    しげぞうさんの自作方法を参考にして、今から作ってみます。
    アドバイスありがとうございました。
    これからも参考にさせていただきます。

  2. しげぞう 投稿作成者

    恋病様

    返信ありがとうございます。確認してみたのですが、PCでもスマホでもボタンが出てきませんね。ブラウザで挙動が違うのかもしれません。

    今ちょっとプラグインの検索をしてみたのですが、「Scroll To Top」を検索しても見つからないので、長いことプラグインが更新されていない可能性もあるため不具合がでる可能性もあります。という訳で、このプラグインは削除した方が良いかと思います。

    代替のプラグインを探して色々試してみるのが良いかもしれません。環境によって上手く動かない物もありますので、1つ1つ別のプラグインを試してみるのがおすすめです。もしくは自作する方法もあります。

  3. 恋病

    アドバイスありがとうございます。
    そういう言語が不得手で、なにがなにやら・・・w
    一応↓が私のブログのURLです。

    ほとんどこちらのブログを参考に、作らせてもらっていますw
    よろしくお願いします。

  4. しげぞう 投稿作成者

    恋病様

    コメントありがとうございます。私の場合、このプラグイン自体は今は使ってないので詳しくは分からないのですが、考えられるのはPCとスマホのCSSで条件分岐がしてあって、PCなら○○、スマホなら○○という感じでそれぞれの装飾が別れているのはないかと思いました。

    もし良かったらサイトのURLを教えてもらえると助かります。コメント公開時にはURLは削除しますのでどうぞよろしくお願い致します。

  5. 恋病

    はじめまして。
    こちらのプラグイン、重宝させていただいてます。
    がしかし、一つ問題があります。
    PCではキチンとバックカラーが表示されるのですが、
    スマートフォンで見るとバックカラーが透明で、
    「TOPへ戻る」の字しか見えません。
    ページ的に見ずらいので改善したいのですが、
    解決策を知っていればご教授願いたいです。
    お忙しいと思いますが、よろしくお願いします。

  6. しげぞう 投稿作成者

    ユシン様

    コメントありがとうございます。スクロールトップのプラグインですよね。私の場合は自作したボタンを使っているので、プラグインは使ってないのですが、テストブログでこのプラグインを入れて試しても上手くできたので、プラグイン自体の問題ではないと思います。

    このプラグインの場合は下に少しスクロールするとボタンが表示されます。なので、スクロールしてもボタンが出現しない場合には別に原因があるかと思います。なので、再度プラグインの編集を開いてみて、「’」などを間違って消してないか?なども確認してみて下さい。どうしても反映されない場合には一度バックアップをしておいてからプラグインを停止⇒削除して再度インストールしてから試してみて下さい。

    それでもできないという場合にはお手数ですが、再度コメント頂けると嬉しいです。よろしくお願い致します。

  7. ユシン

    すみません
    スクロールトップを変更してみたら
    表示されなくなってしまったのですが、
    半角数字でいれてちゃんとやってみたのですけど
    原因がよくわからなくて
    忙しいところすみません