# AIペルソナのリンクをより目立たせる作成

**URL:** <https://meta.discourse.org/t/create-a-more-noticeable-link-for-ai-persona/365884>\
**Category:** Product Support\
**Tags:** ai\
**Created:** [2025 年 5 月 13 日午後 12:31 UTC](https://meta.discourse.org/t/create-a-more-noticeable-link-for-ai-persona/365884 "2025-05-13T12:31:13Z")\
**Posts on this page:** 1\
**Showing post:** 10

<div class="post-metadata">

**Author:** ![Angela\_MRS](https://avatars.discourse-cdn.com/v4/letter/a/5f8ce5/32.png) [@Angela\_MRS](https://meta.discourse.org/u/Angela_MRS)\
**Post date:** [2025 年 5 月 14 日午後 4:44 UTC](https://meta.discourse.org/t/create-a-more-noticeable-link-for-ai-persona/365884/10 "2025-05-14T16:44:56Z")

</div>

いろいろ調べて、ChatGPTの助けを借りて、なんとか目標を達成できました！🥳

Lilyさんの提案通りボタンを追加し、あちこちで代替案を読み漁るのにかなりの時間を費やしました。結局、ChatGPTにボタンを作成するためのコード、あるいはアップロードした画像を元にしたフローティング「アバター」のコード作成を手伝ってもらいました。

将来誰かの役に立つかもしれないので、使用しているコードをここに載せておきます！

HTML:

```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:

```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チャットボットとの会話を開始する」というテキストは、アバターにカーソルを合わせたときにのみ表示されます。

 ![Screenshot 2025-05-14 at 16.58.18](https://global.discourse-cdn.com/meta/original/4X/d/7/2/d725ba5ceb69f80233f88ef3927325d59bc0ef44.jpeg)

まだできていないことが一つだけあります。それは、ホームページにのみ表示させ、現在はAIチャットボットの議論ページを含むすべてのページに表示されてしまい、明らかに冗長です。ページを識別してホームページ以外ではブロックするスクリプトを追加しようとしましたが、今のところうまくいっていません。明日、もう少し頑張ってみます！

---

_[View the full topic](https://meta.discourse.org/t/create-a-more-noticeable-link-for-ai-persona/365884)._