☰

Firefox Reader View の CSS をカスタマイズする方法はありますか?

tag-icon • tag-icon firefox fonts css stylish
Firefox Reader View の CSS をカスタマイズする方法はありますか?

私は Firefox Reader View が大好きです。しかし、フォントは好きではありません。具体的に言うと、以下のフォントは最適な選択肢ではありません。

body.serif, body.serif .remove-button {
    font-family: Georgia, "Times New Roman", serif;
}

body.sans-serif, body.sans-serif .remove-button {
    font-family: Helvetica, Arial, sans-serif;
}

私はむしろこれを望みます:

body.serif, body.serif .remove-button {
    font-family: "Cambria", serif;
}

body.sans-serif, body.sans-serif .remove-button {
    font-family: "Open Sans", "Segoe UI", "Tahoma", "Calibri", sans-serif;
}

これで、開発者ツールを使用してリーダー ビューを開くたびに、これらの変更を手動で適用できるようになりました。しかし、これを自動化する方法はありますか?

Stylish を試してみましたが、正しくコーディングできたか、Stylish がそのタスクに対応できなかったかのどちらかでした。

答え1

まだこれを探し出していない方、および/または後世のために、FF v60 時点での解決策は次のとおりです。

  • プロファイルフォルダを見つけます（ に記載されていますabout:support）
  • そこに「chrome」というフォルダがまだ存在しない場合は作成します
  • そのフォルダに「userContent.css」というファイルを作成します。

次に、正しい CSS @ ルールが必要になります。これで準備完了です。

@-moz-document url-prefix("about:reader") {
    body.serif {
        font-family: 'Besley*' !important;
    }
}

注意: サイドバーとそのボタンのスタイルを設定することもできます。これは、ダーク テーマのコントラストを下げるのに役立ちます。

.toolbar {
    background-color: #333 !important;
    border-right: 1px solid #444 !important;
}
.button {
    color: #ccc !important;
    background-color: #444 !important;
}

関連情報