ヘルプ:FandomDesktop/準備ガイド

このヘルプには更新、または翻訳されていないコンテンツがあります。どなたでも翻訳にご協力いただくことができます。

原文 : w:Help:FandomDesktop conversion guide。

FandomDesktop準備ガイドは、古いWikiのOasisやHydraのスキンから、現在のFandomDesktopのスキンに変換するためのクイックリファレンスとして作成されたものです。

メモ：管理ダッシュボードは、FandomDesktopのGamepedia wikiで有効になっており、Special：AdminDashboardからアクセスできます。

新しいcustom CSS / JS files[]

MediaWiki:Fandomdesktop.css
MediaWiki:Fandomdesktop.js

MediaWiki：Wikia.cssもMediaWiki：Wikia.jsもFandomDesktopにロードされません。すべてのカスタムコーディングは、上記の新しいスタイルシートに移動する必要があります。

GPとFandom wikisの両方で変更になる機能[]

Tabber[]

タバーコンテナ用の .tabber クラスは残ります。その他のクラス名はすべて削除され、Fandom Design System のクラスである、タブ用の wds-tabs__tab とタブのコンテンツ用の wds-tabs__content に置き換えられます。

基盤レイアウト[]

GP wikiからの移行
- ページ全体のコンテナ（ナビゲーション付き）#pageWrapperは、.resizable-containerクラスでアクセスできるようになりましたが、ナビゲーションはページの上部に表示されます。
- 現在、メインページのラッパーには、コンテンツコンテナと右レールを含む.pageクラスがあります（右レールが存在する場合、この要素には.has-right-railクラスも含まれます）
- ページヘッダー、コンテンツ、ページフッターを含む.page__mainクラスを持つmainコンテンツコンテナがあります。
- 記事コンテンツの#contentや.mw-bodyに、#content idや.page-contentクラスでアクセスできるようになりました。
- ページヘッダーは、.page-headerクラスでアクセスできます。
- ページフッターは、.page-footerクラスでアクセスできます。
- 右レールは#WikiaRailWrapper idまたは.WikiaRailクラスでアクセスできます。
Fandom wikiからの移行
- ページ全体のコンテナ（ナビゲーション付き）.WikiaPageは、.resizable-containerクラスでアクセスできるようになりました。
- メインページのラッパー（右レール付き） .WikiaPageContentWrapperは、.pageクラスでアクセスできるようになりました（右レールが存在する場合、この要素には.has-right-railクラスも含まれます）この要素には、コンテンツコンテナと右レールが含まれています。
- メインコンテンツコンテナ #WikiaMainContentContainerまたは.WikiaMainContentContainerは、.page__mainクラスからアクセスできるようになりました。このコンテナには、ページのヘッダー、コンテンツ、ページのフッターが含まれます。
- 記事の内容 #content や .WikiaArticle に #content id や .page-content クラスでアクセスできるようになりました。
- ページヘッダ（#PageHeaderまたは.page-headerでアクセス）は、.page-headerクラスでアクセスできるようになりました。
- ページフッターは、.page-footerクラスでアクセスできます。
- 右レール（#WikiaRailWrapper または .WikiaRail でアクセス）は、.right-rail-wrapper クラスでアクセスできるようになりました。

Portable infobox[]

視覚的な変化[]

border around infobox container is added by default

title’s (.pi-title) and headers' (.pi-header) default background is set to accent color (--theme-accent-color) and font color is calculated dynamically and set to --theme-accent-label-color. For some customizations this may cause the header’s (or title’s) label to be illegible.

Recommended solution:

.portable-infobox {
  --pi-secondary-background--label: #CUSTOM_HEADER_FONT_COLOR;
}

Changed markup for tabs[]

HTML markup for panel’s tabs and image collection’s tabs has changed completely, which means that no current customizations for the tabs is applied or supported.

Old markup for image-colection (simplified):

<div class="pi-image-collection">
  <ul class="pi-image-collection-tabs">
    <li class="pi-tab-link pi-item-spacing current">
      <span class="pi-tab-label">
        CAPTION
      </span>
    </li>
  </ul>

  <div class="pi-image-collection-tab-content current">
    <figure class="pi-item pi-image">
      <a class="image image-thumbnail">
        IMAGE OR VIDEO
      </a>
    </figure>
  </div>
