SWELLでページトップボタンを設定する方法と活用のコツ

2026年10月28日

※本記事はアフィリエイト広告を含む記事へのリンクを含みます。

長い記事を最後まで読んだあと、ページの一番上に戻るのが大変…と感じたことはありませんか。スマホで何度もスクロールするのは、読者にとって意外とストレスになります。SWELLならページトップボタンで、ワンタップで上まで戻れます。

この記事では、SWELLでページトップボタンを設定する方法を手順付きで解説します。私が実際に気づいた失敗や、目次ボタンとの使い分けもお伝えしますね。カスタマイザーの操作だけで、すぐに設定できますよ。

※まだSWELLを導入していない方へ：SWELLは買い切り型のWordPressテーマなので、一度購入すれば追加費用なしでずっと使えます。この記事で紹介している設定も、ブロックエディタ上でクリックするだけで再現できますよ。

➡️【公式】SWELLの購入ページはこちら

デザインに悩む時間を減らして、記事を書くことに集中できる環境が手に入ります。

ニャフィ

記事の一番上に戻るボタンを付けたいにゃ。

たいがブログ

あると便利ですよね。SWELLなら標準機能で付けられますよ。

ニャフィ

ボタンが本文に重なって邪魔にならないかにゃ？

たいがブログ

設定手順と、すっきり見せるコツを順番にお伝えしますね。

▼あわせて読みたい：読みやすいサイトづくりには、表示速度の土台も欠かせません。ブログの土台になるサーバー選びはこちらで解説しています。

SWELLのページトップボタンとは？設定前に知っておきたい基本

ページトップボタンは、画面の右下などに表示され、タップするとページの一番上へ戻れるボタンです。長い記事が多いブログほど、読者の操作を楽にしてくれます。

SWELLでは、ページトップボタンをカスタマイザーの固定ボタンの設定から表示できます。コードを書かずに設定できるのが大きな魅力です。

ページトップボタンを付けるメリット

記事を読み終えた読者がすぐにメニューやほかの記事へ移動できるようになります。私のブログでも、5,000文字を超える記事が増えてから設置したところ、読み終えたあとにほかの記事へ進む読者が増えた手応えがありました。長文記事が多い方ほど効果を実感しやすいはずです。

目次ボタンとの違いを知っておく

SWELLには、ページトップボタンのほかに目次へジャンプできるボタンも用意されています。トップボタンは「一番上へ戻る」、目次ボタンは「読みたい見出しへ移動する」と役割が違います。両方を組み合わせると、長い記事でも迷わず読み進められますよ。

SWELLでページトップボタンを設定する方法

ここからは、実際にページトップボタンを表示させる手順を見ていきましょう。カスタマイザーの右側でプレビューを見ながら調整できます。

以前使っていた別のテーマでは、トップへ戻るボタンを付けるためにプラグインを入れていました。SWELLは標準機能だけで済むので、プラグインを減らせるのもうれしいポイントです。

ボタンのデザインはサイトの色に合わせる

ボタンは画面の隅に常に表示されるため、派手すぎる色だと本文より目立ってしまいます。私は最初、強い色を選んでしまい、記事を読むたびに視界の端でチラついて落ち着きませんでした。メインカラーになじむ控えめなデザインがおすすめです。

スマホではほかのボタンとの重なりを確認する

スマホでは、固定フッターメニューやチャットボタンなどと位置が重なってしまうことがあります。設定後は実際のスマホで記事を開き、ボタンが押しやすい位置にあるか確かめておきましょう。

STEP

カスタマイザーを開く

管理画面の「外観」→「カスタマイズ」をクリックして、カスタマイザーを開きます。

STEP

固定ボタンの設定項目を開く

「サイト全体設定」の中にある、固定ボタンに関する設定項目を開きます。

STEP

ページトップボタンを表示する設定にする

ページトップボタンの表示に関する項目で、表示する設定を選びます。プレビューの右下にボタンが出れば成功です。

STEP

ボタンのデザインを選ぶ

用意されているデザインの中から、サイトになじむものを選びます。必要に応じて目次ボタンの表示もあわせて設定しましょう。

STEP

公開してスマホで動作を確認する

「公開」をクリックして保存し、スマホで記事を下までスクロールして、ボタンで上に戻れるか確認したら完了です。

ページトップボタンを活かして回遊率を上げるコツ

ボタンを設置できたら、次は上に戻った読者が次の行動を取りやすい状態を整えていきましょう。ボタンはあくまで移動の手段なので、戻った先の導線が大切です。

ポイントは、ボタンだけに頼らず、記事の中にも次の一歩を用意しておくこと。読み終えた読者を迷わせない工夫が、回遊率アップにつながります。

記事の最後に次に読む記事を用意しておく

ページトップボタンで上に戻る読者の多くは、次に読む記事を探している状態です。私は以前、記事の最後に何も置いていなかったため、トップに戻ってもそのまま離れてしまう読者が目立ちました。まとめの後に関連記事を1〜2本置くようにしてからは、次の記事へ進む人がはっきり増えています。

画面上の固定ボタンを増やしすぎない

ページトップボタンに加えて、問い合わせやSNSのボタンまで画面の隅に並べると、スマホでは本文の邪魔になりがちです。別のテーマでプラグインのボタンを重ねていたころは、ボタン同士が重なって押し間違いが起きていました。固定ボタンは本当に必要なものだけに絞りましょう。

▼あわせて読みたい：回遊しやすいサイトになったら、次は検索から読まれる記事を増やしていきましょう。無料から使えるキーワード調査ツールの実力はこちらで正直にレビューしています。

SWELLのページトップボタン設定でよくある質問

設定したのにボタンが表示されません。: ページの一番上ではボタンが出ないことがあるので、少し下までスクロールして確認しましょう。それでも出ない場合は、「公開」を押したかとキャッシュの有無をチェックしてください。
ボタンの位置を変えることはできますか？: 追加CSSを使えば調整できますが、スマホで表示が崩れることもあります。初心者のうちは標準の位置のまま使い、ほかのボタンと重ならないかだけ確認するのが安心です。
短い記事しかなくても設置すべきですか？: 短い記事が中心でも、スマホではスクロール量が意外と多くなります。邪魔にならないデザインを選べばデメリットはほとんどないので、設置しておくのがおすすめです。
ボタンを付けると表示速度に影響しますか？: 標準機能のボタンなので、表示速度への影響はほとんど気にしなくて大丈夫です。プラグインで同じ機能を追加するより、むしろ軽く保てますよ。