StylishというFireFoxアドオンが優れている

2015年7月7日 0 投稿者: rokujo

ユーザーが設定したCSSを閲覧ページに合わせて自動的に変更してくれるアドオンです。ドメインやページ単位での自動切り替えも可能です。

例えば、

http://tanakanews.com/150618tpp.htm

これをフルHDのディスプレイで表示すると

f:id:happyholiday:20150707131039p:plain

こんな風に横長になって超絶見づらいです。

Stylishを使うと自分でCSSを設定し、好みの表示に変えることができます。インストールした後、右上に表示される「S」のマークをクリックし、ドメインやページ単位でCSSを設定します。

f:id:happyholiday:20150707131540p:plain

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain(“tanakanews.com”) {
  body{
    max-width: 800px;
    margin: 0 auto;  
    font-family: “ヒラギノ角ゴ Pro W3″,”Hiragino Kaku Gothic Pro”,”游ゴシック”,YuGothic,”メイリオ”,Meiryo,sans-serif;
    font-weight: 200;
  }
  p{
     line-height: 1.8;
     word-wrap: break-word;
  }

 例えばこんな感じにします。横幅を制限し、フォントを変え行間も空けます。するとこうなりました。

f:id:happyholiday:20150707131647p:plain

実に読みやすくなりました!なおCSSに設定がないのにデフォルトの背景が肌色なのは、FireFoxの背景色変更機能を使っているからです。オプション→コンテンツ→配色設定の「背景」から色を変えられます。白だと目が痛いのです。

さまざまなユーザーが作ったスタイルを適用することもできます。

例えばYoutubeやgoogleをこんな風に。

https://df6a.https.cdn.softlayer.net/80DF6A/static.userstyles.org/style_screenshot_thumbnails/46081_after.jpeg?r=1436227547

uTube NightBlue 2K15 by a3cAnton – Themes and Skins for Youtube – userstyles.org

https://df6a.https.cdn.softlayer.net/80DF6A/static.userstyles.org/style_screenshot_thumbnails/96109_after.jpeg?r=1436227547

Google Search Home Page Background – Themes and Skins for Google – userstyles.org

CSSはできることが多くていいですよね。