拡張機能「Stylebot」で各サイト別に独自CSSを適用する方法

Chrome活用

WebサイトのCSSを自分で編集することでサイト中の不要な要素を削除することや、要素の色やサイズを自分が見やすい・使いやすい設定に変更することが可能になります。

「カスタマイズしたいサイト名　カスタムCSS」で検索すると、他の人が既に作ってくれている便利なカスタムCSSがたくさんヒットするので、それを利用させてもらうこともできます。

このカスタムCSSをサイト別に保存し、いつでもON/OFFを切り替えられる拡張機能「Stylebot」について使い方を説明します。

1 Stylebot のインストール方法
2 独自CSSの追加・保存
3 独自CSSのON/OFF切り替え
4 独自CSSの例
5 Stylebotの他の機能

Stylebot のインストール方法

※以下、Chrome ブラウザでの手順例です。

ダウンロード

まず、以下のリンクからダウンロード先の拡張機能ストアに移動します。

Chrome 拡張機能「Stylebot」

Stylebotをダウンロード

※お使いのブラウザがFirefoxの場合はこちら↓
Firefox ADD-ONS: Stylebot

ストアに移動後、「Chromeに追加」ボタンを押して拡張機能をインストールします。

ダウンロードが完了すると、画面上部のツールバーにSマークの拡張機能ボタンが追加されます。

拡張機能ボタンの固定

ダウンロードした拡張機能がツールバーに表示されず隠れてしまったら、アドレスバーの隣にあるパズルピースアイコンをクリックして拡張機能一覧を表示させ、画鋲アイコンをクリックするとその拡張機能をツールバーに固定表示できるようになります。

Chromeで拡張機能をツールバーに固定表示する方法

独自CSSの追加・保存

あるサイトに、適用したいカスタムCSSを追加する方法です。

まず、拡張機能のボタンをクリックして「オプション…」をクリックします。

Stylebotに独自CSSを追加する方法：オプション画面への移動

設定画面が開くので、左のメニューから「スタイル」を選び、「新しいスタイルを追加…」ボタンを押します。

Stylebotに独自CSSを追加する方法：スタイル画面から新しいスタイルを追加

CSS入力画面が現れます。

「Enter URL...」のところにCSSを適用したいページのURLを入力し、下の大きな入力スペースにCSSを入力します。

Stylebotに独自CSSを追加する方法：独自CSS入力画面

自作のカスタムCSSを適用したいサイトorページのURL (※下画像の例では https://chat.openai.com) を入力し、CSSを入力しました。

Stylebotに独自CSSを追加する方法：独自CSSをエディタに入力して保存した

今回入力したCSSについて (クリックして表示)

ここで入力しているCSSはChatGPT のサイト画面で横メニューパネルの横幅を広げて、チャットのタイトル文字数を増やす自作CSSです。

デフォルトだと15~20文字以上のタイトルのチャットは途中までしかタイトルが見えず不便だったので、今回このCSSを作って適用させてみました。

#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.flex-shrink-0.overflow-x-hidden.dark.bg-gray-900{
width: 520px;
}
#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.flex-shrink-0.overflow-x-hidden.dark.bg-gray-900 > div.h-full{
width: 520px;
}

右下の「保存する」を押せば入力したCSSが保存されます。