</div>

New markup for image-collection (simplified):

<div class="pi-image-collection wds-tabber">
  <div class="wds-tabs__wrapper">
    <ul class="wds-tabs"> 
      <li class="wds-tabs__tab wds-is-current">
        <span class="wds-tabs__tab-label">
          CAPTION
        </span>
      </li>
    </ul>
  </div>
  <div class="wds-tab__content wds-is-current">
    <figure class="pi-item pi-image">
      <a class="image image-thumbnail">
        IMAGE OR VIDEO
      </a>
    </figure>
  </div>
</div>

Old markup for panels (simplified):

<section class="pi-item pi-panel pi-border-color">
  HEADER
  <div class="pi-panel-scroll-wrapper">
    <ul class="pi-section-navigation">
      <li class="pi-section-tab pi-section-active">
        <div class="pi-section-label">
          LABEL
        </div>
      </li>
    </ul>
  </div>
  <div class="pi-section-contents">
    <div class="pi-section-content pi-section-active">
      CONTENT
    </div>
  </div>
</section>

New markup for panels (simplified):

<section class="pi-item pi-panel pi-border-color wds-tabber">
  HEADER
  <div class="wds-tabs__wrapper">
    <ul class="wds-tabs">
      <li class="wds-tabs__tab wds-is-current">
        <div class="wds-tabs__tab-label">
          LABEL
        </div>
      </li>
    </ul>
  </div>
  <div class="wds-tab__content wds-is-current">
    CONTENT
  </div>
</section>

CSS variables available for Portable Infobox customization[]

.portable-infobox {
  --pi-background: /* MAIN BACKGROUND COLOR */
  --pi-secondary-background: /* TITLE AND HEADERS BACKGROUND COLOR */
  --pi-secondary-background--label: /* TITLE AND HEADERS FONT COLOR */
  --pi-border-color: /* BORDER COLOR */
}

Community background image[]

The new theme designer will provide some extended possibilities for customizing the appearance of the community background image. However, if you’re willing to port your existing CSS/JS customizations of the background there’s a new class name: .fandom-community-header__background.

Features that will change in comparison to Oasis[]

Galleries[]

Galleries on FandomDesktop will be based on the MediaWiki native gallery solution.

See https://www.mediawiki.org/wiki/Help:Images#Gallery_syntax.

There are two major changes in gallery syntax:

To determine gallery style you'll need to use mode instead of type property. In order to ensure backward compatibility with all the galleries created on Oasis, type property will still be supported after the FandomDesktop rollout. However, it is encouraged to create new galleries using the new mode property.
Support for certain gallery properties will be discontinued. See below for full list:

<gallery> element attributes[]

Traditional
type	Temporarily supported	Should be replaced with the equivalent "mode" attribute.
widths	Supported
columns	Not supported	Can be replaced with equivalent "perrow" attribute.
perrow	Supported
position	Not supported
spacing	Not supported
orientation	Not supported
captionposition	Not supported	captionposition="within" could be replaced with similar-looking mode="packed-overlay"
captionalign	Not supported
captiontextcolor	Not supported
bordersize	Not supported
bordercolor	Not supported
hideaddbutton	Not supported
caption	Supported
Slideshow
widths	Supported
crop	Not supported
showrecentuploads	Not supported
position	Not supported
Slider
orientation	Supported

Additional notes:

Fandom gallery images are "frameless" by default, whereas MW gallery images are displayed in a thick frame. In order to preserve the same looks of a gallery, it has to be either handled by custom styling or mode="nolines" has to be added to all galleries as part of the migration.

Features that will change in comparison to Hydra/HydraDark[]

Galleries[]

New gallery mode - slider[]

Gamepedia communities will now have a new slider gallery mode available.

Usage:

<gallery mode="slider">
Image.jpg
Image2.jpg
...
</gallery>

Slider gallery accepts one additional attribute named orientation, which accepts values bottom (default) or right and determines the position of the slider navigation.

テーマ変数[]

FandomDesktopスキンでは、ユーザーはテーマカラーを表す変数にアクセスできるようになります。これらの変数は、CSSでアクセスできるようになります。

16進数値の例: #ffffff

RGB値の例: 0,0,0

