[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)が理解できなければ設定もできないわけですが、自分でサイトを作ってるような方であれば、いろんなサイト/サービスが心地よく使えそうです^^

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