ウェブサイトに独自のスタイルを設定できるブラウザー拡張機能

Stylebot のアイコン

Stylebot

  • 海外
  • 日本語○
  • 寄付歓迎

ダウンロード支援

バージョン:
3.1.3(2022/07/24)
価格:
無料

ウェブサイトの不要部分を非表示にしたり、見やすいように背景色やテキスト色を変更したりなど独自のスタイルを設定できる Chrome/Firefox/Microsoft Edge 対応のブラウザー拡張機能です。
ユーザースタイルシートを利用することでブラウザーに独自のスタイルシートを適用することは可能ですが、本拡張機能を利用すればプルダウンやボタンから簡単に好みの外観に変更することが可能です。
CSS の編集もサポートしているため、CSS の知識があればより細やかなカスタマイズを実現できます。

提供元:

Stylebot の使い方

ダウンロード

Chrome 拡張機能

ChromeChrome ウェブストアへアクセスし、「Chrome に追加」ボタンをクリックしてインストールします。

Firefox アドオン

FirefoxFirefox add-ons へアクセスし、「Firefox へ追加」ボタンをクリックしてインストールします。

Microsoft Edge アドオン

Microsoft EdgeMicrosoft Edge アドオン へアクセスし、「インストール」ボタンをクリックしてインストールします。

使い方

基本的な使い方

Wikipedia のヘッダーを非表示にする
ここでは例として Wikipedia のヘッダー(上部のウィキペディアロゴの部分)を非表示にしていきます。

  1. 拡張機能アイコン icon をクリックして表示されるメニューから「Stylebot を開く」をクリックします。
    Stylebot メニュー

    Stylebot メニュー

  2. 画面右に Stylebot が表示され、ウェブページ側でマウスカーソルを動かすとセレクター(CSS が適用される、クラス、ID などの要素)を選択できるようになります。
    ヘッダー部分をカバーできる場所にマウスカーソルを持っていき、クリックします。
    マウスカーソルを乗せてヘッダー部分のセレクター(要素)を選択

    マウスカーソルを乗せてヘッダー部分のセレクター(要素)を選択

  3. クリックしたセレクターに対して画面右の Stylebot タブから編集が可能です。
    ここではヘッダー部分を非表示にしたいので右下の「隠す」をクリックします。
    「レイアウト」下にある「隠す」ボタンをクリックしてヘッダーを非表示に

    「レイアウト」下にある「隠す」ボタンをクリックしてヘッダーを非表示に


Wikipedia のテキストを MS Pゴシックにする
ここでは例として、Windows 95/98/Me 時代に Windows 標準で利用された「MS Pゴシック」で表示されるようにします。
※ Windows でのみ表示されます。

  1. 画面右の Stylebot の「フォント」右の「デフォルト」をクリックするとフォントを選択できます。
    「MS Pゴシック」はデフォルトではリストに含まれていないので「フォントリストの編集」をクリックします。
    フォントのプルダウンから「フォントリストの編集」をクリック

    フォントのプルダウンから「フォントリストの編集」をクリック

  2. オプション画面が表示されます。
    フォント項目下のテキストボックス末尾に「,MS Pゴシック」を追加します。
    ※ MS Pゴシックの「MS P」の英字を全角文字で入力しないと反映されません。
    オプション画面「基本設定」の「フォント」項目に「MS Pゴシック」を追加

    オプション画面「基本設定」の「フォント」項目に「MS Pゴシック」を追加

  3. Wikipedia のページへ戻り、F5 キーを押すなどしてページをリロード(再読み込み)します。
  4. Stylebot 左上のアイコンが icon になっていない場合は icon をクリックして icon にしてセレクター選択モードにします。
  5. Wikipedia のページの一番上あたりをクリックして選択します。
    マウスカーソルを乗せてウェブページのほとんどのテキストが対象になりそうなセレクター(要素)を選択

    マウスカーソルを乗せてウェブページのほとんどのテキストが対象になりそうなセレクター(要素)を選択

  6. Stylebot の「フォント」右のプルダウンをクリックして「MS Pゴシック」をクリックすると、MS Pゴシック のフォントが適用されます。
    「フォント」項目の「MS Pゴシック」を選択するとフォントが変更される

    「フォント」項目の「MS Pゴシック」を選択するとフォントが変更される


Wikipedia の背景とテキスト色を変更する
画面右の Stylebot の「色」項目内、「文字色:または「背景色」右の色のついた四角形をクリックしてパレットから色を選択するか、テキストボックスに HTML カラーコードを入力して色を指定して変更できます。
文字色、背景色の変更

文字色、背景色の変更



