2022年にリリースされたChatGPTは今ではほとんどの人が知っていると思います。AIがまるで人が書いたような文章を自動生成している様子にたくさんの人が驚かされたでしょう。私もたまにChatGPTに質問をしています。ただ、すこーし設定が物足りないんですよね…。
![](https://smartphone-note.com/wp-content/uploads/2023/03/image-130.png)
ChatGPTのAI側のアイコンは変えることができないようになっています。これだとただのAIとチャットしている虚しい人です。何とかしてこのアイコンを変えてしまいたい。そこで今回はChatGPTのAI側のアイコンを変える方法を紹介します。
なお、今回の記事はナポリタン寿司さんの記事を参考に内容を拡張したものになります。
![](https://www.naporitansushi.com/wp-content/uploads/2022/11/naporitan-OGP.png)
方法の概要
方法としてはChatGPTのサイトに新たなCSSを適用するだけです。
![](https://smartphone-note.com/wp-content/uploads/2023/03/image-131-1024x576.png)
CSSを適用する際に画像データをDiscordのCDNに保存することでどの環境でも同じアイコンが利用できるようになります。
StylusでCSSを適用
まず、Stylusを導入します。Chrome Webストアから導入することもできますし、Firefoxでも導入できます。
次に、拡張機能のアイコンをクリックして設定画面を開きます。
![](https://smartphone-note.com/wp-content/uploads/2023/03/image-132.png)
Actionsの中にあるWrite new styleを押して新しいスタイルを作成します。
![](https://smartphone-note.com/wp-content/uploads/2023/03/image-133-1024x576.png)
するとこのような画面が出てくるので名前を決めた後に一回以下のコードを貼り付けて動作を試してみましょう。
@-moz-document domain("chat.openai.com") {
/*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://smartphone-note.com/favicon.png') !important;
transform: scale(.06) !important;
}
}
うまくCSSが適用されていればStylusの画面はこのようになって…
![](https://smartphone-note.com/wp-content/uploads/2023/03/image-135-1024x297.png)
ChatGPTの画面はこのようになるはずです。
![](https://smartphone-note.com/wp-content/uploads/2023/03/image-134.png)
しかし、CSSで適用するときは必ず画像直リンクが必要になります。私はConoHaのレンタルサーバーを利用しているため簡単にリンクを作ることができましたが、ほとんどの人がレンタルサーバーを持っていないと思います。
Discordでアイコンにしたい画像を投稿して直リンクにする
そこで使うのがDiscordです。適当なところにアイコンとして使いたい画像を投稿しましょう。
![](https://smartphone-note.com/wp-content/uploads/2023/03/image-136.png)
そして、画像をクリックして左下に出てくる「Open in Browser」をクリックします。
![](https://smartphone-note.com/wp-content/uploads/2023/03/image-137.png)
そのあと、開いた画像のリンクをコピーします。
![](https://smartphone-note.com/wp-content/uploads/2023/03/image-138-1024x746.png)
CSSの中にある「content: url(‘https://ーーーー」のところに張り付けます。
![](https://smartphone-note.com/wp-content/uploads/2023/03/image-139-1024x94.png)
こうすることでコードを共有するだけでChatGPTのアイコンのスタイルをいろいろな人々に使ってもらうことができるようになります。
@-moz-document domain("chat.openai.com") {
/*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://cdn.discordapp.com/attachments/1088315996177178656/1088320731714166864/favicon.png') !important;
transform: scale(1) !important;
}
}
ちなみに、サイズがとんでもないことになってしまった場合「transform: scale(値)」の値を調節することでサイズを調整できます。
![](https://smartphone-note.com/wp-content/uploads/2023/03/image-140.png)
transform: scale(0.06) !important;
![](https://smartphone-note.com/wp-content/uploads/2023/03/image-141.png)
ChatGPTのAI側アイコンを変えて楽しみましょう!最後まで見ていただきありがとうございました。
コメント