MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

テーマ

オリジナルテーマの作り方

ファイヤーフォックスの テーマのスキンは、ヘッダー画像で構成されています。

デザインが完成したら こちらから登録!

テーマのヘッダー画像の作成について

ヘッダー画像は、ブラウザの上部の背景としてブラウザの右上隅で固定され、ツールバー、アドレスバー、検索バー、タブの背後に表示されます。

画像の条件

  • 画像サイズ 3000px 幅 × 200px 高さ
  • フォーマットは、PNG または JPG
  • 画像のファイルサイズは、 300 KB 以下

制作のコツ

  • ソフトな色合いのものや、グラデーションのほうが見やすくなります。ディテールの細かなものは、ブラウザのUIが見にくくなってしまします。
  • ツールバーやUI要素が追加された場合は、ヘッダー画像の下の方まで表示されるようになります。.
  • ヘッダー画像の右上を、最も目立たせたいデザインにすることが大切です。—ブラウザの幅が広がると、左側の見える範囲も増加していきます。

オンラインイメージエディタの紹介

  • Pixlr — Pixlr は、ブラウザで簡単に使えて、高機能画像処理ソフトです。
  • Photoshop — Photoshop® Express は、無料のオンラインエディターです。

テーマのフッター画像の作成について

古いバージョンのファイヤーフォックスや、特定のアドオンをインストールしている場合に、ブラウザの下部の背景としてブラウザの右下隅で固定され、アドオン、検索バーの背後に表示されます。フッター画像はオプションです。

画像の条件

  • 画像サイズ 3000px 幅 × 100px 高さ
  • フォーマットは、PNG または JPG
  • 画像のファイルサイズは、 300 KB 以下

制作のコツ

  • ソフトな色合いのものや、グラデーションのほうが見やすくなります。ディテールの細かなものは、ブラウザのUIが見にくくなってしまします。
  • 検索バーが開いた場合や拡張されている場合は、フッター画像の上の方まで表示されるようになります。.
  • フッター画像の左側を、最も目立たせたいデザインにすることが大切です。—ブラウザの幅が広がると、右側の見える範囲も増加していきます。

作成したテーマの登録方法について

作成したテーマの登録は、テーマの登録ページで行います。

  1. テーマの名前 — テーマの名前つけます。既に登録されたテーマと重複する名前はつけることができません。
  2. カテゴリとタグの選択 — カテゴリを選択して、作成したテーマに合うタグを入力してください。 カテゴリやタグが作成したテーマと無関係な場合は、登録を拒否される場合がありますので、ご注意ください。
  3. テーマの説明 — 作成したテーマの短い説明を書いてください。作成したテーマの説明として適当でない場合は、登録を拒否される場合がありますので、ご注意ください。
  4. 作成したテーマのライセンスを選択 — 著作権についてのライセンスを決定します。 著作権のライセンスについて詳しい説明はこちらから.
    • 重要: テーマの作成に使用する画像の権利を持っているかどうか、必ず確認してください。
  5. 画像のアップロード — 画像のファイルサイズは、300 KB 以下。フォーマットは、 JPG または PNG
  6. テキストとタブの色を選択 — 作成したテーマに合うブラウザのタブ背景色と、テキストの色を選択することができます。
  7. 作成したテーマのプレビュー — 作成したテーマのプレビューができます。 送信ボタンのイメージにマウスを持っていくだけで、プレビューを見ることができます。
  8. 作成したテーマを登録 — 問題がなければボタンをクリックしてテーマを登録すれば完了です。プロフィールページで、これまでに作成してきたすべてのテーマを見ることができます。
    • 登録されるためのコツ: テーマギャラリーに承認されるためには、コンテンツのガイドラインと利用規約を守ってください。

Submit Your Theme Now

その他のチュートリアル

Mozilla Themes のサイズについて - A tutorial on theming with a focus on sizing, by VanillaOrchids.

ドキュメントのタグと貢献者

 このページの貢献者: An_ego
 最終更新者: An_ego,