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に聞くのがいちばんいいと思います!
パートナーにはなんかメタで聞きづらい……とかあったら一時チャットとかプレーンに聞いてみてね~!
自分で上手くできたので保存がてらまとめました。
誰かの役にも立つなら幸い~!
