先日、FirefoxのRSSリーダーアドオン「Brief」のCSSをカスタマイズして、取得した記事の文字色を強制的に黒で表示するようにした。
色使いの派手なブログはどうにも読みづらいので。

3色ブログの文字色を無効化(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;
}
}

これだけでもずいぶんと見やすくなった。

それにしてもなぜツイッター社はあんなアップデートをしてしまったんだろう。

改悪としか思えない。

ーー
(関連記事)
Twitterのダイレクトメッセージを非表示に
ツイッターの外観(文字サイズ)変更とDM非表示

表示   このエントリーをはてなブックマークに追加

Comments

2014年8月21日