変数名	説明
`--theme-accent-color`	ThemeDesignerから取得したアクセントカラー。16進数値として表示されます。
`--theme-accent-color--hover`	ThemeDesignerから取得したアクセントカラー。テーマに応じて20％濃くまたは薄くしたもの。16進数値として表示されます。
`--theme-accent-color--rgb`	ThemeDesignerから取得したアクセントカラーで、RGB値として表示されます。
`--theme-accent-dynamic-color-1`	dynamic-1 color for accent. See Dynamic Colors section for more info.
`--theme-accent-dynamic-color-1--rgb`	dynamic-1 color rgb components for accent. See Dynamic Colors section for more info.
`--theme-accent-dynamic-color-2`	dynamic-2 color for accent. See Dynamic Colors section for more info.
`--theme-accent-dynamic-color-2--rgb`	dynamic-2 color rgb components for accent. See Dynamic Colors section for more info.
`--theme-accent-label-color`	Accessible text color to use with --theme-accent-color background, presented as hex value
`--theme-alert-color`	Alert color (red-ish), adjusted for proper contrast comparing with page background, presented as hex value
`--theme-alert-color--hover`	Alert color (red-ish) adjusted for proper contrast comparing with page background, darkened or lightened by 20%, depending on theme, presented as hex value
`--theme-alert-color--rgb`	Alert color (red-ish), adjusted for proper contrast comparing with page background, presented as group of Red, Green, Blue values
`--theme-alert-label`	Accessible text color to use with --theme-alert-color background, presented as hex value
`--theme-body-background-color`	Body background color taken from ThemeDesigner, presented as hex value
`--theme-body-background-image`	URL to background image, taken from ThemeDesigner, presented as string
`--theme-body-dynamic-color-1`	dynamic-1 color for body background. See Dynamic Colors section for more info.
`--theme-body-dynamic-color-1--rgb`	dynamic-1 color rgb components for body background. See Dynamic Colors section for more info.
`--theme-body-dynamic-color-2`	dynamic-2 color for body background. See Dynamic Colors section for more info.
`--theme-body-dynamic-color-2--rgb`	dynamic-2 color rgb components for body background. See Dynamic Colors section for more info.
`--theme-body-text-color`	Accessible text color to use with --body-background-color background, presented as hex value
`--theme-body-text-color--hover`	Accessible text color to use with --body-background-color background, darkened or lightened by 20%, depending on theme, presented as hex value
`--theme-border-color`	Accessible border color calculated based on --theme-page-background-color, presented as hex value
`--theme-border-color--rgb`	Accessible border color calculated based on --theme-page-background-color, presented as group of Red, Green, Blue values
`--theme-link-color`	Link color taken from ThemeDesigner, presented as hex value
`--theme-link-color--hover`	Link color taken from ThemeDesigner, darkened or lightened by 20%, depending on theme, presented as hex value
`--theme-link-color--rgb`	Link color taken from ThemeDesigner, presented as group of Red, Green, Blue values
`--theme-link-dynamic-color-1`	dynamic-1 color for links. See Dynamic Colors section for more info.
`--theme-link-dynamic-color-1--rgb`	dynamic-1 color rgb components for links. See Dynamic Colors section for more info.
`--theme-link-dynamic-color-2`	dynamic-2 color for links. See Dynamic Colors section for more info.
`--theme-link-dynamic-color-2--rgb`	dynamic-2 color rgb components for links. See Dynamic Colors section for more info.
`--theme-link-label-color`	Accessible text color to use with --theme-link-color background, presented as hex value
`--theme-message-color`	Message color (blue-ish), adjusted for proper contrast comparing with page background, presented as hex value
`--theme-message-label`	Accessible text color to use with --theme-message-color background, presented as hex value
`--theme-page-accent-mix-color`	Mix of a page background color and accent color in the 50-50 ratio
`--theme-page-background-color`	Page (article) background color taken from ThemeDesigner, presented as hex value
`--theme-page-background-color--rgb`	Page (article) background color taken from ThemeDesigner, presented as group of Red, Green, Blue values
`--theme-page-background-color--secondary`	Secondary color calculated based on --theme-page-background-color, slightly mixed with white or black color, depending on theme, presented as hex value
`--theme-page-dynamic-color-1`	dynamic-1 color for page (article) background. See Dynamic Colors section for more info.
`--theme-page-dynamic-color-1--rgb`	dynamic-1 color rgb components for page (article) background. See Dynamic Colors section for more info.
`--theme-page-dynamic-color-2`	dynamic-2 color for page (article) background. See Dynamic Colors section for more info.
`--theme-page-dynamic-color-2--rgb`	dynamic-2 color rgb components for page (article) background. See Dynamic Colors section for more info.
`--theme-page-text-color`	Text color for a page. Alias for --theme-page-dynamic-color-2.
`--theme-page-text-color--hover`	Hover state of a page text color
`--theme-page-text-color--rgb`	RGB components of page text color
`--theme-page-text-mix-color`	Mix of a page background color and page dynamic-2 color in the 50-50 ratio
`--theme-sticky-nav-background-color`	Sticky nav background color. This color can be set inside the Theme Designer.
`--theme-sticky-nav-dynamic-color-1`	dynamic-1 color for sticky nav background. See Dynamic Colors section for more info.
`--theme-sticky-nav-dynamic-color-1--rgb`	dynamic-1 color rgb components for sticky nav background. See Dynamic Colors section for more info.
`--theme-sticky-nav-dynamic-color-2`	dynamic-2 color for sticky nav background. See Dynamic Colors section for more info.
`--theme-sticky-nav-dynamic-color-2--rgb`	dynamic-2 color rgb components for sticky nav background. See Dynamic Colors section for more info.
`--theme-sticky-nav-text-color`	Text color for sticky nav. Alias for --theme-sticky-nav-dynamic-color-1
`--theme-sticky-nav-text-color--hover`	Hover state of a sticky nav text color
`--theme-success-color`	Success color (green-ish), adjusted for proper contrast comparing with page background, presented as hex value
`--theme-success-color--rgb`	Success color (green-ish), adjusted for proper contrast comparing with page background, presented as group of Red, Green, Blue values
`--theme-success-label`	Accessible text color to use with --theme-success-color background, presented as hex value
`--theme-warning-color`	Warning color (yellow-ish), adjusted for proper contrast comparing with page background, presented as hex value
`--theme-warning-label`	Accessible text color to use with --theme-warning-color background, presented as hex value

