はじめに
ツールバーの Stylebot アイコンをクリックし、このページをカスタマイズを選びます。どのタブでも alt+shift+M を押すか、要素を右クリックして Stylebot → 要素のスタイルを設定を選んでもかまいません。
ピッカーをクリックし、ページ上でマウスを動かして要素をクリックします。クリックする前に ↑ を押すと、その親要素を選択できます。あとはベーシックで変更するか、コードで CSS を書きます。変更はその場で保存され、サイトを開くたびに読み込まれます。
- フォント
- 400 種類の Google Fonts から検索でき、選んだフォントは Stylebot が読み込みます。パソコンにインストール済みのフォント名を入力することもできます。
- エディタの位置
- Chrome と Edge では、エディタはサイドパネルで開きます。⋯ メニューの位置から、別ウィンドウで開いたり、ページ内に固定したりできます。Firefox にはサイドパネルがありません。
- スタイルをオフにする
- ポップアップのスイッチか、alt+shift+S を使います。スタイルは削除されず、適用されなくなるだけです。
プロファイル
プロファイルは同じサイト用の別のスタイルシートで、複数のデザインを保存して切り替えられます。一度に適用されるのは 1 つだけで、どのサイトも最初は「デフォルト」から始まります。
エディタのヘッダーで、サイト名の横にあるプロファイル名をクリックすると、プロファイルの作成、名前の変更、複製、削除ができます。切り替えはそこかポップアップで行います。ポップアップでスタイルなしを選ぶと、そのサイトのスタイリングがオフになります。新しいプロファイルは空の状態から始まります。
コマンドライン
stylebot コマンドを使うと、Claude Code、Codex、Cursor などのコーディングエージェントが、API キーではなくご自身のサブスクリプションで、ブラウザ上のサイトのスタイルを直接変更できます。エージェントにサイトのスタイルを任せるなら、これが最適な方法です。コマンドを自分で実行することもできます。
- 設定
- CLI をインストールしてブラウザに接続し、オプションでこのパソコンのアプリに Stylebot の操作を許可をオンにします。各手順はコマンドラインのページで説明しています。現在は Chrome と Edge のみに対応しています。
- Claude Code
- Stylebot プラグインを追加し、
/stylebotで変更を頼みます（サイトをダークテーマにする、など）。 - プライバシー
- コマンドラインからのアクセスは、オンにするまでオフです。Stylebot と CLI はこのパソコン上で互いにやり取りするだけです。エージェントは読み取った内容を自身のプロバイダーに送信します。
チャット
チャットはちょっとした修正に最適です。チャットタブで望む変更を伝えると、Stylebot が CSS を書きます。要素を選んで対象を示したり、スクリーンショットを添付して意図を伝えたりもできます。テーマを丸ごと作るような大きな変更には、コマンドラインを使いましょう。
- 自分の API キーを使う
- Claude、OpenAI、Gemini の API キーを接続します。キーはこのパソコンにのみ保存され、同期されません。メッセージはブラウザからプロバイダーに直接送信されます。
- 変更の保存先
- 変更はすぐに適用され、現在のプロファイルのスタイルシートに追加されます。N 行を追加をクリックするとコードで確認でき、チャットから元に戻すこともできます。
- 料金
- メッセージ欄の下のトークン数に、この会話での使用量と料金の目安が表示されます。
リーダーモードとグレースケール
どちらもプリセットタブにあり、自分で加えた変更と組み合わせられます。リーダーモードはサイトの記事をすっきり読みやすい表示に切り替え、テーマ、フォント、サイズ、幅を選べます。記事以外のページはそのままです。グレースケールはサイトから色を取り除き、強さも自由に調整できます。
同期、バックアップ、履歴
- Google Drive 同期
- オプションで Google Drive に接続します。プロファイルを含むスタイルが、30 分ごとと編集した直後に同期されます。Stylebot が見られるのは Drive 内で自分が作成したファイルだけで、Stylebot のサーバーはありません。
- 競合
- 2 台のパソコンで同じスタイルが変更された場合は新しい編集が残り、もう一方のバージョンはコメントとして保存されるので、何も失われません。
- バックアップ
- オプションから、すべてのスタイルを JSON でエクスポート、インポートできます。
- バージョン履歴
- このパソコンでの変更は、同期で届いたものも含めてすべてオプションに保存されます。一部のサイトでもすべてのサイトでも、以前のどのバージョンにも戻せます。
URL ルール
Stylebot は通常、ドメイン名でスタイルとサイトを対応させます。より細かく指定したい場合は、オプションでスタイルの URL を編集し、次のパターンを使います。
**任意の文字列に一致します。*/ が現れるまでの任意の文字列に一致します。,複数のパターンを区切ります。いずれかのパターンに一致すれば、その URL は一致します。^URL の先頭に付けると、正規表現として扱われます。例
docs.google.com- docs.google.com ドメインと、そのすべてのサブドメイン。
docs**- docs で始まるすべての URL。
docs*.google.com- docs.google.com、docs1.google.com、docs2.google.com など。
*.ycombinator.com- news.ycombinator.com と apps.ycombinator.com。
docs.google.com, spreadsheets.google.com- どちらかのドメインと、そのすべてのサブドメイン。
^http://www.reddit.com/$- Reddit のトップページのみ。
*- すべてのサイト。どこにでも適用したいスタイルに便利です。
キーボードショートカット
グローバルショートカットは、Stylebot がスタイルを適用できるすべてのページで使えます。変更はブラウザのショートカット設定で行います（オプションからリンクしています）。エディタ独自のショートカットは、エディタで ? を押すと確認できます。
ヘルプとサポート
バグを見つけたときやアイデアがあるときは、GitHub で issue を作成してください。Stylebot は無料のオープンソースで、2011 年からメンテナンスを続けています。役に立ったら、コーヒーをおごって応援していただけるとうれしいです。