[Firefox]新しいタブページの背景を変更する

最近RedditのFirefoxスレで「新しいタブページの背景色を変更するにはどうしたらいいのか」という質問をよく目にします。

「新しいタブを開く度に、Firefoxが太陽のように輝いて私の目を潰そうとします！」とか書いてあってちょっと笑っちゃったのですが、ダークテーマを使っている環境では特に眩しく感じるみたいですね。テーマ別で背景色が変わると良いんですけどね。

そういう要望もあるんだな～ということで、背景色を変えたり壁紙を設定するCSSです。userContent.cssが必要なので、導入の仕方がわからない場合はこちらを参考にして作成してください。作成するのはuserChrome.cssではなく、userContent.cssなのでお間違えなく。

CSSコード

背景色を黒に変更します。

@-moz-document url(about:newtab), url(about:home) {
 body {
  background-color: #000 !important;
 }
}

背景に画像を設定します。background-sizeプロパティの値は環境に合わせて調整する必要があります。

@-moz-document url(about:newtab), url(about:home) {
 body {
  background-color: transparent !important;
  background-image: url(画像ファイル名またはパス) !important;
  background-size: auto 100% !important;
  }
}

ボタン周りの微調整です。

@-moz-document url(about:newtab), url(about:home) {
/* 歯車アイコンのボタン（通常時） */
 .prefs-pane-button button {
  fill: #EDEDF0 !important;
 }
/* 歯車アイコンのボタン（マウスオン・アクティブ） */
 .prefs-pane-button button:hover,
 .prefs-pane-button button:active {
  background-color: transparent !important;
  fill: rgba(255, 135, 1, 1) !important;
 }
}