[ 解決済 ] 「スクロールすると横からでてくるCTA」と上に戻るボタンの位置について

[fuku]

■ WordPress のバージョン
6.6.2

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
15.26.4（Lightning Childバージョン: 0.5.1）

■ Pro Unit のバージョン
0.27.1

■ スキンの種類
プレーン

■ 期待する動作
「スクロールすると横からでてくるCTA」と「上に戻るボタン」を被らないようにしたい。

■ 自分で試した事
やりかたが分かりません。
解決法が、CSSで移動させる方法のみの場合、記述を教えていただけると有難いです。

■ 症状が発生するブラウザ
chrome、edge

■ 実際の症状
「スクロールすると横からでてくるCTA」を右に取り付けると、上に戻るボタン↑とかぶってしまいます。
上に戻るボタンを「CTA」の枠の外（上側）にずらしたいです。

Attachments:

You must be logged in to view attached files.

[mk]

この度はご利用いただきありがとうございます。
表題の件についてですが、以下の流れで対応いただけます。

1. 該当の「固定表示」ブロックを選択てください。
なお、固定表示ブロックをうまく選択できない場合はリストビューをご参照ください。

リストビューでまるわかり -WordPressのブロックエディター

2. 右のサイドバーで表示される項目の中から「カスタムCSS」を開いてください。

3. 以下のCSS

selector {
  transition: right .5s;
  right: -5em;
  bottom: 0;
  top: unset !important;
}

の中にある、bottom: 0;をbottom: 10%;に変えていただければかぶらなくなるかと思います。
もし細かく調整したい場合は、パーセンテージの数字を変えたり、また、10px等に変えることも可能です。

なお、現在はカスタムCSSからの編集で対応する形なりますが、今後のアップデートでは設定からbottomの数値を変更できるように開発を進めております。

ご確認のほど、よろしくお願いいたします。

[fuku]

ご返答ありがとうございます。

リストビューを開いたのですが、トップへ戻るボタンの固定表示が見つけられません。
（他の固定表示を開いてみて、右のサイドバーで位置を変えられることはわかりました！）

トップページのリストビューの中に、トップへ戻るボタンの固定表示は入っていますか？

[石川＠Vektor,Inc.]

トップへ戻るボタンは　ExUnit の機能によってサイト全体に出力されています。
コンテンツ内に配置したブロックではありませんので、記事のリストビューには表示されません。

よろしくお願いいたします。

[fuku]

石川様
ご返答ありがとうございます。

開発者ツールでセレクタを調べて、「追加CSS」に

.page_top_btn {
bottom: 15%;
}

を追記することで、ボタンを上に移動させることはできたのですが、
デバイスやブラウザによって少しかぶったり、隙間ができたりしてしまいます。

bottomで％の数字指定をする以外に、ちょうどよくブロックの上に乗っかって表示される方法があればと思ったのですが…。

[mk]

再度コメントをいただきありがとうございます。
こちらの説明が不十分であったことに、改めて読み直して気づきました。混乱させてしまい、申し訳ありません。

トップへ戻るボタンではなくバナーの位置を調整する方法を提案したのは、fukuさんのおっしゃる通り、バナー側の方が画面サイズに応じて変化することがあるためでした。
この点について、ブロック側で調整できるかどうかも検討してみますが、少し難しいかもしれません。

また、別の案として、上へ戻るボタンやバナー自体を左側に配置することで、重なりを防ぐ方法も考えられるかと思います。

ご検討いただけますと幸いです。

[fuku]

ｍｋ様
ご返信ありがとうございます。

状況をだいたい理解できました。
ご提案いただいた左に移す方法など、いろいろ試してみたいと思います。
（リストビューは初めて知った機能なので、他に応用できそうで助かります！）

ありがとうございました。

[投稿者]

投稿