CSS を編集する
  1. 画面右の Stylebot 下にある「コード」タブをクリックして CSS を編集できます。
    現在までに指定した操作が CSS コードとして表示されます。
    ※ まだ何も操作していない場合は空白で表示されます。
    Stylebot 画面下部の「コード」タブから追加されているコードを表示

    Stylebot 画面下部の「コード」タブから追加されているコードを表示

  2. CSS を直接編集してスタイルを指定することが可能です。
    CSS を手書きで編集しても反映される

    CSS を手書きで編集しても反映される


Stylebot の有効/無効を切り替える
拡張機能アイコン icon をクリックして表示されるメニューから「ja.wikipedia.org」項目の トグル・オン をクリックして トグル・オフ にすると、そのウェブサイトでの Stylebot の設定は無効になり元の表示になります。
※ Wikipedia の場合。
※ 再び トグル・オン にすると Stylebot の設定が適用されます。
表示中のウェブサイトの Stylebot 設定の有効/無効を切り替え

表示中のウェブサイトの Stylebot 設定の有効/無効を切り替え



Stylebot のスタイル設定を削除する
Stylebot に設定したスタイルを削除したい、リセットしたい場合は、拡張機能アイコン icon の右クリックメニュー「オプション」から表示されるオプション画面にて、画面左の「スタイル」をクリックして表示されるスタイル画面から削除したいドメイン(ウェブサイト)の設定を「削除する」ボタンをクリックして個別に削除するか、右上の「すべて削除する」ボタンをクリックしてすべての設定を削除できます。
オプション - スタイル画面から Stylebot の設定を削除できる

オプション - スタイル画面から Stylebot の設定を削除できる



更新履歴 - Firefox

機械翻訳で日本語にしています。
Version 3.1.3
(2022/07/24)
  • 日本語翻訳の改善
  • インポートファイルの種類を json に制限
  • stylebot を初めて開いたページでページレイアウトが正しく調整されない不具合を修正
  • フォントピッカーを修正し、読みやすさを向上
  • ワイルドカードの使用に関するバグを修正
  • ポルトガル語のロケール設定を拡張機能でサポートされるロケールコードと一致するように修正

Version 3.1.2
(2022/07/13)
  • オプションページでカスタムフォントの追加を可能に
  • ドメインマッチングロジックの不具合修正と改善
  • オプションページのスタイルエディタを修正
  • ポルトガル語の翻訳を追加
  • 翻訳の修正。

Version 3.1.1
(2021/09/01)
  • stylebot エディターのサイズ変更機能を追加
  • Google Drive を使用したスタイルの同期とバックアップ機能を追加
  • stylebot を開いたときにページの幅を縮小する機能を追加
  • カラーパレットを追加し、色の選択を容易に
  • バグ修正
  • ヘルプページを追加 - https://stylebot.dev/help

※ 本ソフトは ssk 様 のご推薦により掲載させていただきました。(掲載日:2023年02月09日)

ユーザーレビュー

  • コメント

    Edgeにインストールしてみましたが、一部サイトでは「Styleb…

    御神楽
    御神楽
    投稿数: 6件
    Windows 11

    Edgeにインストールしてみましたが、一部サイトでは「Stylebot を開く」を押しても開かないようになっているようです。ショートカットの方を試してみましたがこちらもダメです。
    現在のEdgeのバージョンはバージョン 116.0.1938.54 です。

    1人が参考になったと回答しています。
    このレビューは参考になりましたか?
  • コメント

    基本的にとても見やすく、使いやすかったとおもう

    0825
    0825
    投稿数: 1件
    -

    【良かった点】
    基本的にとても見やすく、使いやすかったとおもう。

    このレビューは参考になりましたか?
  • 5

    簡単にwebページの見た目を変更できます

    ssk
    ssk
    投稿数: 49件
    Windows 10

    簡単にwebページの見た目を変更できます。

    正しいスタイルが設定できてあれば、即反映されます。間違っていれば削除すればいいのです。

    Yahoo!メールの広告を非表示にするのに、お金は要りません。難しい知識は殆ど要りません。「シンプルかつ強力で簡単」この拡張機能のを使い勝手を皆さんに知ってほしいです。

    カスタマイズ例、ご参考になれば幸いです。

    Yahoo!メールの右側広告枠を削除する方法[firefoxを使用] ※本文下広告、メールリスト上広告も削除

    1.右側広告枠を右クリックして、アクセシビリティプロパティを調査をクリック
    2.SECTIONの先頭を右クリックして、JSONを出力
    3.nodeCssSelectorの先頭の右側の値をコピー ".sc-1xxziom-0"
    4.以下のように整形します。( !important; は付けなくても動作します。)

    .sc-1xxziom-0 {
    display:none !important;
    }

    #tagYadsDetail,
    tagYadsDetail {
    display:none !important;
    }

    .sc-1b9tt3g-11 {
    display:none !important;
    }

    5人が参考になったと回答しています。
    このレビューは参考になりましたか?

Stylebot に投稿されたすべての評価・評判・レビューを見る(全 5 件)