しかし、ユーザーは各サイトのスタイル全てを受け入れているわけではなく、中には文字が小さい、目がチカチカする、行間が狭いなど、様々な不満要素があるものです。
こうしたスタイルは基本的に管理者側で決定するものですので、不満だからと言ってどうすることもできないのが普通ですが、お気に入りのサイトのあの部分を修正できれば・・という気持ちになったことは誰しもあるはずです。
そんな風に考えたことがあるGoogle Chromeユーザーなら、「Stylebot」という拡張機能を使うことでこうしたサイトをもっと閲覧しやすくすることができます。
「Stylebot」は、表示しているサイトのスタイルをユーザー側で変更し、変更後は常にそのスタイルで表示することができるようになるという拡張機能です。
拡張をインストール後、CSSを用いたサイトを表示すると、オムニバー右側に[css]と書かれたボタンが表示されるようになります。
このボタンをクリックするとそのページのCSSを編集するためのパネルが右サイドに現れるようになっています。
*パネル上段の[<]をクリックすればパネルを左サイドに表示することができます。
パネル内は以下のように細かなセクションにわかれており、フォントやライン、行間、背景などを好みのスタイルに変更することができます。
数値や設定を変更するとリアルタイムでそのページのスタイルも変化しますので、CSSがよくわからない方でも非常に簡単にスタイルの編集を行うことができます。
■テキスト/背景色など
■ボーダー
■レイアウト
下部のメニューボタンでは、[Basic][Advanced]モードの切り替えができるほか、エディタライクにCSSを編集できる[Edit CSS]の起動、[元に戻す][リセット][ページリセット]などの操作が可能です。
■Edit CSS
[Advanced]モードに変更した場合は、パネル内でエディタを使うようにCSSの記述・編集ができるようになるほか、最上段左のボタンをクリックすれば、ページ内で選択した要素のCSSを編集することが可能です。
こうして好みのスタイルに編集し終わりパネルを閉じれば、そのサイトは今後あなたが設定したスタイルで開くようになります。
オプション画面では以下のような設定が可能です。
○ショートカットでパネルを開く
○ショートカットキー
○起動時のモード
○カスタムスタイル一覧
編集して保存されたサイトはこのリストに追加されていきます。
サイトごとのCSS編集が必要なら[edit]をクリックして専用ウィンドウで編集作業を、カスタムCSSの適用をやめてそのサイトを元の通りに表示したいのなら[remove]をクリックすればリストから消去されます。
○バックアップ
編集内容などをインポート・エクスポートできます。
○Sync
Google Chromeの同期機能を利用している場合、この拡張で編集した内容も同期されるようになり、他のPCのGoogle Chromeでもあなた好みのスタイルで各サイトを表示できるようになります。
CSS触ることができるツールはGoogle ChromeにもFirefoxにもたくさんありますが、「Stylebot」はこのように視覚的にわかりやすく編集できる上、その編集内容をキープして個人の好みで各サイトを表示できるというのが特徴です。
気に入ってるけど見にくいサイトって割とあるものですが、そうしたサイトを手早く編集してやれば、ブラウジングがもっと楽しくなるかもしれませんね。
ダウンロード：Stylebot（chrome.google.com/extensions）
＜関連記事＞
■サイトをプレビューしながらサイドバーでスタイルシートを編集できる「EditCSS」
■Web制作者のための便利なFirefoxアドオン「Web Developer」
■Firefoxに"Dreamweaver"ライクなHTMLエディタをビルトインするアドオン「Codetch」
■表示ページを自由自在に編集してソースを取得できるFirefoxアドオン「Edit Page」
ツイート
