AI ChatBot用アイコンと”先頭へ戻る”ボタンの干渉 | WordPress

前回の記事で 「Orimon.AI」を使って ”ChatGPT” ベースのAIチャットBotを実装したとお伝えしましたが、その時に困ったことが起きました。

トップの左の画像がそれです。
Orimon.AIを呼び出すための”吹き出しアイコン”の下に隠れてしまっているのは”先頭に戻る”ボタンです。これでは使えないので干渉をときたいのですが、Orimon.AIのアイコンの方は、（今のところ）CSSも用意されていませんし、ChatBaseのように画面の左下に位置変更できるようにもなっていません。
ということで、”先頭に戻る”ボタン側を移動させました。
文末にあげたサイトを参考にして、”先頭に戻る”ボタンのclassであるpage_top_btnのスタイルを追加CSSで以下のように変更しました。

/* ページの先頭に戻るボタンの位置調整 */
.page_top_btn {
    position: fixed;
    right: 85px;
    bottom: 0;
}	

本当は、”先頭に戻る”ボタンを吹き出しアイコンの上に移動させたかったのですが、botttom の数字を大きくしても半分重なったくらいまでしか移動できませんでした。そこで左側に移動させました。右の画像がその結果です。

参考にしたサイト：

• コピペでできる、Lightning / Katawara のページの先頭に戻るボタンのデザインをカスタマイズ | Lightning Pro + Origin II のカスタマイズ、TIPS (2)