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

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

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

このカスタムCSSをサイト別に保存し、いつでもON/OFFを切り替えられる拡張機能「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が保存されます。

 

独自CSSのON/OFF切り替え

作成スタイル一覧画面にて

「スタイル」画面にて、作成したカスタムCSSの一覧が表示されます。

各カスタムCSSの隣にはチェックボックスがあり、ここにチェックを入れておけば該当URLのサイトにアクセスした時に自動でカスタムCSSが有効になります。

Stylebotで登録した独自CSSの一覧画面

 

普段使わないカスタムCSSがあってもいちいち削除する必要はなく、単にチェックを外しておくだけでOKです。(必要になったらチェックを入れる)

CSS適用先ページにて

カスタムCSS適用先のページで拡張機能のボタンを押すことで、その場で直接カスタムCSSのON/OFFを切り替えることもできます。

例えば先ほどの例では ChatGPT のサイトに適用されるCSSを作成したので、ChatGPTのサイトにアクセスしてみます。

そこで拡張機能のボタンをクリックするとメニュー先頭にCSSのON/OFFボタンが現れるので、これをONにすれば即座にカスタムCSSが適用されます。

Stylebotで登録した独自CSSのON/OFF切り替え方法

 

今回の例では、カスタムCSSが適用されてサイト左側のチャット一覧パネルの横幅が広がり、文字が途中までしか表示されない不便さが解消されました。

 

カスタムCSSが有効になっている状態では、現在有効なカスタムCSSの数が拡張機能アイコンの右下に表示されます。

 

独自CSSの例

※以下、便利な独自CSSを作成し次第追加する予定です。

ChatGPT

カスタムCSS

2024/6/20追記:ChatGPTサイト側のデザイン変更に合わせて本ページの方法も修正しました。 (画像は旧デザイン当時のものですが、CSSコードは新デザインに対応しています)   ChatGPT のサイト画面で[…]

他の方が作成した独自CSS

「カスタマイズしたいサイト名 カスタムCSS」や「カスタマイズしたいサイト名 独自CSS」などと検索することで、有志の作成した独自CSSを見つけることもできます。

↑例: YouTube で動画を表示させたままコメント欄だけスクロールできるカスタムCSS

公開されているCSSをコピーして、上記手順で登録すればすぐ使えるようになります。

 

Stylebotの 他の機能

リアルタイムCSS編集

Stylebot の拡張機能ボタンを押したときのメニューに「Stylebotを開く」という項目があります。

これを押すと画面右側にCSS入力パネルが現れ、ここに入力したCSSはリアルタイムで表示に反映されます。

(エディタは入力補完機能が付いています)

「Stylebotを開く」で表示されるCSS入力エディタ

 

パネル左上の矢印ボタンを押すと要素選択モードに入り、Webページ上の要素をクリックすることでその要素に対応するCSSセレクタが自動でCSSパネルに入力されます。

CSSの動作チェックに便利な機能です。

他端末との設定の同期

登録した独自CSSを他の端末と同期させることもできます。

Stylebot のオプション画面から「バックアップ」を選択すると「Google ドライブを介した手動同期」という項目があり、独自CSS設定を Google ドライブ経由で他ブラウザ・他端末と共有できます。

設定を終えると拡張機能のメニューに設定同期ボタンが追加され、ボタンを押すたびにGoogleドライブ経由でCSS設定が同期されます。

 

なお設定をファイルに手動エクスポートすることもできます。

記事化前の最新情報はこちらで先にツイートしています。サイト更新告知もこちら。