addons.mozilla.org

 

21 shares

172 users

Stylish

https://addons.mozilla.org/ja/firefox/addon/stylish/

ユーザースタイルのマネージャー Stylish で Web のスタイルを新しくする。

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

例えば、

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

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

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

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

@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;
  }
} 

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

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

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

userstyles.org

 

4 tweets

7920 shares

384 users

Restyle the web with Stylish! - userstyles.org

https://userstyles.org

Customize your favorite web sites with Stylish and user styles.

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

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

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

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

Tweet