From a065e04d529da1d847b5062a12c46d916408bf32 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 21:46:22 -0500 Subject: update based on https://github.com/mdn/yari/issues/2028 --- .../index.html | 302 --------------------- files/ja/themes/index.html | 43 --- files/ja/themes/theme_concepts/index.html | 235 ---------------- .../ja/themes/\350\203\214\346\231\257/index.html" | 102 ------- 4 files changed, 682 deletions(-) delete mode 100644 files/ja/themes/common_firefox_theme_issues_and_solutions/index.html delete mode 100644 files/ja/themes/index.html delete mode 100644 files/ja/themes/theme_concepts/index.html delete mode 100644 "files/ja/themes/\350\203\214\346\231\257/index.html" (limited to 'files/ja/themes') diff --git a/files/ja/themes/common_firefox_theme_issues_and_solutions/index.html b/files/ja/themes/common_firefox_theme_issues_and_solutions/index.html deleted file mode 100644 index 6ad0ba7e2a..0000000000 --- a/files/ja/themes/common_firefox_theme_issues_and_solutions/index.html +++ /dev/null @@ -1,302 +0,0 @@ ---- -title: 一般的なFirefoxテーマに関する問題と解決方法 -slug: Themes/Common_Firefox_theme_issues_and_solutions -translation_of: Archive/Themes/Common_Firefox_theme_issues_and_solutions ---- -

このページの目的は、テーマ開発者はどのようにして一般的な技術的問題を修正するか、についての話題を提示することです。 これは、AMOエディターの、コピーアンドペーストで一般的なテーマに関する課題のための話題を見直せる"boilerplate"エディターで掲示されている、一般的なテーマに関する問題の説明と連携した文書です。この文書は2012年7月27日に始められ、 時間をかけて全て解決、もしくは一部の問題についての解決方法を書かれることを必要とし続けています。

- -

特定のOSにおける問題

- -

Windows 7

- -

Windows 7 Aero missing right-hand title bar buttons

- -

When tabs are on top and the menu bar is disabled, Firefox is missing the min/max/restore/close button on the right side of the title bar. Please see the following threads on MozillaZine for solutions to this issue:
- http://forums.mozillazine.org/viewtopic.php?f=18&t=2131121
- http://forums.mozillazine.org/viewtopic.php?f=18&t=1953371&start=60

- -

Windows 7 Aero not going into full screen mode properly

- -

On Win7 with Aero Glass support Firefox doesn't always go to full screen mode from a normal window properly. The resolution to this issue is to add the following code to your browser.css file somewhere below where the main-window is made transparent to support Aero glass.

- -
@media all and (-moz-windows-compositor) {
-  /* Make transition to Fullscreen mode seamlessly in Firefox 10+ */
-  #main-window[inFullscreen="true"] {
-    -moz-appearance: none;
-    background-color: -moz-dialog!important;
-  }
-}
- -

For more information about this issue please see {{bug(732757)}} and {{bug(732757)}} and this MozillaZine thread.

- -

Mac OS X

- -

OS X Lion missing toolbar button icons

- -

Due to Firefox {{bug(679708)}} and {{bug(702558)}}, some toolbar buttons icons may be missing on Firefox 8 and later running on Mac OS X Lion. In order to work around this issue, you need to either rename any of the following files that are in your chrome://browser/skin/ folder and fix any references to those files, or copy them to the folder chrome://browser/skin/lion/:

- - - -

Linux

- -

Linux select box fields are showing both drop arrow and spinner arrows

- -

On Linux: the styling of drop down select box fields may show both a drop arrow and up/down spinner arrows.  The problem is commonly caused by a -moz-appearance:menulist style rule in chrome://global/skin/menulist.css. Once the offending rule is found, it should be deleted and manual styling used.

- -

App button not styled on Linux, but is styled on Windows

- -

On Linux the Firefox app button that is displayed when tabs are on top and menu bar is disabled is not styled properly compared to Windows and is not changing colors when in private browsing mode. The cause of this issue is that Linux Firefox uses a different ID for the Firefox button from Windows. The fix is to make sure any style rule that references #appmenu-button also has a comparable reference to #appmenu-toolbar-button in chrome://browser/skin/browser.css. If your Firefox button relies on some button styling from toolbarbuttons.css you'll need to add comparable style rules for #appmenu-toolbar-button in browser.css.

