【Stylebot】サイトにCSSを適用できるChrome拡張機能の使い方
この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」について書きます。
CSSを学びたくなる、そんなChrome拡張機能です。Firefoxアドオンも用意されています。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能です。サイトのドメインごとに、CSSを作成できます。適用したいサイトを開いて、Stylebotをクリック→CSSを書き込むだけで保存されます。
ブラウザ開発者ツールと同じように、セレクタを選択すると、自動でセレクタ名を書き出してくれる機能があります。僕みたいなCSS初心者でも、簡単にウェブサイトをカスタマイズできます。
あくまで、自分のパソコン上の変更なので、誰の迷惑にもなりません。CSSでできることは、非常に幅広いですが、簡単に言うとサイトのデザインをカスタマイズできます。
例えば、Twitterの背景色を自由に変更、フォント変更、プロモーションツイートを削除、DeepL翻訳の不要な項目を非表示にする…といったことができます。
サイトのドメインごとに設定できるため、「A」のサイトではこういうCSSにして、「B」のサイトではこんなカスタマイズにする！といった使い分けができます。
オンオフも簡単で、一時的にCSSを無効にしたい時はチェックを外すだけです。Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
CSS初心者から上級者まで、簡単に扱うことができます。「サイトのデザインを少しでも自分好みにしたい！」という方、ぜひ試してみてください。
Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
Stylebotは僕みたいなCSS初心者でも簡単に使える、便利な拡張機能です。ただし、いくら初心者でも利用できるとはいえ、CSS完全未経験者にはハードルが高いです。
「CSS？何のこっちゃ？」って方は、まずはCSSについて学ぶのがおすすめです。ある程度理解できるようになったら手を出してみましょう。
CSSは、サイトのデザインをカスタマイズできるコード（言語）です。
僕のサイトでも、CSSというコードが存在しています。そのおかげで、こうやって背景水色の吹き出しを表現できているわけです。
普通は、そのサイトの運営者しか弄れないようになっています。Stylebotを使うことで、そのパソコンだけで見た目を変更できます。誰にも迷惑をかけずに好き勝手できます。
「CSS 初心者」とかで検索したら、いくらでも情報が出てきます。今の時代、無料でいくらでも学べます。有料のスクールなどに入る必要は全くありません。
1か月くらい情報を漁って勉強すると、ある程度は学べるかなと思います。僕は、完全未経験でしたが、1か月ネットの情報を漁りまくって勉強しました。数百円お金払ってもいい！って方は、「Progate」などがおすすめです。
提供元：ankit（Twitterはこちら）
記事執筆時のバージョン：3.1（2021年5月9日）
インストール方法
Chromeウェブストアからインストールできます。
https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」でインストールできます。
右上に拡張機能ボタンが追加されればOKです。
Vivaldiブラウザを利用していて、サイドバーのウェブパネルにもCSSを適用したい場合は、「Stylus」がおすすめです。こちらは、ウェブパネル内にもCSSを適用できます。
使い方
本拡張機能を導入した状態で、CSSを適用したいウェブサイトを開きます。Stylebotボタン→「Stylebotを開く」をクリックします。
編集画面が右側に表示されるので、ここからCSSを適用していきます。CSSを書き込む方法は、初心者向けの「ベーシック」、中級者向けの「コード」の2種類あります。
ベーシック
ベーシックはCSSの知識は不要で、直感的な操作でカスタマイズできる点が魅力的です。しかし、フォントのサイズや色を変更するといった基本的なことしかできないので、ある程度理解できたら「コード」をおすすめします。
CSSの基本であるセレクタを選択します。「どの部分を変更するか？」ということです。本拡張機能は、変更したい箇所をクリックするだけで、セレクタ名を自動で取得する便利な機能が搭載されています。
編集画面を開いて、左上の矢印ボタンをクリックします。
セレクタ選択モードになるので、変更したい場所をクリックします。試しに、当サイトのタイトルをカスタマイズしてみます。
編集画面の検索欄に、自動で「h1 a span」というセレクタが追加されます。これでサイトタイトルをカスタマイズできるようになりました。
フォント、サイズ、行の高さ、下線や取り消し線などの文字装飾、文字色と背景色の変更など、簡単なカスタマイズができます。変更したい項目をクリックして選択するだけです。
文字色を青、背景色を灰色、文字装飾を下線にしてみました。
書き込んだCSSは自動で保存されるので、次回以降、ナポリタン寿司のPC日記にアクセスすると、自動でサイトタイトルにスタイルが適用されます。サイト運営者側が大幅にデザインを変更しない限りは、ずっと使えます。
見ている自分だけの変更なので、他のパソコンで閲覧した時は通常通りのデザインです。誰の迷惑にもならないので、思いっきり自分が見やすいデザインに変更しちゃいましょう。
コード
Stylebot編集画面を開いて、下部にある「コード」をクリックすると自由にCSSを書けるモードになります。ベーシックと違って自分で好きなように書けるので自由度が高いです。
ベーシックと同じようにセレクト選択モードにして変更したい場所を選択します。コード部分に自動でセレクタが書かれるので、中にスタイルを書き込んでいきましょう。
試しに色々な部分を「display: none;」で非表示にしてみた動画を貼っておきます。
この方法を使うことで、広告ブロックアプリを導入しなくても、特定のサイトで広告を非表示にできます。Twitterの不要なサイドバーを消すといったこともできます。
Twitterカスタマイズ前
カスタマイズ後
サイドバーのおすすめユーザーとか「今どうしてる？」ブロックを全部非表示にして、タイムラインの横幅を広くしています。検索窓を右側から左側にすることで、右側は完全にスッキリさせています。最高です。
CSSの一時停止
CSSを変更したサイトにアクセスして、Stylebotボタンをクリックします。現在適用中のドメインが表示されます。左にあるオンオフボタンを切り替えることで一時停止できます。
オフにすると、瞬時にデザインが元通りになります。ページをリロードする必要はありません。デザインカスタマイズ前と後で見比べることができます。
編集画面を移動する
「サイトの右側をカスタマイズしたいのに、Stylebotの編集画面が邪魔で見えない！」って時は、編集画面を移動してみましょう。編集画面の上にあるケバブメニュー（三点ボタン）をクリック→左に移動しますをクリックします。
編集画面が左に移動します。
ケバブメニュー横のボタンをクリックすると、サイズ変更モードになるので、編集画面の大きさを変更できます。分かりやすいように動画を貼っておきます。前半が編集画面を左右に移動する方法、後半がサイズ変更です。
設定
Stylebotボタンをクリック→オプションをクリックします。
基本設定
キーボードショートカットキーを設定できます。
なぜか僕の環境では動作しませんでした。
「右クリックメニューを有効にする」をオンにすると、ページ上の右クリックでStylebotメニューが表示されます。スタイル（編集画面）とオプションにアクセスできます。
スタイル
ドメインごとに設定したCSSの確認・編集・削除ができます。まとめて一気にCSSを書きたい場合は、ここで作業しましょう。サイトを確認しながらはできませんが、編集画面を最大限広く使えます。
僕みたいな初心者は編集画面小さくてもいいから、サイトの変化具合を見ながら作業できるほうが好きです。
「新しいスタイルを追加」をクリックすると、編集画面が表示されます。「Enter URL」に新たなドメイン（URL)を追加して、CSSを書き込んでいきます。僕の環境だと表示崩れが発生していて少し見にくかったです。
ここからCSSのオンオフもできます。オフにする場合は、該当のサイトのチェックを外します。
バックアップ
Googleドライブか、JSONファイルとしてバックアップできます。
僕はJSONファイルをよく知らないので利用していません。「バックアップしたいけどよく分からん！」って人は、ふつーにCSSをメモ帳かどっかに丸々コピペするのがいいかなぁと思います。
感想
以上、ウェブサイトを自由にCSSでカスタマイズできる拡張機能「Stylebot」についてでした。
CSSの楽しさを教えてくれる便利な拡張機能です。当サイトでは、専用のカテゴリーを作成しているので、気になった方は参考にしてみてください。色々CSSを紹介しています。
https://www.naporitansushi.com/category/browser/stylebot-sty...