一番上に戻るボタン の使い方

ページを下まで読んだ訪問者が、ワンクリックでページ上部へ戻れる固定ボタンセクションです。表示位置、アイコン、テキスト、形状、色、PC/モバイル別の距離までテーマエディターから調整できます。

目次

設定項目

表示位置

画面上の位置 - ボタンを右下・左下・下中央のどこに固定表示するか選びます。

表示開始スクロール量(px) - 指定したスクロール量を超えたときだけボタンを表示します。

PCで表示 - PC表示でボタンを出すかどうかを切り替えます。

モバイルで表示 - モバイル表示でボタンを出すかどうかを切り替えます。

Copilify 一番上に戻るボタン ヘルプ 表示位置

ボタン内容

アイコン - 上向き矢印、山型、三角形、二重山型、なしから選べます。

ボタンテキスト - TOPなどの任意テキストを追加できます。空欄ならアイコンのみになります。

テキストの太さ - ボタン内テキストを標準または太字にします。

aria-label(読み上げ用) - スクリーンリーダー向けの読み上げ文言を設定します。

Copilify 一番上に戻るボタン ヘルプ ボタン内容

ボタンの形

形状 - 円形、角丸、四角から選べます。

角丸の半径(px) - 角丸を選んだときの丸みを調整します。

ボタンサイズ-PC(px) - PC表示時のボタンサイズを調整します。

ボタンサイズ-モバイル(px) - モバイル表示時のボタンサイズを調整します。

アイコンサイズ-PC(px) - PC表示時のアイコンサイズを調整します。

アイコンサイズ-モバイル(px) - モバイル表示時のアイコンサイズを調整します。

文字サイズ-PC(px) - PC表示時のテキストサイズを調整します。

文字サイズ-モバイル(px) - モバイル表示時のテキストサイズを調整します。

Copilify 一番上に戻るボタン ヘルプ ボタンの形(撮り直し)

ボタンの色

背景色 - 通常時のボタン背景色を変更します。

アイコン・テキスト色 - 通常時のアイコンとテキスト色を変更します。

ホバー時の背景色 - マウスを乗せたときの背景色を変更します。

ホバー時のアイコン・テキスト色 - マウスを乗せたときのアイコンとテキスト色を変更します。

枠線の太さ(px) - ボタン枠線の太さを調整します。

枠線の色 - 枠線を表示する場合の色を変更します。

影をつける - ボタンに影を付けて背景から浮かせます。

Copilify 一番上に戻るボタン ヘルプ ボタンの色(撮り直し)

画面端からの距離

スクロール動作 - クリック時になめらかに戻るか、即座に戻るかを選びます。

左右の距離-PC(px) - PC表示時の左右端からの距離を調整します。

下からの距離-PC(px) - PC表示時の下端からの距離を調整します。

左右の距離-モバイル(px) - モバイル表示時の左右端からの距離を調整します。

下からの距離-モバイル(px) - モバイル表示時の下端からの距離を調整します。

Copilify 一番上に戻るボタン ヘルプ 画面端からの距離

よくある質問

どのページに追加できますか?

商品ページ、固定ページ、ブログ記事など、縦に長いページに追加できます。ページ下部まで読んだ訪問者をトップへ戻しやすくします。

PCだけ、またはモバイルだけに表示できますか?

できます。「PCで表示」「モバイルで表示」を切り替えることで、デバイスごとに表示を制御できます。

チャットボタンなどと重なる場合はどうしますか?

表示位置と画面端からの距離を調整してください。右下・左下・下中央から選べ、PC/モバイル別に距離を変更できます。