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