RuffRuff 購入特典のフローティングボタンで、位置に「左真ん中」「右真ん中」を追加し、モバイルとデスクトップそれぞれで表示位置を調整できるようにしました。
要点
- できること: ボタンを画面の左右中央に置けます。端からの距離や上下位置をpx単位で調整できます
- 対象: フローティングボタンを利用しているストア運営者です
- 対応: 不要です。位置を変えたい場合のみ、テーマエディタで設定してください
変更前と変更後
| 項目 | 変更前 | 変更後 |
|---|---|---|
| 位置の選択肢 | 右下 / 左下 | 右下 / 左下 / 左真ん中 / 右真ん中 |
| ボタンの位置の微調整 | なし | 端末別に、端からの距離や中央からの上下位置を調整可能 |
使い方
- テーマエディタの「アプリの埋め込み」で「RuffRuff 購入特典」を開き、「フローティングボタン」を表示します
- 「位置」で、左下・右下・左真ん中・右真ん中のいずれかを選びます
- モバイルとデスクトップそれぞれの距離や上下位置を調整し、保存します
詳しい設定方法は、ヘルプの「フローティングボタンの位置を調整する」をご確認ください。
調整できる項目
位置は、モバイルとデスクトップで共通です。数値は端末ごとに設定します。選んだ位置に合わせて、次の入力欄が表示されます。
| 設定 | 範囲・刻み | 標準値（モバイル / デスクトップ） |
|---|---|---|
| 下端からの距離（左下・右下） | 0〜200px・2px刻み | 12px / 24px |
| 中央からの上下位置（左真ん中・右真ん中） | −200〜200px・4px刻み（マイナスで上、プラスで下） | 0px / 0px |
| 左右端からの距離 | 0〜200px・2px刻み | 12px / 24px |
- 下端からの距離は、左下・右下のときに表示されます
- 中央からの上下位置は、左真ん中・右真ん中のときに表示されます
- 左右端からの距離は、どの位置でも表示されます
- 画面幅が640px未満の場合はモバイル、640px以上の場合はデスクトップの数値が使われます
位置の調整に合わせた表示
- デスクトップの下配置では、ボタンの上にパネルを開き、選択した左右端にそろえます
- デスクトップの中央配置では、左のボタンの右隣、右のボタンの左隣にパネルを開きます
- モバイルでは、位置にかかわらずパネルを画面下部に全幅で表示します
対象となるストア
- 対象: フローティングボタンを表示しているストア
- 対象外: フローティングボタンを「非表示」にしているストア（位置の設定は反映されません）
既存設定への影響
これまでの位置設定（右下・左下）と、画像・色などのフローティングボタンの設定は維持されます。数値の入力欄は新しく追加された設定で、標準値が入力された状態です。
ストア運営者による対応
設定変更は不要です。位置を変えたい場合のみ、上の手順で設定してください。
適用日
2026年9月29日
制限事項
- 入力値は、上の表の刻みに丸められます。たとえば下端からの距離に71pxは指定できません
- ボタンの右端が画面の端に近い場合、バッジが切れないよう、右端の距離は最低4pxになります。右端の0は4pxとして扱われます
- 画面の高さが低いデスクトップでは、パネルを下部に全幅で表示することがあります
