【ChatGPT】背景画像のグラデーションを無効化するCSS。元の単色に戻そう！

この記事では、PCウェブサイト版「ChatGPT」のトップページのカラフルなグラデーション背景色を無効化して、元の単色（黒か白）に戻すCSSを書きます。

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

PCブラウザ版「ChatGPT」がGPT-5になってから、一時的かもしれませんが、トップページの背景色が変わりました。カラフルなグラデーションです。

トップページのみで何かしらのやりとりをすれば元通り単色になりますが、それでも鬱陶しかったのでCSSを使って削除してみます。

自身の環境上のみで他人には一切影響しません。自分だけの秘密です。

拡張機能を導入できるPCブラウザ向けでスマホやタブレットのアプリ版ではできません。

前提

「Stylebot」や「Stylus」などのCSSを適用できる拡張機能を既に導入している前提です。

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

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」について書き ...

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

「ChatGPT」にアクセスして適当に会話ページを開きます。

インストールした「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。

もし初めて「Stylebot」を起動した場合は「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると白紙のスタイルシート画面を開けます。

以下のコードを書き込みます。

CSS

/*GPT-5からのトップページグラデーション無効化*/
body>picture img {
    opacity: 0 !important;
}

/*GPT-5からのトップページグラデーション無効化*/
body>picture img {
    opacity: 0 !important;
}

注意事項

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

もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。

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

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

はい、元通り会話部屋と同様の背景画像になります。ライトテーマなら白、ダークテーマなら黒です。

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

以上、PCウェブサイト版「ChatGPT」のトップページのカラフルなグラデーション背景色を無効化して、元の単色（黒か白）に戻すCSSでした。

余談ですが、ページのソースを見たところ、グラデーションではなくそういう画像を背景に置いて、ぼかすCSSを適用させていました。

逆にすりガラスのぼかしを解除したい場合は、以下CSSを書き込みます。

/*GPT-5からのトップページグラデーションのぼかし解除*/
body>picture img {
    filter: blur(0px) !important;
    opacity: 1 !important;
}

/*GPT-5からのトップページグラデーションのぼかし解除*/
body>picture img {
    filter: blur(0px) !important;
    opacity: 1 !important;
}

背景の画像がくっきりはっきり表示されます。

ちなみにやろうと思ったら任意の背景画像に差し替えることもできます。僕は普段使っていないですけども。

まだ、コメントがありません