- -

ツールバーとメニュー

- -

Firefox application button

- -

Application button doesn't change styling for private browsing mode

- -

When in private browsing mode there needs to be a visual difference to the Firefox app button that is displayed when tabs are on top and the menu bar is disabled.

- -

Text only toolbar buttons not aligned properly

- -

When text only toolbar buttons are selected in customize toolbars, text labels in toolbar buttons may not align properly. The common cause of this is style rules that reference [iconsize="small"] without excluding [mode="text"]. The solution usually is to append :not ([mode="text"]) to those style rules. For instance use toolbar[iconsize="small"]:not ([mode="text"]). A little experimenting may be required to fully address this issue with your theme.

- -

Address bar

- -

Identity box is missing padlock icons for secure sites

- -

In Firefox 14 and later the identity box has been significantly changed and the favicon has been replaced by an icon that indicates the website's status. In the case of secure sites the icon must be a padlock. To fix this issue, you need to copy the files chrome://browser/skin/identity-icons-generic.png, chrome://browser/skin/identity-icons-https.png and chrome://browser/skin/identity-icons-https-ev.png to your browser folder. You can modify/redesign these icons to match your theme provided appropriate padlock icons are used for secure sites but not on insecure sites. The following CSS rules also need to be copied to the proper location in the browser.css file and modified as necessary:

- -
  /* page proxy icon */
-
-  #page-proxy-favicon {
-    width: 16px;
-    height: 16px;
-    margin: 1px 3px;
-    list-style-image: url(chrome://browser/skin/identity-icons-generic.png);
-    -moz-image-region: rect(0, 16px, 16px, 0);
-  }
-
-  .verifiedDomain > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon {
-    list-style-image: url(chrome://browser/skin/identity-icons-https.png);
-  }
-
-  .verifiedIdentity > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon {
-    list-style-image: url(chrome://browser/skin/identity-icons-https-ev.png);
-  }
-
-  #identity-box:hover > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon {
-    -moz-image-region: rect(0, 32px, 16px, 16px);
-  }
-
-  #identity-box:hover:active > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon,
-  #identity-box[open=true] > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon {
-    -moz-image-region: rect(0, 48px, 16px, 32px);
-  }
-
-  #page-proxy-favicon[pageproxystate="invalid"] {
-    opacity: 0.5;
-  }
-
- -

For more information about identity boxes please see the identity box section of the AMO editors theme review guidelines

- -

No visual clue for disabled url bars

- -

There needs to be a visual clue when URL bar is disabled. To test this please go to {{bug(370495)}} using the default theme and activate the "click me" link. The URL bar of the resulting popup window is disabled.

- -

Address bar "door hangers"

- -

Door hanger sync panel not styled

- -

The sync panel at the bottom of the "door hanger" for the save password panel displayed when a user logs into a website needs to be styled to match rest of panel including border. This issue also applies to the edit bookmark panel, which is activated by double clicking on the bookmark star in the URL bar. For details, please see {{bug(708797)}}.

- -

"About" Pages

- -

about:addons

- -

Disabled add-on Icons are not grey scale

- -

In Tools > Add-ons, the icons of disabled icons need to be converted to grey scale. To accomplish this copy the file chrome://mozapps/skin/extensions/extensions.svg from the default theme into the mozapps/extensions/ folder of your theme and add the following style rule to the CSS file extensions.css:

- -
.addon[active="false"] .icon {
- filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale");
- opacity:0.3;
- }
- -

about:memory

- -

About:memory nodes do not collapse

- -

The styling of about:memory is a little messed up in that nodes do not collapse as they should when clicked on. To fix this issue you need to copy the following file from the latest version of Firefox to your theme: chrome://global/content/aboutMemory.css.

- -

about:permissions

- -

Domain names don't line up in about:permissions

- -

The domains on the domain list of about:permissions do not line up properly due to missing placeholder icons for domains without favicons. This issue is fixed by adding the following CSS instructions to the file browser/preferences/aboutPermissions.css:

- -
.site-favicon {
-  height: 16px;
-  width: 16px;
-  -moz-margin-end: 4px;
-  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
-}
- -

Web developer tools

- -

Web developer toolbar

- -

{to be added}

- -

Web console

- -

Web console buttons do not change appearance

- -

