読者です 読者をやめる 読者になる 読者になる

はぴらき合理化幻想

海外3年/西成ドヤ2年/沖縄2年/事故物件で寝袋3年目、ミニマリスト10年目でダンボール2箱の持ち物と保存食で大阪に定住中。

ユーザースタイルシートを編集できるChrome拡張機能stylebotの使い方

stylebotアイコン

Chrome拡張機能「Stylebot」の簡単な使い方をご紹介。閲覧しているウェブサイトにある不要な情報を非表示にしたり、記事本文の文字だけを大きくしたりと自分好みにカスタムできるよ。

インストール

Chromeで次の公式ページにアクセスすれば、すぐにインストールできる。

インストールが完了すればStylebotのアイコンがChrome内の右上に追加される。

Stylebot

使い方一例

不要な情報を非表示にする

一例として、Yahoo!天気・災害のオレンジ色の広告を非表示にする。

Yahoo!天気・災害

GIFアニメによるデモ画像でまずはイメージをつかんでほしい。原寸大画像はここをクリック(2.7MB)。

chrome拡張Stylebot使い方説明画像

Stylebot起動後、下図内黄色の枠で示す部分がグレーなら、クリックして青にしよう。

chrome拡張Stylebot使い方説明画像2

青になった。最初から青の場合もある。

chrome拡張Stylebot使い方説明画像3

マウスを動かすと、緑色の枠が移動する。非表示にしたい部分に枠を合わせてクリック。

chrome拡張Stylebot使い方説明画像4

Hideクリックで先ほど緑の枠で選択した部分が非表示になる。続けて別の部分を選択し、どんどん非表示にすることも可能。

chrome拡張Stylebot使い方説明画像5

Stylebotアイコン近くの☓でダイアログボックス自体を消せる。

chrome拡張Stylebot使い方説明画像6

記事本文の文字を大きく太くする

手順は上記と同じ。緑の枠で範囲を選択し、ダイアログボックスでスタイルを調整する。

chrome拡張Stylebot使い方説明画像7

記事本文の文字の大きさを25pxへと少し大きくした。

chrome拡張Stylebot使い方説明画像8

文字を太くした。

chrome拡張Stylebot使い方説明画像9

微調整したいなら、Edit CSSをクリックしてCSSを編集できる。

chrome拡張Stylebot使い方説明画像10

Edit CSSを開くと、先ほど加えた文字の大きさ調整と太さ調整が記述されているのを確認できる。

chrome拡張Stylebot使い方説明画像11

複数のサイトに同じ設定をするなら

「Global Stylesheet」にCSSコードを追加しておけば、ドメインが異なっても同じようにスタイルを適用できる。

次のページでは一例として、すべてのサイトのiframeをわかりやすくするコードを設定する具体例を載せている。

ユーザーCSSでiframeを簡単に判別!ウェブサイトの表示が遅い原因を特定しやすいよ - はぴらき合理化幻想

記事作成時の環境

  • OS:Windows8
  • Chrome 34

Chrome 32まで拡張機能なしでユーザースタイルシートを使えたが、Chrome 33からこの機能が削除されていた。Chrome 34でも拡張機能なしではユーザースタイルシートを調整できない。

まとめ

広告の非表示や文字の大きさ以外にもいろいろカスタムできる。CSSに慣れていなくてもビジュアルで調整できるのでぜひ活用してほしい。おすすめ。

てすとてすと