Firefox BrowserでもAbout Firefox 娘
はじめに
以下の環境で動作確認しています。
Windows 10 (64bit)
Firefox 70.0 (64bit)
Thunderbird 60.9.0 (32bit)
About Firefox 娘とは
FirefoxはuserChrome.css
を編集することで、UIを色々とカスタマイズできるというのはよく知られていると思います。
そのuserChrome.css
を使って、about画面(メニュー > ヘルプ > Firefoxについて)にFirefox擬人化キャラを表示するAbout Firefox 娘
というものがあります。
↓元ネタはこちらです
About Firefox-ko 4.0 beta
ですが、残念なことにFirefox 4.0で更新が止まってしまっています。
もちろん最近のFirefoxではレイアウトが崩れます。
これをFirefox 70.0に対応させます。
手順
userChrome.cssを有効にする
Firefox 69からuserChrome.cssがデフォルトで無効となりました。
これを有効化します。
- Firefoxのアドレスバーにabout:configと入力しEnter
-
危険性を承知の上で使用する
をクリック -
toolkit.legacyUserProfileCustomizations.stylesheets
を検索 -
false
⇒true
に変更 - Firefoxを再起動
userChrome.cssの作成
- Firefoxのメニュー > ヘルプ > トラブルシューティング情報を開く
- プロファイルフォルダー のフォルダを開くをクリック
- chromeという名前のフォルダを作成します
- 作成したchromeフォルダに
userChrome.css
を作成します
画像ファイルの準備
Firefox 娘の画像とFirefox Browserのロゴ画像をchromeフォルダにコピーします。
ロゴ画像をコピーするのは、ロゴの文字色を変更するためです。
(※ CSS3のマスクやフィルターで出来るのかも知れませんが、分からなかった・・・)
-
こちらから
about-fx-ko4-beta.png
をchromeフォルダに保存 - Firefox Browserロゴ画像(chrome://branding/content/about-wordmark.svg) をFirefoxで開き、名前をつけて保存でchromeフォルダに保存
ロゴ画像 (about-wordmark.svg) の文字色変更
About Firefox-koの背景色の薄黄色だと、Firefox Browserロゴが白色のため目立たないです。
そのため、保存したabout-wordmark.svg
をsvgを編集できるソフトで開き、文字色を黒っぽく変更します。
編集するソフトはなんでも良いのですが
私は、
- Inkscapeで開く
- 編集 > すべて選択
- フィルター > 色 > 明度コントラスト
で、明度を-80、コントラストを0にして保存しました。
userChrome.cssの編集
chrome://browser/content/aboutDialog.xul をFirefoxで開くとデフォルトのabout画面が表示されます。
開発ツールでcssを確認し、About Firefox-koをuserChrome.css
に適用していきます。
こちらは、Firefox Browserに合わせて少しフラットっぽくしました。
完成したのが以下になります。ご査収ください。
Firefox-ko 70.0
@charset "UTF-8";
/* Firefox-ko 70.0 */
#aboutDialogContainer .text-link {
color: -moz-nativehyperlinktext !important;
}
#aboutDialogContainer #clientBox {
background-color: #fffff7 !important;
color: #222222 !important;
padding: 0px !important;
}
#aboutDialogContainer #clientBox #leftBox {
background-image: url("about-fx-ko4-beta.png") !important;
background-position: center 0% !important;
}
#aboutDialogContainer #clientBox #rightBox {
background-color: #fffff7 !important;
background-image: url("about-wordmark.svg") !important;
}
#aboutDialogContainer #bottomBox {
background-color: #f0f0f0 !important;
}
完成図
実際に表示するとこんな感じになります。
おまけ(About Thunderbird 娘)
別記事にしても良かったけど、面倒だったのでこちらに追加します。
同様にThunderbirdバージョンのAbout Thunderbird 娘もあります。
↓元ネタはこちらです
About Thunderbird-ko
こちらも元記事のCSSでは崩れます。
About Thunderbird-ko
手順はFirefoxと同じなので省略。
/* Thunderbird-ko 60.0 */
#aboutDialog #clientBox #leftBox {
background-color: #f5f6f3 !important;
background-image: url("about-tb-ko.png") !important;
min-height: 400px !important;
min-width: 300px !important;
}
#aboutDialog #versionWrapper {
margin: 0px 13px 0px 10px !important;
}
#aboutDialog #versionField {
text-align: right !important;
color: #88888f !important;
background-color: transparent !important;
}
#aboutDialog #copyright {
opacity: 0.4 !important;
color: #333333 !important;
background-color: #f5f6f3 !important;
min-height: 65px !important;
margin: 20px 16px 10px 16px !important;
padding: 5px 10px !important;
border: 1px solid #bbbbbb !important;
-moz-border-radius: 4px !important;
}
#aboutDialog #userAgent {
color: #ffffff !important;
background-color: #008ad0 !important;
}
最後に
ぐぐってもAbout Firefox 娘の情報がヒットしないので、記事にしました。
せっかくだから、Firefoxのバージョンアップに追従して記事をちょくちょく更新したいと思います。
Author And Source
この問題について(Firefox BrowserでもAbout Firefox 娘), 我々は、より多くの情報をここで見つけました https://qiita.com/kumapo0313/items/92d2d594c4528334133f著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .