広告を利用しています

当サイトは広告を掲載しています。消費者庁が2023年10月1日から施行した景品表示法の規制対象(通称:ステマ規制)にならないよう配慮して記事を作成しています(記事はこちら、消す方法はこちら

【ChatGPT】右上のプロフィールアイコンを好きな画像に変更するCSS

Stylebot&Stylus(CSS)

「ChatGPT」のアイコン画像

この記事では、OpenAIが開発している人工知能「ChatGPT」で右上に表示される自分のアイコンを好きな画像に見た目上差し替える方法を書きます。

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

【ChatGPT】右上のプロフィールアイコンを好きな画像に変更するCSS

PCウェブサイト版「ChatGPT」にログインしている時右上に表示されるアイコンは、デフォルトではGoogleアカウントか何かで設定しているアイコン画像になっています。

PC版「ChatGPT」にログインしている時右上に表示される自分のアイコン画像

具体的な日時は忘れたんですが、以前は会話内の自分の吹き出し横に表示されていました。2024年後期くらいから廃止されて右上だけに表示されるようになりました。

2024年後期以前のPC版「ChatGPT」のスクリーンショット画像

右上だけの表示になったので、会話毎ごとに表示されていた頃と比べると圧倒的にスクショ調整しやすくなったと思いますが、全体画面をスクショして共有したい時はまだ困るかもしれません。

見せたくないアイコンの場合、毎回モザイク編集するのは少々手間だと思います。

アイコンを変更したい場合、ログインしているサービスによって設定する必要があります。例えばメールアドレスでログインしている場合は「Gravatarグラバター」と呼ばれるアバター画像サービスを利用することで変更できるようです。

しかし、別サービスを使ったりアカウントの種類によって方法が異なるのは少し手間だと感じました。CSSを利用することで別画像に差し替えたりシンプルな白黒アイコンにできます。

根本的に変更するのではなくあくまでCSSを導入したブラウザ上の見た目を変えるだけです。CSSをオフにすると元のアイコンに戻ります。根本的にアイコンを変えたい場合は上記で紹介した他サイト様のような手順を踏む必要があります。

いつでも元に戻せます。拡張機能を導入できるPCブラウザ向けでスマホやタブレットのアプリ版ではできません。著作権や写真サイトから直接画像を引っ張る行為には気を付けてください。

【PR】OpenAI o1搭載のSEOライティングツール「トランスコープ」

インストール方法

Chromeウェブストアからインストールできます。

Chrome拡張機能だけでなく「Microsoft Edge」と「Firefox」版もあります。本記事では「Stylebot」を紹介しますが「Stylus」などでもOKです。僕はメインでは「Stylus」を使っています。

「Chromeに追加」をクリックします。

「Stylebot」拡張機能をインストールする手順画像1

「拡張機能を追加」をクリックします。

「Stylebot」拡張機能をインストールする手順画像2

拡張機能のオーバーフローメニューに追加されたらOKです。

「Stylebot」拡張機能をインストールする手順画像3

頻繁に開く場合は拡張機能のオーバーフローメニューを開いて「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。

「Stylebot」拡張機能を直接ツールバーに配置する手順画像

詳しい使い方を知りたい方は以下の記事を参考にしてみてください。

ChatGPTに表示される自分のアイコン画像を変更する手順

スタイルシートを開く

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

「Stylebot」拡張機能のスクリーンショット1

右側に白紙のサイドバー(スタイルシート)が表示されます。こちらにコードを書き込みます。自分が実現したい見た目に応じて、書き込むコードが変わります。

【CSS】シンプルな黒一色

「こだわりは一切ない!とにかく自分のアイコンが隠れればなんでもいい!」という方は真っ黒に塗りつぶすCSSがいいかもしれません。

以下のコードをスタイルシートに書き込みます。

CSS
/*右上の自分のアイコンを真っ黒にする*/
img[alt="User"] {
    filter: brightness(0) !important;
}

brightness(0)」で明るさを0にしています。0にすることで真っ黒になります。

注意事項

本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。

もし書き込んでも反映されない場合、こちらで紹介している拡張機能を試してみるか、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

「Stylebot」拡張機能のスクリーンショット2

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

「ChatGPT」にログインしても右上にGoogleのプロフィールアイコンが表示されず、代わりに真っ黒な丸が表示されます。

PC版「ChatGPT」にログインしている時右上に表示されるアイコンをCSSで真っ黒にした画像

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

【CSS】シンプルな白一色

真っ黒ではなく真っ白にしたい場合は以下のCSSになります。真っ黒にするコードと併用しても意味がないのでどちらかだけを書き込みます。

CSS
/*右上の自分のアイコンを真っ白にする*/
img[alt="User"] {
    filter: brightness(0) invert(1) !important;
}

brightness(0)」だけだと真っ黒になるので追加の「invert(1)」を書き込んでいます。色を反転させるという意味です。明るさを真っ黒にしてその真っ黒を反転して真っ白にしています。

PC版「ChatGPT」にログインしている時右上に表示されるアイコンをCSSで真っ白にした画像

【CSS】好きな画像

自分で用意した画像にしたい場合は少々高度になります。とりあえずテストとして下記CSSを丸々貼り付けるといいかなと思います。

CSS
/*右上の自分のアイコンを好きな画像にする*/
div:has(>img[alt="User"])::after {
    content: '' !important;
    background-image: url('https://www.naporitansushi.com/wp-content/uploads/2022/11/diary-2022_34.png');
    background-size: cover;
    background-position: center;
    position: absolute;
    width: 100%;
    height: 100%;
}

下記画像のようになればOKです。記事執筆時点では「has」の中に「>」を書くとエラーっぽい表記になりますが、問題なく動作するので気にしなくてOKです。

「Stylebot」拡張機能のスクリーンショット3

右上の自分のアイコンが水色のサッカーボールになると思います。僕が描いたイラストを当サイトのサーバーにアップロードしたものです。

PC版「ChatGPT」にログインしている時右上に表示されるアイコンをCSSでサッカーボールにした画像

上記CSSを書き込んで無事にサッカーボールになった場合、自身の好きなアイコンにするようコードを改造していきます。

改造する部分は画像URLです。上記CSS内にある「background-image」の「https://www.naporitansushi.com/wp-content/uploads/2022/11/diary-2022_34.png」を自身が表示したいアイコンの画像URLに差し替えます。

ポイントはインターネット上にアップロードした画像のみ対応しているという点です。もしかしたら自分のローカルPC内にある画像ファイルを指定することもできるかもしれませんが、僕は初心者なので方法が分かりません。

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

自分の元アイコンを非表示にする」のCSSで元々表示されていた自身のアイコンを消しています。

【CSS】X(旧Twitter)アイコンにする方法

試しにX(旧Twitter)のアイコン画像を設定してみます。「X(旧Twitter)」のプロフィールページにアクセスします。アイコン画像をクリックします。

PCウェブサイト版「X(旧Twitter)」アイコンの画像URLをコピーする手順画像1

画像を右クリック→「画像のアドレスをコピー」をクリックします。「新しいタブで画像を開く」をクリックしてアドレスバーのURLをコピーしてもOKです。

PCウェブサイト版「X(旧Twitter)」アイコンの画像URLをコピーする手順画像2

こちらで紹介したCSSの「background-image」部分をコピーしたアドレスに差し替えます。

僕のXアイコン画像を利用する場合以下のようになります。最後の拡張子などもそのまま貼り付けます。前後は「'」記号で囲みます。

CSS
/*自分のアイコンを好きな画像にする*/
div:has(>img[alt="User"])::after {
    content: '' !important;
    background-image: url('https://pbs.twimg.com/profile_images/1588301794479722496/-uuR3zN5_400x400.jpg');
    background-size: cover;
    background-position: center;
    position: absolute;
    width: 100%;
    height: 100%;
}

「X(旧Twitter)」アイコンが「ChatGPT」の右上にあるプロフィールアイコンになります。画像URLを書き換えることで自身の好きな画像にできます。サーバーにアップロードしてその画像URLを利用します。

PC版「ChatGPT」にログインしている時右上に表示されるアイコンをCSSでX(旧Twitter)アイコンにした画像

ChatGPTのAI側のアイコン画像を変更したい場合

自分のアイコンではなくAI側のアイコンを変えたい場合は以下の記事を参考にしてみてください。拡張機能「GPT Icon Changer」を利用します。

感想

以上、「ChatGPT」にログインしている時、右上に表示される自分のアイコンを好きな画像に変更するCSSでした。

CSSでささっと上書きで変えている状態なのでいつでも元に戻せます。別デバイスで開いた時は通常のアイコンになるので注意です。「ChatGPT」の仕様変更によりCSSが使えなくなる可能性もあります。

2023年4月13日Stylebot&Stylus(CSS)

Posted by ナポリタン寿司