読みやすくするためにFirefox Reader Viewをカスタマイズする方法

Reader ViewはFirefoxブラウザの一般的な機能です。 外観を変える Webページの 読みやすくする によって 視覚的な乱雑さを取り除く 画像、広告、ヘッダー、サイドバーなど。ただし、Reader Viewはすべてのホームページで利用できるわけではありません。.

機能が特定のページで利用可能な場合は、アイコンの形で有効にするためのアイコンが表示されます。 小さな本のアイコン アドレスバーの右側に表示されます.

読者が外観をカスタマイズすることを可能にするいくつかの組み込みオプションがあります 読者ビュー. Reader Viewの外観をさらにパーソナライズするために何ができるかを説明する前に、これらのオプションについて説明します。デモを目的として、National Geographicの記事による記事を使用します。.

既成のオプション

Firefox Reader Viewには、ダーク、ライト、セピアなどのカスタマイズ済みのオプションがいくつか付属しています。 きらきら, 調整可能 フォントサイズ, とセリフとサンセリフ 書体. あなたがテーマをカスタマイズすることができます CSSルールを上書きする これらの既存のオプションのうち.

私はセリフフォントでダークスキンを使用しています、そしてこれは私の場合、所属するCSSクラスをオーバーライドする必要があることを意味します .ダーク そして .セリフ.

他のテーマバリアント（スキン+フォント）をカスタマイズしたい場合は、 適切なCSSセレクターを使用する. あなたはF12を押すことでFirefox開発者ツールの助けを借りてこれらをチェックアウトすることができます.

カスタムCSSファイルを作成する

というファイルを作成する必要があります。 userContent.css の中 クロム のフォルダ あなたのFirefoxプロファイルフォルダ Reader Viewのカスタマイズ用。 Firefoxのプロファイルフォルダを見つけるには、次のように入力します。 about：support URLバーに移動してEnterキーを押します。.

あなたはあなた自身を含むページであなた自身を見つけるでしょう。 Firefoxのインストールに関連する技術データ. [フォルダを表示]ボタンをクリックすると、プロフィールフォルダが開きます。.

というフォルダを作成します。 クロム 自分のプロファイルフォルダの中に（まだ持っていない場合）、 userContent.css の中 クロム フォルダ。ファイルパスは次のようになります。

…\プロフィール\\ chrome \ userContent.css 

カスタムCSSルールを追加する

作成して開いたら userContent.css コードエディタで、CSSルールを追加しましょう。 Reader Viewのデザインをカスタマイズするためには、 ターゲットにする 適切なセレクターでタグ付けする.

さまざまなデフォルトオプションには、次のセレクタを使用できます。

 / *暗い背景が選択されている場合* /：root [hasbrowserhandlers = "true"] body.dark  / *明るい背景が選択されている場合* /：root [hasbrowserhandlers = "true"] body.light  / *セピアの場合背景が選択されています* /：root [hasbrowserhandlers = "true"] body.sepia  / * serifフォントが選択されている場合* /：root [hasbrowserhandlers = "true"] body.serif  / * sans-serifフォントがselected * /：root [hasbrowserhandlers = "true"] body.sans-serif  

特定の設定の組み合わせをターゲットとして、クラスを組み合わせることもできます。.

 / *暗い背景とserifフォントが選択されている場合* /：root [hasbrowserhandlers = "true"] body.dark.serif  / * sepia背景とsans-serifフォントが選択されている場合* /：root [hasbrowserhandlers = "true" ] body.sans-serif.sepia 

使ってはいけません 共通セレクタ ：root [hasbrowserhandlers = "true"]ボディ 一度にすべての設定をターゲットにします。それは動作しますが、それは 他のブラウザページにも影響する, といった about：newtab, それらのルート要素も hasbrowserhandlers attribute（内部のFirefoxページのイベントハンドラをマークするのに使われます。 約： ページ）.

これが私が私に追加したコードです。 userContent.css. フォントファミリー、フォントスタイル、色を変更し、テキストコンテナを広げました。あなたはあなた自身の好みに応じて他のスタイルルールを使うことができます.

 / ** userContent.css *************************** /：root [hasbrowserhandlers = "true"] body.dark.serif、： root [hasbrowserhandlers = "true"] body.dark.serif＃リーダードメインフォントファミリー： "courier new"！重要です。 root [hasbrowserhandlers = "true"] body.dark.serif background-color：＃13131F！重要です。色：＃BAE3DB！重要です。 root [hasbrowserhandlers = "true"] body.dark.serif＃リーダードメインフォントスタイル：斜体！重要。 root [hasbrowserhandlers = "true"] body.dark.serif h1、：root [hasbrowserhandlers = "true"] body.dark.serif h2、：root [hasbrowserhandlers = "true"] body.dark.serif h3、： root [hasbrowserhandlers = "true"] body.dark.serif h4、：root [hasbrowserhandlers = "true"] body.dark.serif h5 色：＃06FEB0！重要。 root：[hasbrowserhandlers = "true"] body.dark.serif a：link color：＃83E7FF！重要です。 root [hasbrowserhandlers = "true"] body.dark.serif＃コンテナ最大幅：50em！重要。 

それを使用する必要があることに注意してください !重要 キーワードの userContent.css すべてのCSSルールに対して. ブラウザはユーザー指定のプロパティ値を追加します 作者によって指定された値の前 （与えられたWebページの開発者、ここでは閲覧者ビュー）。したがって、ユーザー指定のプロパティ値は !重要 作成者指定のスタイルシートが同じプロパティをターゲットにしている場合、キーワードは機能しません。上書きされるためです。.

最終結果

下記の私のReader Viewテーマの変更を見ることができます。あなた自身のカスタマイズされたFirefox Reader Viewのデザインをカスタマイズするためにあなた自身のCSSルールを使用してください.

前

後に

Firefoxツールのテーマのカスタマイズについてもっと深く知りたいのなら、Firefox Developer Toolsテーマのカスタマイズに関する私の前のチュートリアルをチェックしてください。.