[Firefox]人のサイトをカスタマイズできるプラグイン「Stylish」

以前、FirefoxでGmailを等幅フォントで表示するという記事を書いたのですが、このときは「userContents.css」というファイルに等幅フォントで表示させるためのCSSを追記しました。が、このたび、わざわざファイルを探さなくてもその場ですぐにスタイルシートを追加／反映させられるFirefoxのプラグインを見つけました。

それが「Stylish」というプラグイン。

これをFirefoxにインストールするとステータスバーにアイコンが表示され、そこからスタイルを追加することができます。Gmailの等幅表示であれば、Gmailを開いた状態で次の順に選択／入力していけばOK。

• 「スタイルを書く」を選択
• 「mail.google.com用」を選択
• @-moz-document domain(mail.google.com) {～}の間に次のように入力

div.mb,div.mb {
width:550px !important;
font-family: monospace !important;
font-size: 10pt !important;
}
textarea {
font-family: monospace !important;
font-size: 10pt !important;
}

• 保存ボタンをクリックし、Gmailを再読み込み

たったこれだけで等幅フォントで表示することが可能です。

＋＋＋＋＋

で、これ。どういうことかと言うと、Firefoxで閲覧している人様のサイトのCSSを、自分のお好みで変更できるということなんですね。

試しに、うかブログのスタイルを変更してみてください。うかブログを開いた状態で、

• 「スタイルを書く」を選択
• 「www.uka-blog.com用」を選択
• @-moz-document domain(www.uka-blog.com) {～}の間に次のように入力

#Header{display:none;}

• 保存ボタンをクリックし、うかブログを再読み込み

すると、ページ最上部のタイトル部分が非表示になるはずです。

こんな感じで、よく見る／使うけどちょっと不便だなーと思っていることがあるサイトのソースを見て、該当部分のセレクタを確認、それに対応したスタイルをStylishに登録してあげれば、自分の思うように人のサイトをカスタマイズすることができます。（もちろん、自分のFirefox上での表示の仕方をカスタマイズできるだけで、実際にサイトをいじれるわけではありません＾＾；）

当然のことながらスタイルシート（CSS）が理解できなければ設定もできないわけですが、自分でサイトを作ってるような方であれば、いろんなサイト／サービスが心地よく使えそうです＾＾

• Stylishプラグインのダウンロード

【注意】
もし、既にuserContent.cssで設定した内容がある場合、Stylishでの設定よりもuserContent.cssでの設定のほうが優先されるとのこと。Stylishに乗り換えたい！って場合は、内容をStylishに移した後、userContent.cssを削除（または別のフォルダに保存）する必要があります。