Firefoxのアドオン「Stylish」で快適ウェブ閲覧
先日、FirefoxのRSSリーダーアドオン「Brief」のCSSをカスタマイズして、取得した記事の文字色を強制的に黒で表示するようにした。
色使いの派手なブログはどうにも読みづらいので。
３色ブログの文字色を無効化（Firefoxのアドオン「Brief」をカスタマイズ）｜狂騒のパジェント
これだけでも随分快適になったのだが、ブラウザ自体でも黒で表示出来ないものかと調べてみたら、Firefoxには閲覧ページのCSSを強制指定する「Stylish」というアドオンがあった。
●多色ブログ対策
Stylishのサイトにあった「ブログの文字をメイリオ化」というスタイルシートをお借りして、以下のように文字色、画像サイズに関する項目を追加した。
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("ameblo.jp")
,domain("yaplog.jp")
,domain("hatena.ne.jp")
,domain("blog.livedoor.jp")
,domain("lomo.jp")
,domain("cocolog-nifty.com")
,domain("air-nifty.com")
,domain("blog.shinobi.jp")
,domain("blog.excite.co.jp")
,domain("blog.goo.ne.jp")
,domain("blogs.yahoo.co.jp")
,domain("jugem.jp")
,domain("jugem.cc")
,domain("plaza.rakuten.co.jp")
,domain("blog.animate.tv")
,domain("blog.ocn.ne.jp")
,domain("laff.jp")
,domain("blogspot.com")
,domain("exblog.jp")
/* -----除外ドメイン--------------------
,domain("seesaa.net")
,domain("fc2.com")
----------- */
{
*:not(input){
font-family:"メイリオ","Meiryo",sans-serif;
}
textarea{
width:100%!important;
overflow:auto!important;
}
/* -----フォントのサイズと色を固定------ */
* {
font-size: 13px !important;
color: #404040 !important;
}
a{
color: #003b73 !important;
}
a:visited {
color: #4b667e !important;
text-decoration: underline;
}
a:hover{
color: #003b73 !important;
text-decoration:underline !important;
color:#ba2636 !important;
}
/* -----文字移動・点滅無効------ */
marquee{
overflow:visible; -moz-binding:none;
}
blink{
text-decoration:none;
}
/* -----画像サイズ制限------ */
img {
width: auto;
max-height: 10px;
}
}
オリジナルでは多数のドメインが指定されており、この状態ではSeesaaで書いているブログの方で、自分の編集作業にも支障を来すようだったので、Seesaaは外した。
●ツイッターのプロフィール画面をシンプルに
Stylishのサイトには他にもニコニコ動画用など色々なスタイルシートがあり、「ツイッター旧スタイル」というもあってちょっと期待したのだが、これはタイムラインのカスタマイズのようだった。
自分の場合タイムラインも見るには見るが、ブラウザのブックマークに入れてあるユーザーさんのプロフィールページを見に行くことが多いので、大きくなってしまった新プロフィール画面のヘッダーと、どういう基準かは知らないが所々文字が大きくなっているツイートをなんとかしたい処。
あれこれ設定してみたが、ヘッダーはうまく小さく出来なかったので、ヘッダー無しにしてみた。
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("twitter.com") {
.ProfileTweet-text {
font-size: 15px !important;
}
.ProfileCanopy-header{
display: none;
}
.AppContainer {
margin-top: -120px !important;
}
/* 下はログイン者以外のプロフィール画面向けのよう */
.ProfileCanopy--large, .ProfileCanopy--large .ProfileCanopy-header {
height: 175px;
}
}
上手く設定出来たかと思ったが、上部に表示されているはずのフォローするためのボタンやフォロー数、フォロワー数の表示などが消えてしまっていた。
これではフォローしたりするとき具合が悪いので、ヘッダーは諦めて文字の大きさのみを固定した。
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("twitter.com") {
.ProfileTweet-text {
font-size: 14px !important;
line-height: 20px !important;
}
}
これだけでもずいぶんと見やすくなった。
それにしてもなぜツイッター社はあんなアップデートをしてしまったんだろう。
改悪としか思えない。