On the web console (Tools > Web Developer > Web Console), the toolbar buttons on the left-hand side do not change their appearance between their toggled on and toggled off status as a result it is not possible to determine which buttons are enabled.

- -

Web console close button is missing

- -

The web console (Tools > Web Developer > Web Console) is missing its close button, which makes it impossible to close.

- -

Web console close button sprite mapping is messed up

- -

On the web console (Tools > Web Developer > Web Console) the sprite mapping for the close button is messed up.

- -

Style Inspector

- -

Style inspector is missing button icons on toolbar

- -

The style inspector is missing icons from its inspect and markup panel buttons on its toolbar. To fix this issue you need to copy the files chrome://browser/skin/devtools/inspect-button.png and chrome://browser/skin/devtools/treepanel-button.png from the default theme into your browser/devetools/ folder. You also need to insert the following style rules into the proper place in the browser/browser.css file in your theme theme:

- -
/* Highlighter toolbar - HTML Tree */
-
-#inspector-treepanel-toolbutton {
-  list-style-image: url("chrome://browser/skin/devtools/treepanel-button.png");
-  -moz-margin-end: 0;
- -moz-image-region: rect(0px 18px 16px 0px);
-}
-
-/* Highlighter toolbar */
-
-#inspector-inspect-toolbutton {
-  list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
-  -moz-image-region: rect(0px 16px 16px 0px);
-}
- -

Style inspector is completely unstyled

- -

The style inspector that is part of Firefox 10 and later needs to be styled. Using the default theme in the latest Firefox, please try Tools > Web Developer > Inspect to see how this new feature functions and how it should be styled. You'll probably want to copy the files from the folder browser/devtools/ from the default theme into your theme and then modify as necessary to achieve the desired look.

- -

Style inspector's bread crumb buttons are hard to read

- -

The text labels of breadcrumbs on the style inspector (Tools > Web Developer > Inspect) are too similar to the background colors making them very hard to read. Please choose text label colors that stand out against the background color better. The style rules for these labels can be found near the end of chrome://browser/skin/browser.css. The color style for the following statements need to be adjusted:

