Top Google Chrome >閲覧しているページのCSSをリアルタイムに編集して状態を維持できるGoogle Chromeエクステンション「Stylebot」
2010年10月07日

閲覧しているページのCSSをリアルタイムに編集して状態を維持できるGoogle Chromeエクステンション「Stylebot」

ウェブページは、管理者の好み、使い勝手、企業イメージなどにより、様々なスタイルで表示されるようになっています。

しかし、ユーザーは各サイトのスタイル全てを受け入れているわけではなく、中には文字が小さい、目がチカチカする、行間が狭いなど、様々な不満要素があるものです。

こうしたスタイルは基本的に管理者側で決定するものですので、不満だからと言ってどうすることもできないのが普通ですが、お気に入りのサイトのあの部分を修正できれば・・という気持ちになったことは誰しもあるはずです。

そんな風に考えたことがあるGoogle Chromeユーザーなら、「Stylebot」という拡張機能を使うことでこうしたサイトをもっと閲覧しやすくすることができます。

「Stylebot」は、表示しているサイトのスタイルをユーザー側で変更し、変更後は常にそのスタイルで表示することができるようになるという拡張機能です。





拡張をインストール後、CSSを用いたサイトを表示すると、オムニバー右側に[css]と書かれたボタンが表示されるようになります。


01_Stylebot_Google Chrome Extension.JPG


このボタンをクリックするとそのページのCSSを編集するためのパネルが右サイドに現れるようになっています。

*パネル上段の[<]をクリックすればパネルを左サイドに表示することができます。

パネル内は以下のように細かなセクションにわかれており、フォントやライン、行間、背景などを好みのスタイルに変更することができます。

数値や設定を変更するとリアルタイムでそのページのスタイルも変化しますので、CSSがよくわからない方でも非常に簡単にスタイルの編集を行うことができます。


■テキスト/背景色など


02_Stylebot_Google Chrome Extension.JPG


■ボーダー


03_Stylebot_Google Chrome Extension.JPG


■レイアウト


04_Stylebot_Google Chrome Extension.JPG


下部のメニューボタンでは、[Basic][Advanced]モードの切り替えができるほか、エディタライクにCSSを編集できる[Edit CSS]の起動、[元に戻す][リセット][ページリセット]などの操作が可能です。


05_Stylebot_Google Chrome Extension.JPG


■Edit CSS


07_Stylebot_Google Chrome Extension.JPG


[Advanced]モードに変更した場合は、パネル内でエディタを使うようにCSSの記述・編集ができるようになるほか、最上段左のボタンをクリックすれば、ページ内で選択した要素のCSSを編集することが可能です。


06_Stylebot_Google Chrome Extension.JPG


こうして好みのスタイルに編集し終わりパネルを閉じれば、そのサイトは今後あなたが設定したスタイルで開くようになります。

オプション画面では以下のような設定が可能です。


08_Stylebot_Google Chrome Extension.JPG


○ショートカットでパネルを開く
○ショートカットキー
○起動時のモード
○カスタムスタイル一覧

編集して保存されたサイトはこのリストに追加されていきます。

サイトごとの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」


posted by moziller at 20:03 | Comment(0) | TrackBack(0) | Google Chrome



この記事をはてなブックマークに登録 follow us in feedly このエントリを del.icio.us に登録 この記事をクリップ!Yahoo!ブックマークに登録
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック





×

この広告は180日以上新しい記事の投稿がないブログに表示されております。