web-dev-qa-db-ja.com

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

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

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

  • OS:GNU/Linux
  • Firefoxバージョン:72.0a1(2019-10-22)(64ビット)

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

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