- -
.inspector-breadcrumbs-button {
- -
.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-tag {
-
- -
.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-id {
- -
.inspector-breadcrumbs-id,
-  .inspector-breadcrumbs-classes {
- -

Style inspector breadcrumb button backgrounds are not consistent between pre-FF14 and FF14+

- -

The use of the styling rule fill in {{cssxref("-moz-border-image")}} is incompatible with versions of Firefox older than Firefox14, however, its use is needed for Firefox 14 and later. Themes that use -moz-border-image and support both Firefox 14 and newer as well as older versions of Firefox need to use both the older and newer methodologies like the following example.  In most themes this issue specifically affects the breadcrumbs toolbar of the style inspector.

- -
.inspector-breadcrumbs-button {
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 2 13 2 13 stretch; /* For FF13- */
-  -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 2 13 2 13 fill stretch; /* For FF14+ */
-}
- -

Responsive design view

- -

Responsive design view is missing background for unused area

- -

The Responsive design view tool (Tools > Web Developer > Responsive Design View) needs background styling for the unused area of the content window.

- -

Debugger

- -

Debugger toolbar buttons are missing icons

- -

On the Debugger (Tools > Web Developer > Debugger) the toolbar buttons are missing their icons.

- -

Miscellaneous issues

- -

HTML 5 media controls

- -

HTML 5 media controls are not styled

- -

The HTML5 video control bar is not styled. Please go to Mozilla's Mission page using both your theme and the default theme and try the video on that page. This issue needs to be corrected in the next version of your theme.

- -

HTML 5 media control bar is missing full screen button

- -

The fullscreen icon is missing from the HTML5 video control bar. To test this go to Mozilla's Mission page.

- -

Warning: If you copy over the Firefox 11 or newer style rules and graphics from the media folder in omni.ja you need to make the following changes in videocontrols.css or the pause and mute buttons will break in Firefox 10. Change the style rules:

- -
 .playButton[paused] {...}
- .muteButton[muted] {...}
- -

To:

- -
 .playButton[paused="true"] {...}
- .muteButton[muted="true"] {...}
- -

Error console warnings

- -

Unknown namespace for videocontrols.css

- -

The error console is reporting the following issue:

- -
Warning: Unknown namespace prefix 'html'.  Ruleset ignored due to bad selector.
-Source file: chrome://global/skin/media/videocontrols.css
- -

The solution to this issue is to add the following name space to the second line of the file right after, and in addition to, the existing @namespace:

- -
@namespace html url("http://www.w3.org/1999/xhtml");
- -

You can generate the error console message by going to Mozilla's Mission page. If you are using the extension Console² you can easily filter out content related messages to see just chrome issues.

- -

Warning: Unknown Property (Obsolete CSS Rules)

- -

-moz-border-radius

- -

Firefox no longer supports -moz-border-radius style properties. Use CSS standard {{cssxref("border-radius")}} properties instead (supported by Firefox since Firefox 4).

- -

-moz-box-shadow

- -

Firefox no longer supports -moz-box-shadow style property. Use CSS standard {{cssxref("box-shadow")}} property instead (supported by Firefox since Firefox 4).

- -

-moz-transition

- -

Firefox no longer supports -moz-transition style property. Use CSS standard {{cssxref("transition")}} property instead (supported by Firefox since Firefox 4).

- -

Resources

- -

AMO Editors Theme Testing Guidelines

- -

When developing and testing your themes, please refer to the theme testing guidelines AMO editors use to review themes. This guide will help you thoroughly test your theme to find and fix issues before you push updates to AMO. This is document is a work in progress so feedback and/or suggestions is appreciated.

- -

MDN CSS Reference

- -

Mozilla's Developer Network maintains a great CSS reference.

- -

AMO Themes Forum

- -

We'd like to encourage you to participate in the AMO (addons.mozilla.org)  forums theme forum.

- -

MozillaZine Themes Forum

- -

MozillaZine is NOT an official Mozilla website, but it does have the largest community of Firefox theme developers and is a great resource. Their theme development forum is here.

- -

MozillaZine Firefox Nightly Theme Changes Thread

- -

MozillaZine's Firefox nightly theme changes thread is a great resource for keeping up to date with the latest changes to the Firefox UI and contains links to the Bugzilla bug reports, which detail what changes were made.

diff --git a/files/ja/themes/index.html b/files/ja/themes/index.html deleted file mode 100644 index 7577a78668..0000000000 --- a/files/ja/themes/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: テーマ -slug: Themes -tags: - - Add-ons - - Look & Feel - - テーマ -translation_of: Mozilla/Add-ons/Themes ---- -

{{AddonSidebar}}

- -

テーマを使用すると、ユーザーインターフェイスのルックアンドフィールを変更し、好みに合わせてパーソナライズすることができます。テーマの作成方法と共有方法を学びましょう！

- -
-
-

ブラウザーテーマ

- -
-
Browser テーマの概念
-
最新のバージョンの Firefox 用のテーマの作成について紹介します
-
AMO ジェネレーターを使う
-
テーマジェネレーターを使って、テーマを作り AMO に投稿します
-
- -

軽量テーマ

- -
-

軽量テーマは非推奨で、もう AMO では受理されません。これからはブラウザーテーマのみが受理されます。

-
-
- -
-

ツールとリソース

- - -
-
diff --git a/files/ja/themes/theme_concepts/index.html b/files/ja/themes/theme_concepts/index.html deleted file mode 100644 index d824827a05..0000000000 --- a/files/ja/themes/theme_concepts/index.html +++ /dev/null @@ -1,235 +0,0 @@ ---- -title: テーマのコンセプト -slug: Themes/Theme_concepts -tags: - - Theme - - add-on -translation_of: Mozilla/Add-ons/Themes/Theme_concepts ---- -
{{AddonSidebar()}}
- -

Firefox の WebExtensions API で開発されたテーマでは、Firefox ブラウザーのヘッダー領域に画像を追加してブラウザーの見た目を変更できます; それはメニューバー、ツールバー、アドレスバー、検索バー、タブの背後の領域です。

- -

こうしたテーマのオプションは静的テーマ (テーマ画像自体はアニメであっても) や、ブラウザー拡張機能での動的テーマにて実装できます。

- -
-

軽量テーマがある場合、軽量テーマが非推奨になる前に自動的に神テーマに変換されるでしょう。テーマを移植する必要はありません。しかし、下記の新機能を使うためには、気軽にテーマを更新してください。

-
- -

静的テーマ

- -

静的テーマはブラウザー拡張機能と同じリソースを使って指定します: manifest.jsonと同一またはサブフォルダに格納したテーマコンポーネントを指定する manifest.json ファイルです。これらのリソースは addons.mozilla.org (AMO) での公開や、自前の配布用にzipで圧縮されます。自己配布については、Signing and distributing your add-onを見てください。

- -

AMOの theme generator を使って静的テーマを作ることもできます。それに加えて、Firefox Color を使って、共有・テーマエクスポートオプションでの、ブラウザーテーマのカスタマイズをプレビューできます。

- -
-

A theme and browser extension functionality cannot be defined in one package, such as including a theme to complement an extension. You can, however, programmatically include a theme in an extension using the Theme API. See Dynamic themes.

-
- -

テーマを定義する

- -

テーマを作るには (その例では簡単な、単一画像のテーマです):

- - - -

静的テーマのアプローチ

- -

Firefoxのヘッダー領域のテーマ変更には2つのアプローチがあります: 単一画像のテーマと複数画像のテーマです。2つを同一にもできますが、別物と扱うほうが簡単です。

- -

単一画像のテーマ

- -

これは基本的で最小のオプションで、次のものを定義します:

- - - -

ヘッダー画像が埋める必要がある領域の高さは最大200pxです。ヘッダー画像の横幅の最大値はFirefoxを実行しているディスプレイの解像度によって決められます。すなわちこれは、次世代の5kモニターのことまで考えると、横幅は最大でも5120pxだと考えておけば良いということになります。ただ、そんな大きな画像を用意するよりも左端が少しずつ薄くなっていき次第に透明になって背景色に溶け込んでいくような画像を用意したほうがいいでしょう。たとえば次のような画像です。
- An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the left edge fading to total transparency.
- 画像は次第に半透明になっていきますが、画像に合わせた背景色を指定しておくことで下の画像のような効果を作り出すことができます。
- A single image theme using the weta.png image

- -

このテーマファイルの詳細についてはGithubのリポジトリのなかにある、 weta_fadeをご覧ください。

- -

もちろん横に長い一枚絵を用意してもなんら問題はありません。

- -

複数画像のテーマ

- -

単一画像のテーマを作る他に、複数画像を使うオプションもあります。これらの画像は、並べ方のオプションとともに、個々にヘッダーに配置されます。

- -

作成したい効果によっては、必須の "theme_frame": に空画像や透過画像を指定して抑制することがあります。空や透過画像を使います。例えば次のように、中央に寄せた画像にして、
- An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the left and right edges fading to total transparency.
- このような効果を作成したい場合
- A single image theme using the additional images option to align an image to the center of the heading and tile it.
- weta 画像を次のように指定して:

- -
"images": {
-  "theme_frame": "empty.png",
-  "additional_backgrounds": [ "weta_for_tiling.png"]
-},
- -

画像の並べ方はこのようにします:

- -
"properties": {
-  "additional_backgrounds_alignment": [ "top" ],
-  "additional_backgrounds_tiling": [ "repeat"  ]
-},
- -

このテーマのセットアップ方法の全容は themes の例のweta_tiledにあります。寄せたり並べたりするオプションの全容は "theme" key descriptionにあります。

- -

あるいは、複数の画像を使うこともできます。例えばオリジナルの weta 画像をヘッダーの左に配置した次の画像と一緒にするして
- An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the right edge fading to total transparency.
- このような効果を作成するには
- A theme using the additional images option to place two mirrored image to the left and right of the browser header.

- -

画像をこのように指定して:

- -
"images": {
-  "theme_frame": "empty.png",
-  "additional_backgrounds": [ "weta.png", "weta-left.png"]
-},
- -

並びをこのように指定します:

- -
"properties": {
-  "additional_backgrounds_alignment": [ "right top" , "left top" ]
-},
- -

このテーマのセットアップ方法の全容は themes 例のweta_mirrorにあります。並びのオプションの全容は "theme" key descriptionにあります。

- -

静的なアニメテーマ

- -

It is possible to create an animated theme using an APNG format image, as in the themes example animated. However, remember that rapid animations, such as the one in the example might be too distracting for a practical theme.

- -

You can also animate themes programmatically, which we discuss in Dynamic themes.

- -

静的テーマを更新する

- -

If your static theme is hosted on AMO, you can upload a new version using the Developer Hub with the following steps:

- -
    -
  1. Visit the product page for your theme through the Developer Hub
    2. -
  2. Select "Upload New Version" on the left
    3. -
  3. Upload your packaged file for validation or modify it using the theme generator
    4. -
- -

For self-hosted static themes, a new version can be updated through AMO by following the above steps or be handled by you through an updateURL or external application updates. A new version will need to be signed through the Developer Hub.

- -
-

 If you are uploading a packaged file, the version number must be higher than the current version number

-
- -

動的テーマ

- -

As an alternative to defining a static theme, you can use the {{WebExtAPIRef("theme")}} API to control the theme used in Firefox from within a browser extension. There are a couple of use cases for this option:

- - - -

And, obviously, you can combine the two and bundle a programmatically controlled theme with your extension.

- -

Using the {{WebExtAPIRef("theme")}} API is straightforward. First, request "theme" permission in the extension's manifest.json file. Next, you build a JSON object containing the same information you would use in a static theme’s manifest.json, Finally, pass the JSON object in a {{WebExtAPIRef("theme.update()")}} call.

- -

例えば、the following code, from the dynamic theme example defines the content for the day and night elements of the dynamic theme:

- -
const themes = {
-  'day': {
-    images: {
-     theme_frame: 'sun.jpg',
-    },
-    colors: {
-     frame: '#CF723F',
-     tab_background_text: '#111',
-    }
-  },
-  'night': {
-    images: {
-     theme_frame: 'moon.jpg',
-    },
-    colors: {
-     frame: '#000',
-     tab_background_text: '#fff',
-    }
-  }
-};
- -

The theme.Theme object is then passed to {{WebExtAPIRef("theme.update()")}} to change the header theme, as in this code snippet from the same example:

- -
function setTheme(theme) {
-  if (currentTheme === theme) {
-    // No point in changing the theme if it has already been set.
-    return;
-  }
-  currentTheme = theme;
-  browser.theme.update(themes[theme]);
-}
- -

Learn more about dynamic themes and see an additional example in the following video:

- -

{{EmbedYouTube("ycckyrUN0AY")}}

- -

- -

If you have not built a browser extension before, check out Your first extension for a step-by-step guide.

- -

クロスブラウザー互換性

- -

主要なブラウザ間でのテーマファイルの互換性はまだいまいちです。Operaブラウザは全く違うアプローチを取っていますし、Edgeブラウザのテーマ開発はまだユーザに公開されていません。

- -

Firefoxの静的テーマとChromeのテーマファイルの間にはまあまあ互換性があって一枚の画像で構成されるヘッダーデザインをFirefoxからChromeへと移植することができます。ただ、Chromeでは"frame": と "tab_background_text": にはRGBカラーしか指定できないことに注意しておく必要があります。

- -

すなわち、Chromeで先のサンプル(weta_fade)を使えるようにするにはmanifest.jsonを次のように書き換える必要があります。

- -
{
-  "manifest_version": 2,
-  "version": "1.0",
-  "name": "<your_theme_name>",
-  "theme": {
-    "images": {
-      "theme_frame": "weta.png"
-    },
-    "colors": {
-      "frame": [ 173 , 176 , 159 ],
-      "tab_background_text": [ 0 , 0 , 0 ]
-    }
-  }
-}
- -

またChromeでは “theme_frame”:に指定した画像は左から並べられることに注意しておいてください。

- -

The basic theme example using the Chrome compatible manifest.json keys, showing the differences in how those keys are implemented.

- -

Chromeとの互換性に関するさらなる詳細は Chrome compatibility をご確認ください。

diff --git "a/files/ja/themes/\350\203\214\346\231\257/index.html" "b/files/ja/themes/\350\203\214\346\231\257/index.html" deleted file mode 100644 index 4ca0d3d521..0000000000 --- "a/files/ja/themes/\350\203\214\346\231\257/index.html" +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: テーマ -slug: Themes/背景 -translation_of: Mozilla/Add-ons/Themes/Lightweight_themes ---- -

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

- -
-

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

- -

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

- -

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

- -

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

- -

- - - -

画像の条件

- - - -

制作のコツ

- - - -

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

- - - -

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

- -

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

- -

- - - -

画像の条件

- - - -

制作のコツ

- - - -

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

- -

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

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

- -

Submit Your Theme Now

- -

その他のチュートリアル

- -

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

-
-- cgit v1.2.3-54-g00ecf