ダイナミックカラー[]

Dynamic colors are established on the basis of their background. They are calculated to reach the best contrast ratio possible.

dynamic-color-1 is fandom-black (#0E191A) for light backgrounds and white (#FFFFFF) for dark backgrounds.
dynamic-color-2 is dark grey (#3A3A3A) for light backgrounds and light grey (#E6E6E6) for dark backgrounds.

Variable aliases[]

Variable name	Alias for
--theme-accent-label-color	--theme-accent-dynamic-color-1
--theme-body-text-color	--theme-body-dynamic-color-1
--theme-link-label-color	--theme-link-dynamic-color-1
--theme-page-text-color	--theme-page-dynamic-color-2
--theme-sticky-nav-text-color	--theme-sticky-nav-dynamic-color-1

Theme-specific selectors[]

You can also specify each theme for the instances where you need different behaviour based purely on the theme choice.

.theme-fandomdesktop-light is for elements that are themed for the light theme.
.theme-fandomdesktop-dark is for elements that are themed for the dark theme.

その他のヘルプとフィードバック[]

ヘルプ:コンテンツでは、他のヘルプページを閲覧、検索することができます。
最新の情報やヘルプについては、コミュニティセントラルをご覧ください。
この記事で不明確な点や、曖昧な点がございましたら、Fandomとの連絡方法をご確認ください。
このヘルプはコミュニティセントラル内にて管理されています。

ヘルプ:FandomDesktop/準備ガイド

目次

新しいcustom CSS / JS files[]

GPとFandom wikisの両方で変更になる機能[]

Tabber[]

基盤レイアウト[]

Portable infobox[]

視覚的な変化[]

Changed markup for tabs[]

CSS variables available for Portable Infobox customization[]

Community background image[]

Features that will change in comparison to Oasis[]

Galleries[]

<gallery> element attributes[]

Features that will change in comparison to Hydra/HydraDark[]

Galleries[]

New gallery mode - slider[]

テーマ変数[]

ダイナミックカラー[]

Variable aliases[]

Theme-specific selectors[]

関連情報[]

その他のヘルプとフィードバック[]