Apuraの「トップへ戻る」ボタン設定ガイド｜表示・色・サイズの調整からCSSカスタマイズまで

「記事を読み終えた読者が、もう一度メニューを探すために延々とスクロールして戻っている」——縦に長いページほど、この小さなストレスが離脱や回遊率の低下につながります。

そこで役立つのが、画面の隅に常駐してワンタップでページ先頭まで戻れる「トップへ戻る（Back To Top）」ボタンです。

Apuraテーマには、このボタンが標準機能として組み込まれており、カスタマイザーから表示のオン・オフ、色、サイズまでをコードなしで設定できます。

この記事では、基本の設定方法から、アクセシビリティへの配慮、追加CSSによる位置やデザインのカスタマイズまでを順番に解説します。

「トップへ戻る」ボタンとは

「トップへ戻る」ボタンは、ページを下までスクロールしたときに画面の右下に現れ、クリックするとなめらかにページ先頭へスクロールして戻る小さなボタンです。Apuraでは丸い形のボタンの中に上向きの矢印アイコンが入ったシンプルなデザインで、一定量スクロールするまでは非表示になり、読者の視界を邪魔しません。

この機能の特長は、PCとモバイルで表示する・しないを個別に切り替えられる点です。たとえば「PCでは表示するが、画面が狭いスマホでは本文の邪魔になるので非表示にする」といった出し分けが、カスタマイザーのチェックひとつで実現できます。

カスタマイザーから設定する

設定は、WordPress管理画面の「外観 → カスタマイズ → 一般オプション（General Options）→ Back To Top」から行います。用意されている項目は次のとおりです。

設定項目	内容	初期値
Enable: Desktop	PC（デスクトップ）での表示オン・オフ	ON
Enable: Mobile	モバイルでの表示オン・オフ	OFF
Icon Size	矢印アイコンの大きさ（PC／タブレット／モバイルごとに指定可）	15px
Background Color	ボタンの背景色	#ffffff（白）
Icon Color	矢印アイコンと枠線の色	プライマリカラー

初期状態ではPCのみ表示が有効になっています。スマホでも表示したい場合は「Enable: Mobile」をオンにしてください。

なお、Icon Size・Background Color・Icon Colorの各項目は、デスクトップとモバイルのどちらも無効な状態だと選択できません（ボタン自体が出力されないため）。まずはどちらかの表示をオンにしてから、色やサイズを調整しましょう。

アイコンサイズはデバイスごとに最適化できる

「Icon Size」はレスポンシブ対応で、PC・タブレット・モバイルそれぞれに別々の値を設定できます。

入力欄の上にあるデバイス切り替えアイコンで対象を選んでから数値（0〜60px）を入力してください。

ボタンのサイズは内部の余白（パディング）とアイコンサイズの組み合わせで決まるため、アイコンを大きくすればボタン全体も大きくなります。スマホでは指でタップしやすいよう、やや大きめの値にしておくと押し間違いを防げます。

ボタンの表示タイミングと動作のしくみ

カスタマイザーには表示タイミングの項目はありませんが、内部的にはきちんと制御されています。Apuraのボタンは、ページを100px以上スクロールした時点で初めて画面に現れ、それより上ではフェードで隠れています。読者が少し読み進めて「戻りたいかもしれない」タイミングで自然に出現する設計です。

ボタンをクリックすると、ページ先頭まで約0.5秒かけてなめらかにスクロールして戻ります。一気にジャンプするのではなくアニメーションで移動するため、ページのどこから戻ってきたのかが視覚的にわかりやすく、読者の方向感覚を損ないません。出力されるHTMLは次のような構造になっています。

<a id="js-back-to-top" href="#" class="back-to-top"
   title="Scroll back to top" aria-label="Scroll back to top"
   data-js-back-to-top data-offset="100" data-duration="500">
  <div class="back-to-top__icon"><!-- 上向き矢印アイコン（SVG） --></div>
  <span class="screen-reader-text">Scroll back to top</span>
