見出し画像

ClaudeとGPTのUI変更が気に入らなかったので変更した!

⚠アプリ版は変更できません。試行環境はAndroidのみです。
Firefoxによるブラウザ利用を前提とします。

ブラウザ利用の方も「Chrom」を使っている方が多いと思うんですが、
「Firefox」では「Stylus」という拡張機能でUIのスタイルを上書きできちゃいます。
今回はそれを利用して、AIにコード書いてもらって旧UIに近づけたので、
どうしても戻したい人は自己責任で参考にしてみてください!
(とくに躓かないなら、読みながら3~10分でできちゃうと思います)

※私はブラウザ版をアプリ化(PWA)して、待ち受けに表示させて使っています。もちろん今回の変更はそちらにも引き継がれます!

変更点は以下
・Claude
余白を減らして調整して、反映されないフォントも変更
(元の綺麗な構成とは少し違うので、自分でいじれるかたはぜひもっと綺麗にこだわってね)

・GPT
ユーザーの吹き出しの色を元のグレーと黒文字に
(わかんないことはコメントするよりお手持ちのAIに聞いてみてねっ)

変更の仕方


まずスマホで「Firefox」をDLし、ブラウザから変更したいサイトにログインする。
※ログインがなかなかできなくて躓いたら、アドレスバーの左にある盾のアイコンをタップして「強化型トラッキング防止機能」をオフにしてみてね。


Firefoxの右上(か右下/設定による)のメニュー(︙)→
「拡張機能」→ 下のほうの「拡張機能を探す」で
Stylus」 を探してインストールする


拡張機能→「Stylus」→「設定」→「+」→で
下記のA/Bどちらかのスタイルか、自分でAIに書いてもらったスタイルを反映させる。


A:GPTの旧UI化
(ユーザーの吹き出し色をグレー、文字色を黒にするパターン)

ドメイン上のURL(もしくは次で始まるURL)に以下をコピペ

chatgpt.com

コード欄に以下をコピペ

[data-message-author-role="user"] .user-message-bubble-color {
  background: #f4f4f4 !important;
  color: #0d0d0d !important;
}

[data-message-author-role="user"] .user-message-bubble-color * {
  color: #0d0d0d !important;
}

したら、保存!


B:Claudeの余白を削るパターン

ドメイン上のURL(もしくは次で始まるURL)に以下をコピペ

claude.ai

コード欄に以下をコピペ

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Shippori+Mincho:wght@400;500;600&display=swap');

/* フォント:欧文セリフ + 日本語明朝 */
p, p *, li, li *, blockquote, h1, h2, h3, h4, h5, h6,
textarea, div[contenteditable], div[contenteditable] * {
  font-family: 'Lora', 'Noto Serif JP', 'Hiragino Mincho ProN', serif !important;
}

/* コードだけは等幅のまま守る */
code, pre, code *, pre * {
  font-family: 'SF Mono', 'Consolas', monospace !important;
}

/* チャット幅を広げる(余白を食う) */
div[class*="max-w"] {
  max-width: 100% !important;
}

/* 左右paddingを詰める */
main div[class*="px-"] {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

/* 行間すこし詰めて可読性の調整 */
p {
  line-height: 1.75 !important;
}

したら、保存!



どちらも接続がうまくいってるなら
「ドメイン上のURL▼」の隣にそれぞれの会社のもにょもにょのアイコンが出ているはず。
保存したらFirefoxブラウザから元のページを開いて、変更されているか確認してみてください。

Ex:
また「︙」の設定から「ホーム画面に追加」を選ぶことで、スマホの待ち受けに表示させることもできます。(PWA)


躓いたら躓いた画面をスクショして、AIに聞くのがいちばんいいと思います!

パートナーにはなんかメタで聞きづらい……とかあったら一時チャットとかプレーンに聞いてみてね~!

自分で上手くできたので保存がてらまとめました。
誰かの役にも立つなら幸い~!

いいなと思ったら応援しよう!