Home / Diary / Stylishで快適にユーザースタイルシートを書くための覚書

Stylishで快適にユーザースタイルシートを書くための覚書

偏執的な書き方はともかく、Stylishを使って記述から投稿までを解説したようなサイトは見たことがないので、こちらも覚書として自分の手法を紹介する。

なお、ここから先は偏執的ではない。

Stylish専用プロファイルの作成

Firefoxに導入する拡張を絞り、広告ブロック等も行わないようにすることでwebページへの影響を最小限に抑える。これにより素のwebページを弄ることができるようになるので、ユーザースタイルシートを導入した際の他ユーザーとの差異を小さくすることができる。

別プロファイルを起動できるようにする。

複数の Firefox を同時起動するを参考に、

C:\Firefox\firefox.exe -no-remote -P "Stylish"

このような感じでショートカットを作成。初回はプロファイル編集ダイアログが表れるので新規プロファイルを作成する。間違っても通常使うプロファイルに設定してはいけない。

右クリックメニューからStylish専用プロファイルを起動する

このままでは、「ユーザースタイルシートを作成したいページのURLをコピー⇒専用プロファイル起動⇒URLをペースト⇒開く」といった手順が必要になるので、簡略化するべくJSActionsを利用して、右クリックから起動できるようにする。

JSActionsの導入については三軒隣の斜め向かい:JavaScript Actionsにて詳しく説明されているので、参考にすると良い。

無事にフォルダの設定まで完了したのなら、以下のスクリプトを「Stylish専用プロファイルで開く.js」とでも名前をつけてscript_set/globalに保存する。

// 現在のページまたはリンク先をStylish専用プロファイルで開く
jsa_execStylishProfile( );
function jsa_execStylishProfile(){
    // Firefoxのパス
    var fxpath = "D:\\Firefox\\firefox.exe";
    // プロファイル名
    var prof = "Stylish"

    var docURL = ( _jsaCScript.context.onLink )
                ? _jsaCScript.context.link.href
                : window.location;

    _jsaCScript.exec( fxpath, ' -no-remote -P ' + prof + ' ' + docURL );
}

Firefoxを再起動後、適当なページで右クリックメニューから「Actions/Stylish専用プロファイルで開く」と選択すれば、見事に専用プロファイルが起動するようになる。

好みのテキストエディタでスタイルを書く

StylishのスタイルシートエディタはFirefox標準のtextareaなので非常に使いづらい。そこでuserChrome.jsを利用して、好みのテキストエディタで編集できるようにする。導入についてはuserChrome.js - Mozilla Firefox まとめサイトを参照してほしい。

userChrome.jsを導入したら、次にuserChrome.jsの話題8 Stylishのエディットウインドウに外部エディタ起動ボタンを追加する(改1)を参考にstylish0.5_edit.uc.jsをchromeフォルダに保存する。

うまくいけば、StylishのスタイルエディタにEditerというボタンが表れるので、これを押すことで外部エディタが起動するようになる。

webページをキャプチャする

実際に作成したユーザースタイルシートをuserstyles.orgに投稿する場合、スクリーンショットがあると導入の指針になるので、可能なら作成していく。

webページのキャプチャにはFirefoxの拡張の一つ、Screengrab!を利用する。

Screengrab!を導入すると、ステータスバーのアイコンからwebページのキャプチャが行えるようになる。saveは画像ファイルとして保存、copyはクリップボードに格納する。それぞれのサブメニューは以下のとおり。

Complete Page/Frame…: スクロール領域も含めた、ページの全てをキャプチャする
Visible Portion…: 現在表示している部分のみをキャプチャする
Selection…: 選択した部分をキャプチャする

チートシートを用意する

CSS3 セレクタチートシート

CSS3のセレクタは強力なものが多く、その幾つかはFirefox2.xでも利用可能。こちらのチートシートにはFirefoxだけでなくOperaの対応状況も載っているので、両ブラウザで使えるユーザースタイルシートを作成する際にそばに置いておくと重宝する。

その他拡張機能の導入

Firebug: 消したい要素をクリック一つで判別できるだけでなく、CSSがどのように適用されているかも知ることができる。Stylishとの相性はグンバツ。神拡張。
Web Developer: 必須というわけでは無いが、機能の一つにウインドウを指定サイズでリサイズできるというものがあるので。他で代用できるなら入れる必要はあまり無い。

その他、webページに影響を与えない拡張なら必要最小限に抑えて導入していく。