いろいろ調べて、ChatGPTの助けを借りて、なんとか目標を達成できました！
Lilyさんの提案通りボタンを追加し、あちこちで代替案を読み漁るのにかなりの時間を費やしました。結局、ChatGPTにボタンを作成するためのコード、あるいはアップロードした画像を元にしたフローティング「アバター」のコード作成を手伝ってもらいました。
将来誰かの役に立つかもしれないので、使用しているコードをここに載せておきます！
HTML:
<a id="chatbot-avatar" href="https://YOUR_URL_HEREs" title="AI chatbot">
<img src="https://YOUR_IMAGE_URL_HERE__" alt="Chatbot Avatar" />
<div class="tooltip">Start a conversation with the AI Chatbot</div>
</a>
CSS:
#chatbot-avatar {
position: fixed; /* アバターを固定 */
bottom: 50px; /* ページ下部からの距離 */
right: 50px; /* ページ右部からの距離 */
cursor: pointer; /* ホバー時にカーソルをポインターに変更 */
z-index: 1000; /* 他のコンテンツの上にアバターが表示されるようにする */
text-align: center; /* アバターのすぐ下にツールチップテキストを中央揃え */
}
#chatbot-avatar img {
width: 200px; /* 必要に応じてサイズを調整 */
height: 200px; /* 必要に応じてサイズを調整 */
transition: transform 0.3s; /* ホバーエフェクトをスムーズに */
}
#chatbot-avatar:hover img {
transform: scale(1.5); /* ホバー時にアバターを少し拡大 */
}
.tooltip {
visibility: hidden; /* デフォルトでは非表示 */
width: 200px; /* ツールチップの幅 */
background-color: #000C34; /* ツールチップの背景色 */
color: #fff; /* ツールチップのテキストカラー */
text-align: center; /* テキストを中央揃え */
border-radius: 5px; /* 角丸 */
padding: 8px; /* ツールチップ内のパディング */
position: absolute; /* 絶対配置 */
bottom: 220px; /* アバターの上に配置 */
right: 50%; /* アバターと中央揃え */
transform: translateX(50%); /* 中央揃えのために調整 */
opacity: 0; /* デフォルトでは透明 */
transition: opacity 0.3s; /* 透明度をスムーズに遷移 */
z-index: 999; /* アバターのすぐ下に配置 */
}
#chatbot-avatar:hover .tooltip {
visibility: visible; /* ツールチップを表示 */
opacity: 1; /* 完全に見えるようにする */
}
ページでの表示は以下のようになります（「AIチャットボットとの会話を開始する」というテキストは、アバターにカーソルを合わせたときにのみ表示されます。
まだできていないことが一つだけあります。それは、ホームページにのみ表示させ、現在はAIチャットボットの議論ページを含むすべてのページに表示されてしまい、明らかに冗長です。ページを識別してホームページ以外ではブロックするスクリプトを追加しようとしましたが、今のところうまくいっていません。明日、もう少し頑張ってみます！