web-dev-qa-db-ja.com

Firefoxでホームページの背景画像を変更するにはどうすればよいですか？

背景画像を好きなように変更して、Firefoxブラウザーの退屈なホームページのルックアンドフィールを変更したいと思います。

基本的なシステムの詳細：

  • OS：GNU/Linux
  • Firefoxバージョン：72.0a1（2019-10-22）（64ビット）

アドオンなしでそれができれば私にとってはより良いでしょう...

firefoxthemes
2
Sourav Goswami

Firefoxでは、ホームページ（新しいタブ）の背景画像を[設定]から変更する方法はありません。アドオンは確かにそれを実行できますが、より良いアプローチがあります。CSSファイルを作成し、起動時にそのファイルをロードするようにFirefoxに指示できます。

これを行うには、次の手順に従います。

  1. アドレスバーの_about:support_に移動します。 "Application Basics" ➔ Profile Directory （または "Profile Folder" on MacOS）➔[ "Open Directory" （または "Show in Finder" ）をクリックします： Firefox about:support screenshot options

通常は$ HOMEディレクトリにあるFirefoxプロファイルディレクトリを開きます。

  1. chrome という名前のディレクトリを、開いているディレクトリ内に作成します（まだ存在しない場合）。

  2. chrome ディレクトリに移動し、（a）] img というディレクトリを作成し、（b）というファイルを作成しますuserContent.css 。画像をimgディレクトリに移動します。

  3. 任意のテキストエディタで_userContent.css_を開き、次のコードを貼り付けます。

_@-moz-document url(about:home), url(about:newtab), url(about:privatebrowsing) {
    .click-target-container *, .top-sites-list * {
        color: #fff !important ;
        text-shadow: 2px 2px 2px #222 !important ;
    }

    body::before {
        content: "" ;
        z-index: -1 ;
        position: fixed ;
        top: 0 ;
        left: 0 ;
        background: #f9a no-repeat url(img/cherry-blossom-1260646.jpg) center ;
        background-size: cover ;
        width: 100vw ;
        height: 100vh ;
    }
}
_

url(img/cherry-blossom-1260646.jpg)のファイル名を好みの画像に変更することを忘れないでください。

ファイルを保存してエディターを終了します。

  1. URL _about:config_に移動してリスクを受け入れ（ここでは実際には何も害はなく、心配する必要はありません）、検索バーに_toolkit.legacyUserProfileCustomizations.stylesheets_を貼り付け、値をtrueに設定します。これは、起動時にCSSファイルをロードするようにFirefoxに指示します。

  2. 実行中の場合は、Firefoxを再起動します。

CSSコードの説明

[〜＃〜] a [〜＃〜] 

_@-moz-document url(about:home), url(about:newtab), url(about:privatebrowsing)
_

ホームタブ、新しいタブ、プライベートブラウジングタブの背景を有効にします。

[〜＃〜] b [〜＃〜] 

_.click-target-container *, .top-sites-list * {
    color: #fff !important ;
    text-shadow: 2px 2px 2px #222 !important ;
}
_

「トップサイト」と「ハイライト」の色を暗いテキストシャドウ付きの白に変更します。明るい壁紙の場合は、色を編集して見やすくする必要があります。

[〜＃〜] c [〜＃〜] 

_body::before {
    content: "" ;
    z-index: -1 ;
    position: fixed ;
    top: 0 ;
    left: 0 ;
    background: #f9a no-repeat url(img/cherry-blossom-1260646.jpg) center ;
    background-size: cover ;
    width: 100vw ;
    height: 100vh ;
}
_

画像（ここではimg/cherry-blossom-1260646.jpg）をビューポートの位置と幅と高さが固定された_body::before_にロードします。背景画像が読み込まれているか見つからない場合、背景色は＃f9aに設定されます。

_background-size: cover_は、Firefoxで自動調整可能にし、ズームイン/ズームアウトは画像サイズに影響しません。

GNU/LinuxおよびUnixシステムでは、_/usr/share/backgrounds/_からもイメージをロードできます。

再起動後、Firefoxは次のようになります：

Firefox Home Tab screenshot, with custom background image

7
Sourav Goswami