FirefoxのuserContent.cssネタ #2

今回はurl-prefix()を使った奴とか書いてみたり。いろいろやってたらuserContent.cssが2000行超えたりしましたが、特にページの表示が遅くなるとかいう感じは無いので、いくらでもCSSルールを書いて良さそう。限界はあるでしょうがね。

@-moz-documenturl-prefix()を組み合わせて使えばURLの先頭一致でルールの適用を制限できたりします。具体的には、

@-moz-document url-prefix(http://www.example.com/~foobar/) {
  body {
    font-size: 100% !important;
  }

  p {
    line-height: 1.5 !important;
  }
}

とか、こんな感じで"http://www.example.com/~foobar/"で始まるURLのページだけに適用されるブロックを作成できます。URLの完全一致でルールの適用を制限できるurl()というのもありますが、大抵の場合はurl-prefix()の方が活躍してくれそうな。

XREAのAnalogの表示を変更する

@-moz-document url-prefix(http://hail2u.net/log/) {
  body {
    font-family: Verdana, sans-serif;
    font-size: 80%;
  }
}

XREAではAnalogによって/virtual/username/public_html/log以下にHTMLでアクセス・ログが出力されます(生ログもありますけど)。これを利用されている人は結構多いと思うのですが、デフォルトの素っ気ないままで見やすいとはちょっと言えない感じです。ユーザー・スタイルシートでいじろうにも、idclassが無いので、普通にCSSルールを記述すると他のページで誤爆しまくってしまいます。こういったケースにはurl-prefix()で誤爆することを防ぐことが可能です。

ここではフォントを変えるくらいのことしか例として提示していませんが、どこかのサイトをユーザー・スタイルシートで書き換えるというようなケースとは違いHTMLが変更されることはまず無いので、隅から隅まで好きなようにカスタマイズしてやっても問題なさそうです。

また、こういったケースの様に、元々のスタイル指定を変更したいというわけではない場合は、!importantは必要ないです。

del.icio.usをhail2u.netっぽく

@-moz-document domain(del.icio.us) {
  body {
    color: #333333 !important;
    background-color: #fcf9f3 !important;
    font-family: Verdana, sans-serif !important;
  }

  a:link {
    color: #990000 !important;
  }

  a:visited {
    color: #4c0000 !important;
  }

  a:hover {
    color: #990000 !important;
  }

  a:active {
    color: #333333 !important;
  }

  div.banner {
    padding: 1em !important;
    border-bottom: 1px solid #cfccc6 !important;
    color: #fffcf6 !important;
    background-color: #9c9993 !important;
  }

  div.banner * {
    color: #fffcf6 !important;
    background-color: #9c9993 !important;
  }

  div.banner h1 {
    font-family: 'Trebuchet MS', sans-serif !important;
  }

  div.right {
    border-left: 1px solid #cfccc6 !important;
    color: #333333 !important;
    background-color: #edeae4 !important;
  }

  div.delPage {
    padding: 0.5em !important;
    border-bottom: 1px solid #cfccc6 !important;
    color: #333333 !important;
    background-color: #edeae4 !important;
  }

  div.pager,
  li.post {
    margin-bottom: 1.5em !important;
  }

  li.post h3 {
    font-family: 'Trebuchet MS', sans-serif !important;
  }
}

del.icio.usをこのサイトのカラー・スキームとフォント指定を利用して多少見やすくしてたりとか。各Bookmarkの間隔を少し開けるだけでもかなり見やすくなる気がする。

browned del.icio.us

この色使いが万人に見やすいというわけではないので、このコードを参考に好みに合わせて色を変更してやれば良し。

RSS広告社の広告を消す

img[src^="http://rss.rssad.jp/rss/img/"] {
  display: none !important;
}

フィードに広告が掲載されること自体は特にどうとも思わないのですが、ITmedia@ITのフィードの広告はdescriptionが短いため広告の方が目立ってしまって邪魔な感じ。もうちょっと長い概要の方がユーザーには優しそう。RSS広告社自体にはなんの含みもありません(とかわざわざ書くところがいやらしい)。


ユーザー・スタイルシートによるウェブ・サイトの見た目の変更をやりすぎると、そのウェブ・サイト側でHTMLの変更があった時に修正が面倒になります。なので、どうしても気に食わない数点の変更程度に留めておくのが良い気がします。フォント指定や色使い、大きな広告などでしょうかね。