WordPressのページスクロールプラグイン「Scroll To Top」のボタン位置を変更する方法

この記事のカテゴリ
CMS / ワードプレス他
この記事に付けられたタグ

Scroll To Top」はワードプレスのプラグインで、ウェブページを下まで読んだときなどに、ボタンをクリックするとスムーズな動きでページ上部まで戻してくれます。

追記
「Scroll To Top」他、スクロールするワードプレス用のプラグインを大量にまとめましたのでこちら「jQueryを使ってスムーズな動作でページTOPまで移動してくれるWordPressのプラグイン一覧」をご覧下さい。

インストールして有効化後、設定画面から「Enable」にチェックを入れるとすぐに使えます。
Scroll To Topの設定画面

簡単に導入できて動きもいいのですが、ボタンの位置を調整する事ができません。

このように画面下の真ん中にボタンが表示される事になります。
このボタン、常駐するのでノートパソコンやiPadを横向きで見ている時など画面の縦幅が短い環境だと存在が気になって記事が読みにくくなってしまうかも(個人的な意見)。
Scroll To Topのボタン

ボタン位置を真ん中でなく左右どちらかに配置する事で解決できそうですが、設定画面にはそのような項目がないので、プラグインのコードを書き換えることで実現できました。

FTPで「/wp-content/plugins/scroll-to-top/stt.php」をダウンロードして編集&アップロードします。
または、ワードプレス管理画面の「プラグイン」「プラグイン編集」から「Scroll To Top」を選択してscroll-to-top/stt.phpを編集する事も可能です。

stt.phpの80行目付近にあるこの記述。ちょっと見づらいですが、1行にこの内容が書かれてます。

jQuery(¥”#scroll_to_top a¥”).css({ ‘display’ : ‘none’, ‘z-index’ : ‘9’, ‘position’ : ‘fixed’, ‘top’ : ‘100%’, ‘width’ : ‘$width’, ‘margin-top’ : ‘-30px’, ‘right’ : ‘50%’, ‘margin-left’ : ‘-50px’, ‘height’ : ’20px’, ‘padding’ : ‘3px 5px’, ‘font-size’ : ’14px’, ‘text-align’ : ‘center’, ‘padding’ : ‘3px’, ‘color’ : ‘#$color’, ‘background-color’ : ‘#$background_color’, ‘-moz-border-radius’ : ‘5px’, ‘-khtml-border-radius’ : ‘5px’, ‘-webkit-border-radius’ : ‘5px’, ‘opacity’ : ‘.8’, ‘text-decoration’ : ‘none’});

これのこの部分「‘right’ : ‘50%’
50%だと真ん中に、0%にすると右側に表示されます。
少し右端から距離をつくりたかったので1%にしてみました。

Scroll To Topのボタン位置を右側に変更

こちらのサイト「試行錯誤」で実際にプラグインを使用していますのでスクロールの動作なども確認できます。
追記:上記サイトは別のプラグインを使用することにしました。サンプルサイトは準備中です。

LINEで送る
Pocket

関連記事

コメントを書き込む

コメントは承認後に公開されます。メールアドレスは公開されません。
*」は必須項目です。