WordPressのページスクロールプラグイン「Scroll To Top」のボタン位置を変更する方法
「Scroll To Top」はワードプレスのプラグインで、ウェブページを下まで読んだときなどに、ボタンをクリックするとスムーズな動きでページ上部まで戻してくれます。
「Scroll To Top」他、スクロールするワードプレス用のプラグインを大量にまとめましたのでこちら「jQueryを使ってスムーズな動作でページTOPまで移動してくれるWordPressのプラグイン一覧」をご覧下さい。
インストールして有効化後、設定画面から「Enable」にチェックを入れるとすぐに使えます。

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

ボタン位置を真ん中でなく左右どちらかに配置する事で解決できそうですが、設定画面にはそのような項目がないので、プラグインのコードを書き換えることで実現できました。
FTPで「/wp-content/plugins/scroll-to-top/stt.php」をダウンロードして編集&アップロードします。
または、ワードプレス管理画面の「プラグイン」「プラグイン編集」から「Scroll To Top」を選択してscroll-to-top/stt.phpを編集する事も可能です。
stt.phpの80行目付近にあるこの記述。ちょっと見づらいですが、1行にこの内容が書かれてます。
これのこの部分「‘right’ : ‘50%’」
50%だと真ん中に、0%にすると右側に表示されます。
少し右端から距離をつくりたかったので1%にしてみました。
こちらのサイト「試行錯誤」で実際にプラグインを使用していますのでスクロールの動作なども確認できます。
追記:上記サイトは別のプラグインを使用することにしました。サンプルサイトは準備中です。
コメント (1)
まだコメントはありません。
コメントを書く
-
AI「Gemini」で出力されるコードにはコメントアウト表示されないので注意
Google謹製のAI「Gemini」にJavaScriptのコードを聞きながら作…
-
Tailwind CSSで指定できる背景色のカラーパレット(classとカラーコードまとめ)
Tailwind CSSで背景色を指定する際に下記のようにclassを付ける…
-
Premiere Pro「ビデオトランジション」一覧
動画編集ソフトのAdobe Premiere Pro(プレミアプロ)で標準で用…
-
VSCode・Cursorでタブが表示されない場合の対応方法
コードエディタ「Visual Studio Code」(VSCode)と「Cursor」で…








もっと出して少ない