ブラウザ版のChatGPTやGeminiは、Chrome拡張機能の「Stylus」を使うと、自分のブラウザ上だけ文字サイズ、行間、本文幅、余白、背景色などを調整できます。
CSSを自分で一から書く必要はありません。「文字を少し小さくしたい」「本文を広げたい」とChatGPTやGeminiへ伝えてCSSを作ってもらい、Stylusへ貼り付ける方法があります。
まずは文字サイズや行間など、小さく戻しやすい変更から試してください。
Stylusとは
Stylusは、Webサイトへ自分専用のCSSを追加し、表示を調整できるブラウザ拡張機能です。Webサイト本体やChatGPT・Geminiのアカウント設定を書き換えるものではありません。
たとえば、次の変更ができます。
- 文字サイズや行間を変える
- チャット本文の横幅を広げる
- 左右の余白を減らす
- 背景色や文字色を変える
- 特定の部分を非表示にする
StylusはChrome、Firefox、Chromium系ブラウザに対応しています。この記事ではChromeでの操作を中心に説明します。
利用できるのは基本的にブラウザ版
今回の方法は、Chromeなどのブラウザで開くChatGPT・Gemini向けです。独立したデスクトップアプリには、そのまま適用できません。
Microsoft Edgeでも、Chrome Web Storeから拡張機能を追加できます。初回は「他のストアからの拡張機能を許可する」という確認が表示される場合があります。
Stylusを導入してスタイルを作る
1．Chrome Web Storeから追加する
Chrome Web StoreのStylusページを開き、拡張機能を追加します。追加時は、画面に表示される権限を確認してください。
よく使う場合は、Chrome右上の拡張機能メニューからStylusをピン留めしておくと、すぐに開けます。
2．ChatGPTまたはGeminiを開く
変更したいサイトを開いた状態でStylusのアイコンをクリックします。ChatGPTなら、chatgpt.comを開いた状態で操作します。
3．新しいスタイルを作成する
Stylusの画面から、そのドメイン用の新しいスタイルを作成します。CSSを入力する編集画面が開いたら、対象ドメインがchatgpt.comやgemini.google.comになっていることを確認します。
4．CSSを貼り付けて保存する
AIに作ってもらったCSSを貼り付け、保存します。保存すると、そのブラウザ上の対象サイトへ反映されます。
CSSはChatGPTやGeminiに作ってもらえる
CSSが分からなくても、変更したい内容を具体的に伝えれば、Stylusへ貼り付けるコードを作ってもらえます。
ChatGPTのブラウザ版をStylusで変更したいです。回答本文の文字を少し小さくして、行間も少し狭くするCSSを作ってください。
返ってきたCSSをコピーし、Stylusへ貼り付けて保存します。反映されない部分があれば、「回答本文だけ変わりません」「サイドバーには適用しないでください」のように、結果を伝えて修正を依頼します。
最初に試しやすい変更
| 変更する部分 | 主な目的 |
|---|---|
| 文字サイズ | 読みやすくする、または一画面の表示量を増やす |
| 行間 | 長文を読みやすくする、または表示を詰める |
| 本文幅 | 大型モニターの横幅を活用する |
| 余白 | チャット部分を広く使う |
| 背景色 | 自分が見やすい配色へ変える |
文字サイズと行間を変える例
body {
font-size: 14px !important;
}
p {
line-height: 1.5 !important;
}これは考え方を示す簡単な例です。ChatGPTやGeminiでは、画面内のすべての文字がbodyやpの指定だけで変わるとは限りません。効かない場合は、変更したい部分が分かるスクリーンショットと現在のCSSをAIへ渡し、対象を絞ったCSSへ直してもらいます。
本文幅や左右の余白を変える
大型モニターで本文だけが狭い場合は、次のように依頼します。
ChatGPTのチャット本文の最大幅を1200px程度まで広げ、左右の余白も少し減らすStylus用CSSを作ってください。サイドバーや入力欄は崩さないでください。
画面構造は変わることがあるため、単にmain全体へ幅を指定すると入力欄やメニューまで崩れる場合があります。結果を見ながら調整してください。
背景色を変える
ChatGPTの背景を少し青みのある濃紺にして、本文の文字を白系にするStylus用CSSを作ってください。ボタン、入力欄、コードブロックも読める配色にしてください。
背景色だけを変えると、一部の文字やボタンが見えにくくなることがあります。背景、本文、リンク、入力欄、コードブロックをまとめて確認します。
複数の変更をまとめて依頼する
希望が決まっている場合は、条件をまとめて伝えます。
ChatGPTのブラウザ版をStylusでカスタマイズしたいです。本文文字サイズは15px、行間は1.6、チャット本文は広め、背景は濃紺、文字色は白系、コードブロックは読みやすい配色にしてください。
一度に大きく変えると、どの指定が原因で崩れたのか分かりにくくなります。最初は文字サイズと行間、次に本文幅、最後に色というように段階を分けると調整しやすくなります。
うまく反映されない場合
ChatGPTやGeminiのHTML・CSSは随時変更されます。以前使えたCSSが効かなくなることや、一部だけ反映されないことがあります。
- 回答本文だけ文字サイズが変わらない
- サイドバーだけ色が変わらない
- 本文幅が変わらない
- ボタンや入力欄が見にくくなった
- メニューが重なった
その場合は、現在のCSSとスクリーンショットを示し、「どの部分をどう変えたいか」「残したい部分はどこか」を伝えます。CSS内に古い指定を残したまま追記を重ねるより、不要な指定を整理して一つのスタイルにまとめる方が管理しやすくなります。
元に戻す方法
表示が崩れた場合は、次のいずれかで元に戻せます。
- 追加したCSSを削除する
- 対象スタイルを無効にする
- 作成したスタイル自体を削除する
Webサイト本体は変更していないため、Stylus側の設定を無効にすれば通常表示へ戻せます。
利用前に確認したい注意点
サービス側の変更でCSSが効かなくなる
画面構造が変わると、対象を指定しているCSSの修正が必要になります。長期間使う場合は、いつでも無効にできるようにしておきます。
極端な変更は操作を妨げる
余白をなくしすぎる、ボタンやメニューを非表示にする、文字と背景の差を小さくすると、必要な操作ができなくなる場合があります。保存後は、回答本文だけでなく、入力欄、メニュー、設定画面、コードブロックも確認してください。
会社PCでは利用ルールと権限を確認する
組織で管理されているPCでは、拡張機能の追加が禁止または制限されている場合があります。追加時に表示される権限を確認し、社内ルールに従ってください。
AIを使う画面も仕事に合わせて整える
生成AIを長時間使う場合は、AIの機能だけでなく、文字の大きさや一画面の情報量も作業しやすさに影響します。
最初は文字サイズを1〜2px変える、行間を少し調整するところから始めます。使いにくければ無効にし、必要な部分だけ修正します。
「こういう画面にしたい」とAIへ伝え、CSSを作ってもらい、Stylusへ貼り付ける。これを繰り返すことで、自分の作業に合うブラウザ表示へ調整できます。
関連リンク
表示を調整するブラウザと読みやすさの基本を確認するには、ブラウザ、アクセシビリティを参照してください。