ウェブ制作ソフト
Mozilla Firefoxテーマの作り方

Mozillaが配布しているウェブブラウザのMozilla Firefox(モジラ ファイヤーフォックス)は、機能拡張によって変更・カスタマイズができます。
Firefoxテーマとは、簡易テーマ機能のPersonasとテーマファイルの利用で、ツールバーなどの外観のデザイン・配色を変えることができるようにした仕組です。
そのテーマファイルは、好みの配色やお気に入りの写真やイラストを指定して比較的簡単に作成することができるので、作り方を紹介します。
今回使用したMozilla Firefoxのバージョンは、Personas Plus版 29・Firefox Color版 66です。

手順

Personas Plusは、2018年11月30日をもって廃止され、それに代わるものとしてFirefox Colorが薦められています。

フォルダの作成

  1. テーマの名前を決めます。
    ここでは、「Shiinotomoshibi(シイノトモシビ)」としました。
    Shiinotomoshibiという名前と配色は、和歌山県那智勝浦町などで見られる光るキノコのシイノトモシビタケからとりました。
  2. 適当な場所にテーマと同じ名前のフォルダを作成します。

画像ファイルの作成

InkscapeでのMozilla Firefoxテーマ用の画像ファイルを作成
Inkscapeの編集画面
  1. ヘッダー用・フッター用など、以下の仕様の画像ファイルを作成し、テーマと同じ名前のフォルダ内に保存します。
    イラストの場合はInkscapeなどを使用、デジタル写真をトリム・サイズ調整する場合はGIMPなどを使用します。
    Firefox Colorの場合は、リピート設定(繰り返し・パターン)ができるため、内容に応じて小さなサイズでもよいでしょう。
使用場所 ファイル名 サイズ
Firefox Color カスタム背景 bg.jpgまたはbg.pngまたはbg.bmp 3000 x 200px 1MB以下
Personas Plus ヘッダー背景 header.jpgまたはheader.png 3000 x 200px 300KB以下
Personas Plus フッター背景 footer.jpgまたはfooter.png 3000 x 100px 300KB以下
表示位置・サイズ

Windows 10 + Firefox 66でのカスタム背景の画像の配置範囲は、上の境界線1pxは含み、右の境界線1pxは含みません。
ヘッダー背景の画像は、右上を基点に表示されます。
フッター背景の画像は、左下を基点に表示されます。
環境により、表示されるサイズは異なるため、注意が必要です。

Mozilla Firefox のGUIサイズ比較

Firefox, OS メニュー 非表示
ブックマーク 非表示
メニュー 非表示
ブックマーク 表示
メニュー 表示
ブックマーク 非表示
メニュー 表示
ブックマーク 表示
29, Mac OS 10.9 102
29, Windows 7 112 119
66, Windows 10
上端・下端の境界線各1pxを含む
75 97 103 125

テーマの編集

Firefox Color
  1. Mozilla FirefoxでFirefox Colorにアクセスする。
  2. 「Custom colors」で「Toolbar Color」「Toolbar Icons and Text」「Background Color」「Background Tab Text Color」「Search Bar Color」「Search Text」「Tab Highlight Color」「Popup Background」「Popup Text」を設定する。
  3. 「Custom background」で画像(JPG・PNG・BMP(1MB以下))をアップロードし起点・リピート設定する。
  4. 「Save」をクリックする。
Mozilla Firefoxテーマの編集
Personas Plus
  1. Mozilla Firefoxに Personas Plusをインストールします。
  2. Mozilla Firefoxのツールバーまたはツールメニューの Personas > 設定 > 詳細 > Enable custom personas をオンにします。
  3. Mozilla Firefoxのツールバーまたはツールメニューの Personas > カスタムペルソナ > 編集 を選択します。
  4. 名前にテーマの名前・ヘッダーにheader.jpgまたはheader.png・フッターにfooter.jpgまたはfooter.pngを入力し、テキスト色・強調色を選択し、OKボタンをクリックする。
  5. Mozilla Firefoxテーマ(カスタムペルソナ)の完成です。
  • Firefox 29以降はアドオンバーがなくなったため、ヘッダーのみ使用されます。
    アドオンバーを表示するには、Classic Theme Restorerを利用します。
  • このテーマは、Mozilla Thunderbirdでも利用できます。

テーマの公開

Personas Plus

公開用のテーマを作成する場合は、AMOにユーザー登録・ログインした後、ページ最上部の ツール > 新しいテーマを登録 で表示されるフォームを利用します。

Mozilla FirefoxテーマのShiinotomoshibi 02
Mozilla > Add-ons for Firefox > テーマ > Shiinotomoshibi 02

Mozilla FirefoxテーマのMt. Fuji 01
Mozilla > Add-ons for Firefox > テーマ > Mt. Fuji 01

関連情報

ページトップ

inserted by FC2 system