【ChatGPT】AI側のアイコンを好きな画像に変更するCSS

2023年1月31日Stylebot&Stylus(CSS)

この記事では、OpenAIが開発している人工知能「ChatGPT（チャット・ジーピーティー）」で、AI側のアイコン画像を好きな画像に差し替える方法を書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」を利用します。

デフォルトでは、のアイコンですが、CSSで重ねるように別画像を表示させることで、パッと見、アイコンを差し替えたようにできます。

好きなアニメキャラや、フリー素材の写真に変えられます。

いつでも元に戻せます。PCウェブサイト版のみです。スマホではできません。

なお、ChatGPT側のアップデートにより、使えなくなる可能性が大です。その時は、記事を更新したいと思いますが、忘れている時があります。その場合、問い合わせより連絡いただければなと思います。

著作権や、写真サイトから直接画像を引っ張る行為には気を付けてください。自己責任です。

1. インストール方法
2. ChatGPTのアイコン画像を変更する手順
3. 感想

インストール方法

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。

Stylebot - Chrome ウェブストア

ウェブの外観を瞬時に変更

https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...

「Chromeに追加」をクリックしてインストールします。

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボッ ...

https://www.naporitansushi.com/stylebot/

ChatGPTのアイコン画像を変更する手順

「ChatGPT」にアクセスします。適当に会話ページを開きます。インストールした「Stylebot」拡張機能アイコンをクリック→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。こちらに以下のコードを書き込みます。

/*ChatGPT側のアイコン画像を削除*/
.flex.flex-col.relative.items-end>div:is([style="background-color:#10a37f"],[style="background-color: rgb(16, 163, 127);"]):has(svg) {
  background-color: transparent !important;
  border-radius: 50% !important;
}

/*ChatGPT側のアイコン画像*/
.flex.flex-col.relative.items-end>div:is([style="background-color:#10a37f"],[style="background-color: rgb(16, 163, 127);"]):has(svg)::after {
  content: url('https://www.naporitansushi.com/wp-content/uploads/2023/01/waifu.png') !important;
  transform: scale(.5) !important;
}

とりあえず、テストで上記のCSSを丸々貼り付けるといいかなと思います。右上の「×」でスタイルシートを閉じます。

再度拡張機能ボタンを押して、登録したサイト（例：chat.openai.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。

これで、会話ページにあるChatGPT側のアイコンが、水色の髪の二次元イラストになります。「Waifu Labs（ワイフラボ）」というAIイラスト生成サービスで作成したイラストです。

上記CSSの「content」という部分に、自身が表示させたい画像のURLを入力します。僕の場合、「https://www.naporitansushi.com/wp-content/uploads/2023/01/waifu.png」の部分です。

例えば、僕が描いたサッカーボールの画像に差し替えたい場合は、以下のCSSになります。URLの部分だけを書き換えています。

/*ChatGPT側のアイコン画像*/
.flex.flex-col.relative.items-end>div:is([style="background-color:#10a37f"],[style="background-color: rgb(16, 163, 127);"]):has(svg)::after {
  content: url('https://www.naporitansushi.com/wp-content/uploads/2022/11/diary-2022_34.png') !important;
  transform: scale(.5) !important;
}