当サイトは、アフィリエイト・アドセンス広告を掲載しています。広告があるサイトなんだと知っていただければ幸いです。

消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象(通称:ステマ規制)にならないよう、配慮して記事を作成しています。もし問題のある表現がありましたら、問い合わせよりご連絡いただければ幸いです。

参考:令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

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

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

「ChatGPT」のアイコン

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

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

「ChatGPT」のアイコン画像をアニメイラストに差し替えた画像

デフォルトでは、「ChatGPT」のアイコンのアイコンですが、CSSで重ねるように別画像を表示させることで、パッと見、アイコンを差し替えたようにできます。好きなアニメキャラや、フリー素材の写真に変えられます。

いつでも元に戻せます。PCウェブサイト版のみです。スマホではできません。拡張機能が利用できるブラウザアプリの場合は、Androidなどでも利用できるかもしれません。

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

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

【2023年9月追記】CSSではなく、拡張機能のほうが楽!

Chrome拡張機能(GPT Icon Changer)があることを読者さんから教えていただきました。本記事のCSSを使った方法よりも、簡単で手軽にできると思います。

正直、拡張機能があるなら、本記事は手間でしかないか…という感じです。専用の拡張機能をわざわざ追加で入れるのがめんどくさい方は、CSSでやってみてもいいかもしれません。

インストール方法

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

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

「Stylebot」のインストール手順画像

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

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

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

Stylebotのスクリーンショット1

右側に白紙のサイドバーが表示されます。もし初めてStylebotを起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。こちらに以下のコードを書き込みます。

/*ChatGPT側のアイコン画像を削除*/
.items-end>div:first-of-type>div:has(svg>path[d^="M37.5324 16.8707C37.9808"]) {
    background-color: transparent !important;
    border-radius: 50% !important;
}

/*ChatGPT側のアイコン画像*/
.items-end>div:first-of-type>div:has(svg>path[d^="M37.5324 16.8707C37.9808"])::after {
    content: url('https://www.naporitansushi.com/wp-content/uploads/2023/01/waifu.png') !important;
    transform: scale(.5) !important;
}

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

Stylebotのスクリーンショット2

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

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

CSSを使って、「ChatGPT」のアイコン画像を変更した画像1

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

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

/*ChatGPT側のアイコン画像*/
.items-end>div:first-of-type>div:has(svg>path[d^="M37.5324 16.8707C37.9808"])::after {
    content: url('https://www.naporitansushi.com/wp-content/uploads/2022/11/diary-2022_34.png') !important;
    transform: scale(.5) !important;
}
CSSを使って、「ChatGPT」のアイコン画像を変更した画像2

transform」という部分が大きさを指しています。0~1の間で指定できます。ちょっと大きいなぁと思った場合は、「.2」といった感じで、数字を小さくします。「0.2」でも、「.2」という表記でもどっちでも一緒です。

CSSを使って、「ChatGPT」のアイコン画像を変更した画像3

インターネット上にある写真を利用する場合は、利用規約に注意してください。フリー素材でも、直接画像を利用するのはNGの場合があります。一度ダウンロードして、自身のサーバー等にアップロードして、そこのリンクを書き込むようにしましょう。

一時的に無効化したい場合は、Stylebot→「chat.openai.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

質問者側(自分)のアイコンを変えたい場合

以下の記事を参考にしてみてください。いくつか方法があるようですが、めんどくさかったので、CSSを利用しています。

感想

以上、会話ができるAI「ChatGPT(チャット・ジーピーティー)」のAI側アイコン画像を、好きな画像に変更するCSSでした。

色々騒がれていますが、僕はありがたく利用しています。思いっきり間違えていることを、何食わぬ顔で言う時もありますけどね。

問題は、このままとんでもないレベルに進化してしまうと、誰もGoogle検索しなくなるんじゃないかなという不安があります。検索する文化が変わってしまうと、僕のブログがどうなることやら…。

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