</a>

data-offset（100）が表示を開始するスクロール量、data-duration（500）が先頭へ戻るアニメーションの時間（ミリ秒）です。これらの値はカスタマイザーの設定項目にはなく、色やサイズだけを手軽に整えたい一般ユーザーにとっては、迷う項目が少なくシンプルに使えるようになっています。

Apura v1.3.6以降は、これら2つの値をフィルターフックで変更できます。子テーマの functions.php に次のように記述してください。

/**
 * 「トップへ戻る」ボタンの表示開始スクロール量と、戻るアニメーションの時間を変更する。
 *
 * @param int $offset 表示開始のスクロール量（px）。デフォルト100。
 * @return int 変更後のスクロール量（px）。
 */
function my_apura_back_to_top_offset( $offset ) {
	// 200px スクロールしてから表示する。
	return 200;
}
add_filter( 'apura_back_to_top_offset', 'my_apura_back_to_top_offset' );

/**
 * 戻るアニメーションの時間を変更する。
 *
 * @param int $duration アニメーション時間（ミリ秒）。デフォルト500。
 * @return int 変更後のアニメーション時間（ミリ秒）。
 */
function my_apura_back_to_top_duration( $duration ) {
	// 0.8秒かけてゆっくり戻る。
	return 800;
}
add_filter( 'apura_back_to_top_duration', 'my_apura_back_to_top_duration' );

アクセシビリティへの配慮

「トップへ戻る」ボタンは見た目こそ小さな部品ですが、Apuraでは支援技術への配慮もしっかり組み込まれています。具体的には、次の3点が標準で対応済みです。

• aria-label と title 属性で、ボタンの役割（先頭へ戻る）をスクリーンリーダーやマウスホバーで伝えます。
• screen-reader-text クラスのテキストにより、視覚的には矢印アイコンだけでも、読み上げでは「Scroll back to top」と案内されます。
• ボタンは<a>要素（リンク）として実装されているため、キーボードのTabキーでフォーカスでき、Enterキーで操作できます。

マウスを使わない読者や、画面を読み上げて利用する読者にも配慮されているため、特別な設定をしなくても、有効にするだけでアクセシブルなボタンが手に入ります。

追加CSSでデザインをカスタマイズする

色やサイズはカスタマイザーで完結しますが、「もっと位置を調整したい」「四角いボタンにしたい」といった細かなデザイン変更は追加CSSで行えます。

「外観 → カスタマイズ → 追加CSS」に貼り付けて使ってください。ボタンには.back-to-topというクラスが付いているので、これを起点にスタイルを上書きします。

表示位置を調整する

初期状態ではボタンは画面の右下（右・下ともに10px）に固定表示されています。画面端ぎりぎりが気になる場合や、他の固定要素と重なる場合は、位置を広げて調整できます。

/* ボタンを画面端からもう少し離す */
.back-to-top {
	right: 24px;
	bottom: 24px;
}

右下ではなく左下に置きたい場合は、rightを解除してleftを指定します。

/* ボタンを左下に配置する */
.back-to-top {
	right: auto;
	left: 16px;
	bottom: 16px;
}

形を四角（角丸）に変える

Apuraのボタンは初期状態では正円（border-radius: 50%）です。サイトの雰囲気に合わせて、角を少しだけ丸めた四角形にしたい場合は次のように指定します。

/* 角丸の四角ボタンにする */
.back-to-top {
	border-radius: 8px;
}

ホバー時に色を変える

ボタンの色はCSS変数（--bg-color＝背景色、--icon-color＝アイコン・枠線色）で管理されています。マウスを乗せたときに色を反転させて「押せる」ことを伝えたい場合は、ホバー時にこの変数を上書きします。

/* ホバーで背景とアイコンの色を反転 */
.back-to-top:hover {
	--bg-color: var(--ap-color-primary);
	--icon-color: #fff;
}

よくある質問