ウェブサイトに独自のスタイルを設定できるブラウザー拡張機能
- 海外
- 日本語○
- 寄付歓迎
ウェブサイトの不要部分を非表示にしたり、見やすいように背景色やテキスト色を変更したりなど独自のスタイルを設定できる Chrome/Firefox/Microsoft Edge 対応のブラウザー拡張機能です。
ユーザースタイルシートを利用することでブラウザーに独自のスタイルシートを適用することは可能ですが、本拡張機能を利用すればプルダウンやボタンから簡単に好みの外観に変更することが可能です。
CSS の編集もサポートしているため、CSS の知識があればより細やかなカスタマイズを実現できます。
- 提供元：
- Ankit Ahuja
Stylebot の使い方
ダウンロード
Chrome 拡張機能
Chrome で Chrome ウェブストアへアクセスし、「Chrome に追加」ボタンをクリックしてインストールします。Firefox アドオン
Firefox で Firefox add-ons へアクセスし、「Firefox へ追加」ボタンをクリックしてインストールします。Microsoft Edge アドオン
Microsoft Edge で Microsoft Edge アドオン へアクセスし、「インストール」ボタンをクリックしてインストールします。使い方
基本的な使い方
Wikipedia のヘッダーを非表示にする
ここでは例として Wikipedia のヘッダー（上部のウィキペディアロゴの部分）を非表示にしていきます。- 拡張機能アイコン
Stylebot メニュー
- 画面右に Stylebot が表示され、ウェブページ側でマウスカーソルを動かすとセレクター（CSS が適用される、クラス、ID などの要素）を選択できるようになります。
ヘッダー部分をカバーできる場所にマウスカーソルを持っていき、クリックします。
マウスカーソルを乗せてヘッダー部分のセレクター（要素）を選択
- クリックしたセレクターに対して画面右の Stylebot タブから編集が可能です。
ここではヘッダー部分を非表示にしたいので右下の「隠す」をクリックします。
「レイアウト」下にある「隠す」ボタンをクリックしてヘッダーを非表示に
Wikipedia のテキストを ＭＳ Ｐゴシックにする
ここでは例として、Windows 95/98/Me 時代に Windows 標準で利用された「ＭＳ Ｐゴシック」で表示されるようにします。- 画面右の Stylebot の「フォント」右の「デフォルト」をクリックするとフォントを選択できます。
「MS Pゴシック」はデフォルトではリストに含まれていないので「フォントリストの編集」をクリックします。
フォントのプルダウンから「フォントリストの編集」をクリック
- オプション画面が表示されます。
フォント項目下のテキストボックス末尾に「,ＭＳ Ｐゴシック」を追加します。
※ ＭＳ Ｐゴシックの「MS P」の英字を全角文字で入力しないと反映されません。
オプション画面「基本設定」の「フォント」項目に「ＭＳ Ｐゴシック」を追加
- Wikipedia のページへ戻り、F5 キーを押すなどしてページをリロード（再読み込み）します。
- Stylebot 左上のアイコンが
- Wikipedia のページの一番上あたりをクリックして選択します。
マウスカーソルを乗せてウェブページのほとんどのテキストが対象になりそうなセレクター（要素）を選択
- Stylebot の「フォント」右のプルダウンをクリックして「ＭＳ Ｐゴシック」をクリックすると、ＭＳ Ｐゴシック のフォントが適用されます。
「フォント」項目の「ＭＳ Ｐゴシック」を選択するとフォントが変更される
Wikipedia の背景とテキスト色を変更する
画面右の Stylebot の「色」項目内、「文字色：または「背景色」右の色のついた四角形をクリックしてパレットから色を選択するか、テキストボックスに HTML カラーコードを入力して色を指定して変更できます。
文字色、背景色の変更
CSS を編集する
- 画面右の Stylebot 下にある「コード」タブをクリックして CSS を編集できます。
現在までに指定した操作が CSS コードとして表示されます。
※ まだ何も操作していない場合は空白で表示されます。
Stylebot 画面下部の「コード」タブから追加されているコードを表示
- CSS を直接編集してスタイルを指定することが可能です。
CSS を手書きで編集しても反映される
Stylebot の有効／無効を切り替える
拡張機能アイコン
※ 再び
表示中のウェブサイトの Stylebot 設定の有効/無効を切り替え
Stylebot のスタイル設定を削除する
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
ユーザーレビュー
-
コメント
Edgeにインストールしてみましたが、一部サイトでは「Styleb…
6件Windows 11Edgeにインストールしてみましたが、一部サイトでは「Stylebot を開く」を押しても開かないようになっているようです。ショートカットの方を試してみましたがこちらもダメです。
現在のEdgeのバージョンはバージョン 116.0.1938.54 です。1人が参考になったと回答しています。このレビューは参考になりましたか？
-
コメント
基本的にとても見やすく、使いやすかったとおもう
【良かった点】
基本的にとても見やすく、使いやすかったとおもう。このレビューは参考になりましたか？
-
簡単にwebページの見た目を変更できます
簡単に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;
}
7人が参考になったと回答しています。このレビューは参考になりましたか？
