initial commit

4 files changed, 682 insertions, 0 deletions

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
new file mode 100644
index 0000000000..6ad0ba7e2a
--- /dev/null
+++ b/files/ja/themes/common_firefox_theme_issues_and_solutions/index.html
@@ -0,0 +1,302 @@
+---
+title: 一般的なFirefoxテーマに関する問題と解決方法
+slug: Themes/Common_Firefox_theme_issues_and_solutions
+translation_of: Archive/Themes/Common_Firefox_theme_issues_and_solutions
+---
+<p>このページの目的は、テーマ開発者はどのようにして一般的な技術的問題を修正するか、についての話題を提示することです。 これは、AMOエディターの、コピーアンドペーストで一般的なテーマに関する課題のための話題を見直せる"boilerplate"エディターで掲示されている、<a href="https://wiki.mozilla.org/AMO:Editors/EditorGuide/CommonThemeProblems">一般的なテーマに関する問題</a>の説明と連携した文書です。この文書は2012年7月27日に始められ、 時間をかけて全て解決、もしくは一部の問題についての解決方法を書かれることを必要とし続けています。</p>
+
+<h2 id="特定のOSにおける問題">特定のOSにおける問題</h2>
+
+<h3 id="Windows_7">Windows 7</h3>
+
+<h4 id="Windows_7_Aero_missing_right-hand_title_bar_buttons">Windows 7 Aero missing right-hand title bar buttons</h4>
+
+<p>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:<br>
+ <a href="http://forums.mozillazine.org/viewtopic.php?f=18&amp;t=2131121" title="http://forums.mozillazine.org/viewtopic.php?f=18&amp;t=2131121">http://forums.mozillazine.org/viewtopic.php?f=18&amp;t=2131121</a><br>
+ <a href="http://forums.mozillazine.org/viewtopic.php?f=18&amp;t=1953371&amp;start=60" title="http://forums.mozillazine.org/viewtopic.php?f=18&amp;t=1953371&amp;start=60">http://forums.mozillazine.org/viewtopic.php?f=18&amp;t=1953371&amp;start=60</a></p>
+
+<h4 id="Windows_7_Aero_not_going_into_full_screen_mode_properly">Windows 7 Aero not going into full screen mode properly</h4>
+
+<p>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.</p>
+
+<pre class="brush:css;">@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;
+  }
+}</pre>
+
+<p>For more information about this issue please see {{bug(732757)}} and {{bug(732757)}} and <a href="http://forums.mozillazine.org/viewtopic.php?f=18&amp;t=2438459">this MozillaZine thread</a>.</p>
+
+<h3 id="Mac_OS_X">Mac OS X</h3>
+
+<h4 id="OS_X_Lion_missing_toolbar_button_icons">OS X Lion missing toolbar button icons</h4>
+
+<p>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 <code>chrome://browser/skin/lion/</code>:</p>
+
+<ul>
+ <li><code>keyhole-circle.png</code></li>
+ <li><code>Toolbar.png</code></li>
+ <li><code>toolbarbutton-dropmarker.png</code></li>
+ <li><code>tabbrowser/alltabs-box-bkgnd-icon.png</code></li>
+ <li><code>tabview/tabview.png</code></li>
+ <li><code>places/toolbar.png</code></li>
+</ul>
+
+<h3 id="Linux">Linux</h3>
+
+<h4 id="Linux_select_box_fields_are_showing_both_drop_arrow_and_spinner_arrows">Linux select box fields are showing both drop arrow and spinner arrows</h4>
+
+<p>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 <code>-moz-appearance:menulist</code> style rule in <code>chrome://global/skin/menulist.css</code>. Once the offending rule is found, it should be deleted and manual styling used.</p>
+
+<h4 id="App_button_not_styled_on_Linux_but_is_styled_on_Windows">App button not styled on Linux, but is styled on Windows</h4>
+
+<p>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 <code>#appmenu-button</code> also has a comparable reference to <code>#appmenu-toolbar-button</code> in <code>chrome://browser/skin/browser.css</code>. If your Firefox button relies on some button styling from toolbarbuttons.css you'll need to add comparable style rules for <code>#appmenu-toolbar-button</code> in <code>browser.css</code>.</p>
+
+<h2 id="ツールバーとメニュー">ツールバーとメニュー</h2>
+
+<h3 id="Firefox_application_button">Firefox application button</h3>
+
+<h4 id="Application_button_doesn't_change_styling_for_private_browsing_mode">Application button doesn't change styling for private browsing mode</h4>
+
+<p>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.</p>
+
+<h4 id="Text_only_toolbar_buttons_not_aligned_properly">Text only toolbar buttons not aligned properly</h4>
+
+<p>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 <code>[iconsize="small"]</code> without excluding <code>[mode="text"]</code>. The solution usually is to append <code>:not ([mode="text"])</code> to those style rules. For instance use <code>toolbar[iconsize="small"]:not ([mode="text"])</code>. A little experimenting may be required to fully address this issue with your theme.</p>
+
+<h3 id="Address_bar">Address bar</h3>
+
+<h4 id="Identity_box_is_missing_padlock_icons_for_secure_sites">Identity box is missing padlock icons for secure sites</h4>
+
+<p>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 <strong>must</strong> be a padlock. To fix this issue, you need to copy the files <code>chrome://browser/skin/identity-icons-generic.png</code>, <code>chrome://browser/skin/identity-icons-https.png</code> and <code>chrome://browser/skin/identity-icons-https-ev.png</code> to your <code>browser</code> 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 <code>browser.css</code> file and modified as necessary:</p>
+
+<pre class="brush:css;">  /* 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 &gt; #identity-box-inner &gt; #page-proxy-stack &gt; #page-proxy-favicon {
+    list-style-image: url(chrome://browser/skin/identity-icons-https.png);
+  }
+
+  .verifiedIdentity &gt; #identity-box-inner &gt; #page-proxy-stack &gt; #page-proxy-favicon {
+    list-style-image: url(chrome://browser/skin/identity-icons-https-ev.png);
+  }
+
+  #identity-box:hover &gt; #identity-box-inner &gt; #page-proxy-stack &gt; #page-proxy-favicon {
+    -moz-image-region: rect(0, 32px, 16px, 16px);
+  }
+
+  #identity-box:hover:active &gt; #identity-box-inner &gt; #page-proxy-stack &gt; #page-proxy-favicon,
+  #identity-box[open=true] &gt; #identity-box-inner &gt; #page-proxy-stack &gt; #page-proxy-favicon {
+    -moz-image-region: rect(0, 48px, 16px, 32px);
+  }
+
+  #page-proxy-favicon[pageproxystate="invalid"] {
+    opacity: 0.5;
+  }
+</pre>
+
+<p>For more information about identity boxes please see the <a href="https://wiki.mozilla.org/AMO:Editors/EditorGuide/ThemeReviews#Identity_Boxes">identity box section</a> of the AMO editors theme review guidelines</p>
+
+<h4 id="No_visual_clue_for_disabled_url_bars">No visual clue for disabled url bars</h4>
+
+<p>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.</p>
+
+<h3 id="Address_bar_door_hangers">Address bar "door hangers"</h3>
+
+<h4 id="Door_hanger_sync_panel_not_styled">Door hanger sync panel not styled</h4>
+
+<p>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)}}.</p>
+
+<h2 id="About_Pages">"About" Pages</h2>
+
+<h3 id="aboutaddons">about:addons</h3>
+
+<h4 id="Disabled_add-on_Icons_are_not_grey_scale">Disabled add-on Icons are not grey scale</h4>
+
+<p>In Tools &gt; Add-ons, the icons of disabled icons need to be converted to grey scale. To accomplish this copy the file <code>chrome://mozapps/skin/extensions/extensions.svg</code> from the default theme into the <code>mozapps/extensions/</code> folder of your theme and add the following style rule to the CSS file <code>extensions.css</code>:</p>
+
+<pre class="brush:css;">.addon[active="false"] .icon {
+ filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale");
+ opacity:0.3;
+ }</pre>
+
+<h3 id="aboutmemory">about:memory</h3>
+
+<h4 id="Aboutmemory_nodes_do_not_collapse">About:memory nodes do not collapse</h4>
+
+<p>The styling of <code>about:memory</code> 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: <code>chrome://global/content/aboutMemory.css</code>.</p>
+
+<h3 id="aboutpermissions">about:permissions</h3>
+
+<h4 id="Domain_names_don't_line_up_in_aboutpermissions">Domain names don't line up in about:permissions</h4>
+
+<p>The domains on the domain list of <code>about:permissions</code> 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 <code>browser/preferences/aboutPermissions.css</code>:</p>
+
+<pre class="brush:css;">.site-favicon {
+  height: 16px;
+  width: 16px;
+  -moz-margin-end: 4px;
+  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
+}</pre>
+
+<h2 id="Web_developer_tools">Web developer tools</h2>
+
+<h3 id="Web_developer_toolbar">Web developer toolbar</h3>
+
+<p>{to be added}</p>
+
+<h3 id="Web_console">Web console</h3>
+
+<h4 id="Web_console_buttons_do_not_change_appearance">Web console buttons do not change appearance</h4>
+
+<p>On the web console (Tools &gt; Web Developer &gt; 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.</p>
+
+<h4 id="Web_console_close_button_is_missing">Web console close button is missing</h4>
+
+<p>The web console (Tools &gt; Web Developer &gt; Web Console) is missing its close button, which makes it impossible to close.</p>
+
+<h4 id="Web_console_close_button_sprite_mapping_is_messed_up">Web console close button sprite mapping is messed up</h4>
+
+<p>On the web console (Tools &gt; Web Developer &gt; Web Console) the sprite mapping for the close button is messed up.</p>
+
+<h3 id="Style_Inspector">Style Inspector</h3>
+
+<h4 id="Style_inspector_is_missing_button_icons_on_toolbar">Style inspector is missing button icons on toolbar</h4>
+
+<p>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 <code>chrome://browser/skin/devtools/inspect-button.png</code> and <code>chrome://browser/skin/devtools/treepanel-button.png</code> from the default theme into your <code>browser/devetools/</code> folder. You also need to insert the following style rules into the proper place in the <code>browser/browser.css</code> file in your theme theme:</p>
+
+<pre class="brush:css;">/* 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);
+}</pre>
+
+<h4 id="Style_inspector_is_completely_unstyled">Style inspector is completely unstyled</h4>
+
+<p>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 &gt; Web Developer &gt; 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 <code>browser/devtools/</code> from the default theme into your theme and then modify as necessary to achieve the desired look.</p>
+
+<h4 id="Style_inspector's_bread_crumb_buttons_are_hard_to_read">Style inspector's bread crumb buttons are hard to read</h4>
+
+<p>The text labels of breadcrumbs on the style inspector (Tools &gt; Web Developer &gt; 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 <code>chrome://browser/skin/browser.css</code>. The color style for the following statements need to be adjusted:</p>
+
+<pre class="brush:css;">.inspector-breadcrumbs-button {</pre>
+
+<pre class="brush:css;">.inspector-breadcrumbs-button[checked] &gt; .inspector-breadcrumbs-tag {
+</pre>
+
+<pre class="brush:css;">.inspector-breadcrumbs-button[checked] &gt; .inspector-breadcrumbs-id {</pre>
+
+<pre class="brush:css;">.inspector-breadcrumbs-id,
+  .inspector-breadcrumbs-classes {</pre>
+
+<h4 id="Style_inspector_breadcrumb_button_backgrounds_are_not_consistent_between_pre-FF14_and_FF14">Style inspector breadcrumb button backgrounds are not consistent between pre-FF14 and FF14+</h4>
+
+<p>The use of the styling rule <code>fill</code> 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 <code>-moz-border-image</code> 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.</p>
+
+<pre class="brush:css;">.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+ */
+}</pre>
+
+<h3 id="Responsive_design_view">Responsive design view</h3>
+
+<h4 id="Responsive_design_view_is_missing_background_for_unused_area">Responsive design view is missing background for unused area</h4>
+
+<p>The Responsive design view tool (Tools &gt; Web Developer &gt; Responsive Design View) needs background styling for the unused area of the content window.</p>
+
+<h3 id="Debugger">Debugger</h3>
+
+<h4 id="Debugger_toolbar_buttons_are_missing_icons">Debugger toolbar buttons are missing icons</h4>
+
+<p>On the Debugger (Tools &gt; Web Developer &gt; Debugger) the toolbar buttons are missing their icons.</p>
+
+<h2 id="Miscellaneous_issues">Miscellaneous issues</h2>
+
+<h3 id="HTML_5_media_controls">HTML 5 media controls</h3>
+
+<h4 id="HTML_5_media_controls_are_not_styled">HTML 5 media controls are not styled</h4>
+
+<p>The HTML5 video control bar is not styled. Please go to <a href="http://www.mozilla.org/mission/">Mozilla's Mission page</a> 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.</p>
+
+<h4 id="HTML_5_media_control_bar_is_missing_full_screen_button">HTML 5 media control bar is missing full screen button</h4>
+
+<p>The fullscreen icon is missing from the HTML5 video control bar. To test this go to <a href="http://www.mozilla.org/mission/">Mozilla's Mission page</a>.</p>
+
+<p><strong>Warning:</strong> If you copy over the Firefox 11 or newer style rules and graphics from the <code>media</code> folder in <code>omni.ja</code> you need to make the following changes in <code>videocontrols.css</code> or the pause and mute buttons will break in Firefox 10. Change the style rules:</p>
+
+<pre class="brush:css;"> .playButton[paused] {...}
+ .muteButton[muted] {...}</pre>
+
+<p>To:</p>
+
+<pre class="brush:css;"> .playButton[paused="true"] {...}
+ .muteButton[muted="true"] {...}</pre>
+
+<h2 id="Error_console_warnings">Error console warnings</h2>
+
+<h3 id="Unknown_namespace_for_videocontrols.css">Unknown namespace for videocontrols.css</h3>
+
+<p>The error console is reporting the following issue:</p>
+
+<pre>Warning: Unknown namespace prefix 'html'.  Ruleset ignored due to bad selector.
+Source file: chrome://global/skin/media/videocontrols.css</pre>
+
+<p>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 <code>@namespace</code>:</p>
+
+<pre class="brush:css;">@namespace html url("http://www.w3.org/1999/xhtml");</pre>
+
+<p>You can generate the error console message by going to <a href="http://www.mozilla.org/mission/">Mozilla's Mission page</a>. If you are using the <a href="https://addons.mozilla.org/en-US/firefox/addon/console²">extension Console²</a> you can easily filter out content related messages to see just chrome issues.</p>
+
+<h3 id="Warning_Unknown_Property_(Obsolete_CSS_Rules)">Warning: Unknown Property (Obsolete CSS Rules)</h3>
+
+<h4 id="-moz-border-radius">-moz-border-radius</h4>
+
+<p>Firefox no longer supports <code>-moz-border-radius</code> style properties. Use CSS standard {{cssxref("border-radius")}} properties instead (supported by Firefox since Firefox 4).</p>
+
+<h4 id="-moz-box-shadow">-moz-box-shadow</h4>
+
+<p>Firefox no longer supports <code>-moz-box-shadow</code> style property. Use CSS standard {{cssxref("box-shadow")}} property instead (supported by Firefox since Firefox 4).</p>
+
+<h4 id="-moz-transition">-moz-transition</h4>
+
+<p>Firefox no longer supports <code>-moz-transition</code> style property. Use CSS standard {{cssxref("transition")}} property instead (supported by Firefox since Firefox 4).</p>
+
+<h2 id="Resources">Resources</h2>
+
+<h3 id="AMO_Editors_Theme_Testing_Guidelines"><a href="https://wiki.mozilla.org/AMO:Editors/EditorGuide/ThemeReviews" title="https://wiki.mozilla.org/AMO:Editors/EditorGuide/ThemeReviews">AMO Editors Theme Testing Guidelines</a></h3>
+
+<p>When developing and testing your themes, please refer to the <a href="https://wiki.mozilla.org/AMO:Editors/EditorGuide/ThemeReviews" title="https://wiki.mozilla.org/AMO:Editors/EditorGuide/ThemeReviews">theme testing guidelines</a> 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.</p>
+
+<h3 id="MDN_CSS_Reference"><a href="https://developer.mozilla.org/en/CSS/CSS_Reference" title="https://developer.mozilla.org/en/CSS/CSS_Reference">MDN CSS Reference</a></h3>
+
+<p>Mozilla's Developer Network maintains a great <a href="https://developer.mozilla.org/en/CSS/CSS_Reference" title="https://developer.mozilla.org/en/CSS/CSS_Reference">CSS reference</a>.</p>
+
+<h3 id="AMO_Themes_Forum"><a href="https://forums.mozilla.org/addons/viewforum.php?f=8" title="https://forums.mozilla.org/addons/viewforum.php?f=8">AMO Themes Forum</a></h3>
+
+<p>We'd like to encourage you to participate in the AMO (addons.mozilla.org)  forums <a href="https://forums.mozilla.org/addons/viewforum.php?f=8" title="https://forums.mozilla.org/addons/viewforum.php?f=8">theme forum</a>.</p>
+
+<h3 id="MozillaZine_Themes_Forum"><a href="http://forums.mozillazine.org/viewforum.php?f=18" title="http://forums.mozillazine.org/viewforum.php?f=18">MozillaZine Themes Forum</a></h3>
+
+<p>MozillaZine is NOT an official Mozilla website, but it does have the largest community of Firefox theme developers and is a great resource. Their <a href="http://forums.mozillazine.org/viewforum.php?f=18" title="http://forums.mozillazine.org/viewforum.php?f=18">theme development forum is here</a>.</p>
+
+<h3 id="MozillaZine_Firefox_Nightly_Theme_Changes_Thread"><a href="http://forums.mozillazine.org/viewtopic.php?f=18&amp;t=2173163" title="http://forums.mozillazine.org/viewtopic.php?f=18&amp;t=2173163">MozillaZine Firefox Nightly Theme Changes Thread</a></h3>
+
+<p>MozillaZine's <a href="http://forums.mozillazine.org/viewtopic.php?f=18&amp;t=2173163" title="http://forums.mozillazine.org/viewtopic.php?f=18&amp;t=2173163">Firefox nightly theme changes thread</a> 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.</p>
diff --git a/files/ja/themes/index.html b/files/ja/themes/index.html
new file mode 100644
index 0000000000..7577a78668
--- /dev/null
+++ b/files/ja/themes/index.html
@@ -0,0 +1,43 @@
+---
+title: テーマ
+slug: Themes
+tags:
+  - Add-ons
+  - Look & Feel
+  - テーマ
+translation_of: Mozilla/Add-ons/Themes
+---
+<p>{{AddonSidebar}}</p>
+
+<p>テーマを使用すると、ユーザーインターフェイスのルックアンドフィールを変更し、好みに合わせてパーソナライズすることができます。テーマの作成方法と共有方法を学びましょう！</p>
+
+<div class="column-container">
+<div class="column-half">
+<h2 class="Documentation" id="Documentation" name="Documentation">ブラウザーテーマ</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Themes/Theme_concepts">Browser テーマの概念</a></dt>
+ <dd>最新のバージョンの Firefox 用のテーマの作成について紹介します</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/ja/docs/Mozilla/Add-ons/Themes/Using_the_AMO_theme_generator">AMO ジェネレーターを使う</a></dt>
+ <dd>テーマジェネレーターを使って、テーマを作り AMO に投稿します</dd>
+</dl>
+
+<h2 class="Documentation" id="Documentation" name="Documentation">軽量テーマ</h2>
+
+<div class="warning">
+<p>軽量テーマは非推奨で、もう AMO では受理されません。これからはブラウザーテーマのみが受理されます。</p>
+</div>
+</div>
+
+<div class="column-half">
+<h2 id="ツールとリソース">ツールとリソース</h2>
+
+<ul>
+ <li><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">Browser theme manifest.json keys</a></li>
+ <li><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/theme">Browser extensions theme API</a></li>
+ <li><a href="https://discourse.mozilla.org/c/add-ons/themes">Discourse forum</a></li>
+ <li><a href="https://blog.mozilla.org/addons/category/personas/">Theme related blog posts</a></li>
+ <li><a href="/ja/docs/Mozilla/Add-ons/Themes/Obsolete">Archived resources</a></li>
+</ul>
+</div>
+</div>
diff --git a/files/ja/themes/theme_concepts/index.html b/files/ja/themes/theme_concepts/index.html
new file mode 100644
index 0000000000..d824827a05
--- /dev/null
+++ b/files/ja/themes/theme_concepts/index.html
@@ -0,0 +1,235 @@
+---
+title: テーマのコンセプト
+slug: Themes/Theme_concepts
+tags:
+  - Theme
+  - add-on
+translation_of: Mozilla/Add-ons/Themes/Theme_concepts
+---
+<div>{{AddonSidebar()}}</div>
+
+<p>Firefox の <a href="/ja/Add-ons/WebExtensions">WebExtensions API</a> で開発されたテーマでは、Firefox ブラウザーのヘッダー領域に画像を追加してブラウザーの見た目を変更できます; それはメニューバー、ツールバー、アドレスバー、検索バー、タブの背後の領域です。</p>
+
+<p>こうしたテーマのオプションは静的テーマ (テーマ画像自体はアニメであっても) や、ブラウザー拡張機能での動的テーマにて実装できます。</p>
+
+<div class="note">
+<p>軽量テーマがある場合、軽量テーマが非推奨になる前に自動的に神テーマに変換されるでしょう。テーマを移植する必要はありません。しかし、下記の新機能を使うためには、気軽にテーマを更新してください。</p>
+</div>
+
+<h2 id="Static_themes" name="Static_themes">静的テーマ</h2>
+
+<p>静的テーマはブラウザー拡張機能と同じリソースを使って指定します: manifest.jsonと同一またはサブフォルダに格納したテーマコンポーネントを指定する <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> ファイルです。これらのリソースは <a href="https://addons.mozilla.org">addons.mozilla.org</a> (AMO) での公開や、自前の配布用にzipで圧縮されます。自己配布については、<a href="/ja/docs/Mozilla/Add-ons/Distribution">Signing and distributing your add-on</a>を見てください。</p>
+
+<p>AMOの <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/Themes/Using_the_AMO_theme_generator">theme generator</a> を使って静的テーマを作ることもできます。それに加えて、<a href="https://color.firefox.com">Firefox Color</a> を使って、共有・テーマエクスポートオプションでの、ブラウザーテーマのカスタマイズをプレビューできます。</p>
+
+<div class="note">
+<p>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 <a href="#Dynamic_themes">Dynamic themes</a>.</p>
+</div>
+
+<h3 id="Defining_a_theme" name="Defining_a_theme">テーマを定義する</h3>
+
+<p>テーマを作るには (その例では簡単な、単一画像のテーマです):</p>
+
+<ul>
+ <li>コンピューターの適切な場所にフォルダを作ります。</li>
+ <li>そのフォルダにテーマ画像を追加します:
+  <pre>&lt;mytheme&gt;
+ &lt;your_header_image&gt;.&lt;type&gt;</pre>
+ </li>
+ <li>manifest.json というファイルをそのフォルダに作成し、中身は次のようにします:
+  <pre class="brush: json">{
+  "manifest_version": 2,
+  "version": "1.0",
+  "name": "&lt;your_theme_name&gt;",
+  "theme": {
+    "images": {
+      "theme_frame": "&lt;your_header_image&gt;.&lt;type&gt;"
+    },
+    "colors": {
+      "frame": "#FFFFFF",
+      "tab_background_text": "#000"
+    }
+  }
+}
+</pre>
+  ここで:
+
+  <ul>
+   <li><code>"frame":</code> ではテーマのヘッダー領域の背景色です。</li>
+   <li><code>"</code><code>tab_background_text</code><code>":</code> はヘッダー領域のテキスト色です。</li>
+  </ul>
+ </li>
+ <li>テーマをパッケージ化して AMOに投稿するには<a href="/ja/Add-ons/WebExtensions/Publishing_your_WebExtension">この指示に従います</a>。テーマは AMO に投稿するか、自己配布でホストできます。</li>
+</ul>
+
+<h3 id="Static_theme_approaches" name="Static_theme_approaches">静的テーマのアプローチ</h3>
+
+<p>Firefoxのヘッダー領域のテーマ変更には2つのアプローチがあります: 単一画像のテーマと複数画像のテーマです。2つを同一にもできますが、別物と扱うほうが簡単です。</p>
+
+<h4 id="Single_image_themes" name="Single_image_themes">単一画像のテーマ</h4>
+
+<p>これは基本的で最小のオプションで、次のものを定義します:</p>
+
+<ul>
+ <li>ヘッダー領域の右上に置かれる単一の画像</li>
+ <li>ヘッダー内のテキストの色</li>
+</ul>
+
+<p>ヘッダー画像が埋める必要がある領域の高さは最大200pxです。ヘッダー画像の横幅の最大値はFirefoxを実行しているディスプレイの解像度によって決められます。すなわちこれは、次世代の5kモニターのことまで考えると、横幅は最大でも5120pxだと考えておけば良いということになります。ただ、そんな大きな画像を用意するよりも左端が少しずつ薄くなっていき次第に透明になって背景色に溶け込んでいくような画像を用意したほうがいいでしょう。たとえば次のような画像です。<br>
+ <img alt="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." src="https://mdn.mozillademos.org/files/15215/weta.png" style="height: 200px; width: 406px;"><br>
+ 画像は次第に半透明になっていきますが、画像に合わせた背景色を指定しておくことで下の画像のような効果を作り出すことができます。<br>
+ <img alt="A single image theme using the weta.png image" src="https://mdn.mozillademos.org/files/15217/basic_theme.png" style="height: 113px; width: 679px;"></p>
+
+<p>このテーマファイルの詳細についてはGithubの<a href="https://github.com/mdn/webextensions-examples/tree/master/themes">リポジトリ</a>のなかにある、 <a href="https://github.com/mdn/webextensions-examples/tree/master/themes/weta_fade">weta_fade</a>をご覧ください。</p>
+
+<p>もちろん横に長い一枚絵を用意してもなんら問題はありません。</p>
+
+<h4 id="Multiple_image_themes" name="Multiple_image_themes">複数画像のテーマ</h4>
+
+<p>単一画像のテーマを作る他に、複数画像を使うオプションもあります。これらの画像は、並べ方のオプションとともに、個々にヘッダーに配置されます。</p>
+
+<p>作成したい効果によっては、必須の <code>"</code><code>theme_frame</code><code>":</code> に空画像や透過画像を指定して抑制することがあります。空や透過画像を使います。例えば次のように、中央に寄せた画像にして、<br>
+ <img alt="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." src="https://mdn.mozillademos.org/files/15219/weta_for_tiling.png" style="height: 200px; width: 270px;"><br>
+ このような効果を作成したい場合<br>
+ <img alt="A single image theme using the additional images option to align an image to the center of the heading and tile it. " src="https://mdn.mozillademos.org/files/15221/tiled_theme.png" style="height: 113px; width: 679px;"><br>
+ weta 画像を次のように指定して:</p>
+
+<pre class="brush: json" dir="ltr">"images": {
+  "theme_frame": "empty.png",
+  "additional_backgrounds": [ "weta_for_tiling.png"]
+},</pre>
+
+<p dir="ltr">画像の並べ方はこのようにします:</p>
+
+<pre class="brush: json" dir="ltr">"properties": {
+  "additional_backgrounds_alignment": [ "top" ],
+  "additional_backgrounds_tiling": [ "repeat"  ]
+},</pre>
+
+<p>このテーマのセットアップ方法の全容は <a href="https://github.com/mdn/webextensions-examples/tree/master/themes">themes</a> の例の<a href="https://github.com/mdn/webextensions-examples/tree/master/themes/weta_tiled">weta_tiled</a>にあります。寄せたり並べたりするオプションの全容は <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">"theme" key description</a>にあります。</p>
+
+<p>あるいは、複数の画像を使うこともできます。例えばオリジナルの weta 画像をヘッダーの左に配置した次の画像と一緒にするして<br>
+ <img alt="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." src="https://mdn.mozillademos.org/files/15223/weta-left.png" style="height: 200px; width: 406px;"><br>
+ このような効果を作成するには<br>
+ <img alt="A theme using the additional images option to place two mirrored image to the left and right of the browser header." src="https://mdn.mozillademos.org/files/15225/multi_image_theme.png" style="height: 113px; width: 679px;"></p>
+
+<p>画像をこのように指定して:</p>
+
+<pre class="brush: json" dir="ltr">"images": {
+  "theme_frame": "empty.png",
+  "additional_backgrounds": [ "weta.png", "weta-left.png"]
+},</pre>
+
+<p dir="ltr">並びをこのように指定します:</p>
+
+<pre class="brush: json" dir="ltr">"properties": {
+  "additional_backgrounds_alignment": [ "right top" , "left top" ]
+},</pre>
+
+<p>このテーマのセットアップ方法の全容は <a href="https://github.com/mdn/webextensions-examples/tree/master/themes">themes</a> 例の<a href="https://github.com/mdn/webextensions-examples/tree/master/themes/weta_mirror">weta_mirror</a>にあります。並びのオプションの全容は <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">"theme" key description</a>にあります。</p>
+
+<h3 id="Static_animated_themes" name="Static_animated_themes">静的なアニメテーマ</h3>
+
+<p>It is possible to create an animated theme using an APNG format image, as in the <a href="https://github.com/mdn/webextensions-examples/tree/master/themes">themes</a> example <a href="https://github.com/mdn/webextensions-examples/tree/master/themes/animated">animated</a>. However, remember that rapid animations, such as the one in the example might be too distracting for a practical theme.</p>
+
+<p dir="ltr">You can also animate themes programmatically, which we discuss in <a href="#Dynamic_themes">Dynamic themes</a>.</p>
+
+<h3 dir="ltr" id="Updating_static_themes" name="Updating_static_themes">静的テーマを更新する</h3>
+
+<p dir="ltr">If your static theme is hosted on AMO, you can upload a new version using the <a href="https://addons.mozilla.org/en-US/developers/">Developer Hub </a>with the following steps:</p>
+
+<ol dir="ltr">
+ <li>Visit the product page for your theme through the <a href="https://addons.mozilla.org/en-US/developers/">Developer Hub</a></li>
+ <li>Select "Upload New Version" on the left</li>
+ <li>Upload your packaged file for validation or modify it using the theme generator</li>
+</ol>
+
+<p>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.</p>
+
+<div class="note">
+<p> If you are uploading a packaged file, the version number must be higher than the current version number</p>
+</div>
+
+<h2 id="Dynamic_themes" name="Dynamic_themes">動的テーマ</h2>
+
+<p>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:</p>
+
+<ul>
+ <li>To bundle a theme with a browser extension, as an added extra.</li>
+ <li>Create a dynamic theme that changes under programmatic control.</li>
+</ul>
+
+<p>And, obviously, you can combine the two and bundle a programmatically controlled theme with your extension.</p>
+
+<p>Using the {{WebExtAPIRef("theme")}} API is straightforward. First, request "theme"<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions"> permission</a> in the extension's<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json"> manifest.json</a> 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.</p>
+
+<p>例えば、the following code, from the <a href="https://github.com/mdn/webextensions-examples/tree/master/dynamic-theme">dynamic theme example</a> defines the content for the day and night elements of the dynamic theme:</p>
+
+<pre class="brush: js" dir="ltr">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',
+    }
+  }
+};</pre>
+
+<p>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:</p>
+
+<pre class="brush: js" dir="ltr">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]);
+}</pre>
+
+<p dir="ltr">Learn more about dynamic themes and see an additional example in the following video:</p>
+
+<p dir="ltr">{{EmbedYouTube("ycckyrUN0AY")}}</p>
+
+<p dir="ltr"></p>
+
+<p dir="ltr">If you have not built a browser extension before, check out <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">Your first extension</a> for a step-by-step guide.</p>
+
+<h2 id="Cross-browser_compatibility" name="Cross-browser_compatibility">クロスブラウザー互換性</h2>
+
+<p>主要なブラウザ間でのテーマファイルの互換性はまだいまいちです。Operaブラウザは全く違うアプローチを取っていますし、Edgeブラウザのテーマ開発はまだユーザに公開されていません。</p>
+
+<p>Firefoxの静的テーマとChromeのテーマファイルの間にはまあまあ互換性があって一枚の画像で構成されるヘッダーデザインをFirefoxからChromeへと移植することができます。ただ、Chromeでは<code>"frame":</code> と <code>"tab_background_text":</code> にはRGBカラーしか指定できないことに注意しておく必要があります。</p>
+
+<p>すなわち、Chromeで先のサンプル(weta_fade)を使えるようにするにはmanifest.jsonを次のように書き換える必要があります。</p>
+
+<pre class="brush: json" dir="ltr">{
+  "manifest_version": 2,
+  "version": "1.0",
+  "name": "&lt;your_theme_name&gt;",
+  "theme": {
+    "images": {
+      "theme_frame": "weta.png"
+    },
+    "colors": {
+      "frame": [ 173 , 176 , 159 ],
+      "tab_background_text": [ 0 , 0 , 0 ]
+    }
+  }
+}</pre>
+
+<p dir="ltr">またChromeでは <code>“theme_frame”:</code>に指定した画像は左から並べられることに注意しておいてください。</p>
+
+<p dir="ltr"><img alt="The basic theme example using the Chrome compatible manifest.json keys, showing the differences in how those keys are implemented." src="https://mdn.mozillademos.org/files/15227/basic_in_chrome.png" style="height: 113px; width: 679px;"></p>
+
+<p>Chromeとの互換性に関するさらなる詳細は <a href="/ja/Add-ons/WebExtensions/manifest.json/theme#Chrome_compatibility">Chrome compatibility</a> をご確認ください。</p>
diff --git a/files/ja/themes/背景/index.html b/files/ja/themes/背景/index.html
new file mode 100644
index 0000000000..4ca0d3d521
--- /dev/null
+++ b/files/ja/themes/背景/index.html
@@ -0,0 +1,102 @@
+---
+title: テーマ
+slug: Themes/背景
+translation_of: Mozilla/Add-ons/Themes/Lightweight_themes
+---
+<h2 id="オリジナルテーマの作り方">オリジナルテーマの作り方</h2>
+
+<div class="primary auto" id="getting-started">
+<p>ファイヤーフォックスの テーマのスキンは、ヘッダー画像で構成されています。</p>
+
+<p>デザインが完成したら <a href="https://addons.mozilla.org/developers/theme/submit">こちらから登録!</a></p>
+
+<h3 id="テーマのヘッダー画像の作成について">テーマのヘッダー画像の作成について</h3>
+
+<p class="screenshot">ヘッダー画像は、ブラウザの上部の背景としてブラウザの右上隅で固定され、ツールバー、アドレスバー、検索バー、タブの背後に表示されます。</p>
+
+<p class="screenshot"><img alt="" src="https://mdn.mozillademos.org/files/9929/header-step.jpg" style="height: 215px; width: 1059px;"></p>
+
+<ul>
+ <li><a href="https://addons.cdn.mozilla.net/static/img/docs/themes/header.jpg">テーマのヘッダーサンプルを見る場合はこちら</a></li>
+</ul>
+
+<h4 id="画像の条件">画像の条件</h4>
+
+<ul>
+ <li>画像サイズ　<strong>3000px 幅　× 200px 高さ</strong></li>
+ <li>フォーマットは、PNG または JPG</li>
+ <li>画像のファイルサイズは、 300 KB 以下</li>
+</ul>
+
+<h4 id="制作のコツ">制作のコツ</h4>
+
+<ul>
+ <li>ソフトな色合いのものや、グラデーションのほうが見やすくなります。ディテールの細かなものは、ブラウザのUIが見にくくなってしまします。</li>
+ <li><span lang="ja">ツールバーやUI要素が追加された場合は、ヘッダー画像の下の方まで表示されるようになります。</span>.</li>
+ <li>ヘッダー画像の右上を、最も目立たせたいデザインにすることが大切です。—ブラウザの幅が広がると、左側の見える範囲も増加していきます。</li>
+</ul>
+
+<h4 id="オンラインイメージエディタの紹介">オンラインイメージエディタの紹介</h4>
+
+<ul>
+ <li><a href="http://www.pixlr.com">Pixlr</a> — Pixlr は、ブラウザで簡単に使えて、高機能画像処理ソフトです。</li>
+ <li><a href="http://www.photoshop.com">Photoshop</a> — Photoshop® Express は、無料のオンラインエディターです。</li>
+</ul>
+
+<h3 id="テーマのフッター画像の作成について">テーマのフッター画像の作成について</h3>
+
+<p>古いバージョンのファイヤーフォックスや、特定のアドオンをインストールしている場合に、ブラウザの下部の背景としてブラウザの右下隅で固定され、アドオン、検索バーの背後に表示されます。フッター画像はオプションです。</p>
+
+<p class="screenshot"><img alt="" src="https://mdn.mozillademos.org/files/9935/footer-step.jpg" style="height: 56px; width: 1249px;"></p>
+
+<ul>
+ <li><a href="https://addons.cdn.mozilla.net/static/img/docs/themes/footer.jpg">テーマのフッターサンプルを見る場合はこちら</a></li>
+</ul>
+
+<h4 id="画像の条件_2">画像の条件</h4>
+
+<ul>
+ <li>画像サイズ　<strong>3000px 幅　× 100px 高さ</strong></li>
+ <li>フォーマットは、PNG または JPG</li>
+ <li>画像のファイルサイズは、 300 KB 以下</li>
+</ul>
+
+<h4 id="制作のコツ_2">制作のコツ</h4>
+
+<ul>
+ <li>ソフトな色合いのものや、グラデーションのほうが見やすくなります。ディテールの細かなものは、ブラウザのUIが見にくくなってしまします。</li>
+ <li><span lang="ja">検索バーが開いた場合や拡張されている場合は、フッター画像の上の方まで表示されるようになります。</span>.</li>
+ <li>フッター画像の左側を、最も目立たせたいデザインにすることが大切です。—ブラウザの幅が広がると、右側の見える範囲も増加していきます。</li>
+</ul>
+
+<h3 id="作成したテーマの登録方法について">作成したテーマの登録方法について</h3>
+
+<p>作成したテーマの登録は、テーマの登録ページで行います。</p>
+
+<ol class="itemized">
+ <li><strong>テーマの名前</strong> — テーマの名前つけます。既に登録されたテーマと重複する名前はつけることができません。</li>
+ <li><strong>カテゴリとタグの選択</strong> — カテゴリを選択して、作成したテーマに合うタグを入力してください。 カテゴリやタグが作成したテーマと無関係な場合は、登録を拒否される場合がありますので、ご注意ください。</li>
+ <li><strong>テーマの説明</strong> — 作成したテーマの短い説明を書いてください。作成したテーマの説明として適当でない場合は、登録を拒否される場合がありますので、ご注意ください。</li>
+ <li><strong>作成したテーマのライセンスを選択</strong> — 著作権についてのライセンスを決定します。 <a href="http://creativecommons.org/licenses/">著作権のライセンスについて詳しい説明はこちらから.</a>
+  <ul>
+   <li><strong>重要:</strong> テーマの作成に使用する画像の権利を持っているかどうか、必ず確認してください。</li>
+  </ul>
+ </li>
+ <li><strong>画像のアップロード</strong> — 画像のファイルサイズは、300 KB 以下。フォーマットは、 JPG または PNG</li>
+ <li><strong>テキストとタブの色を選択</strong> — 作成したテーマに合うブラウザのタブ背景色と、テキストの色を選択することができます。</li>
+ <li><strong>作成したテーマのプレビュー</strong> — 作成したテーマのプレビューができます。 送信ボタンのイメージにマウスを持っていくだけで、プレビューを見ることができます。</li>
+ <li><strong>作成したテーマを登録</strong> — 問題がなければボタンをクリックしてテーマを登録すれば完了です。プロフィールページで、これまでに作成してきたすべてのテーマを見ることができます。
+  <ul>
+   <li><strong>登録されるためのコツ:</strong> テーマギャラリーに承認されるためには、コンテンツのガイドラインと利用規約を守ってください。</li>
+  </ul>
+ </li>
+</ol>
+
+<p class="screenshot"><img alt="" src="https://mdn.mozillademos.org/files/9933/submission-step.jpg" style="height: 1800px; width: 785px;"></p>
+
+<p class="call-to-submit"><a class="button prominent" href="https://addons.mozilla.org/en-US/developers/theme/submit">Submit Your Theme Now</a></p>
+
+<h2 class="call-to-submit" id="その他のチュートリアル">その他のチュートリアル</h2>
+
+<p><a href="http://vanillaorchidstutorials.blogspot.com/2015/11/mozilla-themes-focal-point-sizing.html">Mozilla Themes のサイズについて</a> - A tutorial on theming with a focus on sizing, by VanillaOrchids.</p>
+</div>