「ヘルプ:インフォボックス」を編集中

{{Untranslated help|w:Help:Infoboxes}}
{{Extension infobox
| name    = PortableInfobox
| image   = 90210-infobox-light.png
| caption = A sample infobox
| author  = Fandom, Inc.
| link    = 
*[https://github.com/Wikia/unified-platform/tree/master/extensions/fandom/PortableInfobox GitHub]
*[[mw:Extension:PortableInfobox|Mediawiki.org]]
| desc    = <p>{{int:portable-infobox-desc}}</p>
| default = yes
}}
{{Extension infobox
| name    = Europa Infobox Theme
| author  = Fandom, Inc.
| link    = 
| desc    = <p>{{int:Wikifeatures-feature-description-wgEnablePortableInfoboxEuropaTheme}}</p>
| default = yes
| feature = yes
}}
{{Uni-vid|Wikia ユニバーシティ インフォボックスの使い方}}
{{Uni-vid|Fandom University - Customizing_Infobox_Templates}}

'''インフォボックス'''はファクトシートや雑誌の囲み記事のようなもので、ページのトピックの概要をまとめて紹介する形式になっており、 重要なポイントが一目でわかるよう読みやすく整理されています。 インフォボックスは通常、コミュニティ内で統一されるよう[[ヘルプ:テンプレート|テンプレート]]を使って作成します。

Fandomでは現在、さまざまな端末でインフォボックスが適切に表示されるよう、インフォボックスをコード化するための新しい方法を開発しています（詳細については下記を参照）が記事内での使い方は変わりません。しかしテンプレートのページが変化します。[[ヘルプ:クラシック・インフォボックス|クラシック・インフォボックス]]からの移行のヘルプは[[ヘルプ:インフォボックスの移行]]をご覧ください。
__TOC__

== インフォボックスの使い方 ==
[[ファイル:JA_selecting_infobox_from_VE.png|thumb|150px|ビジュアルエディタのインフォボックス挿入]]
インフォボックスは他のテンプレートと同様の方法で記事に追加することができ、[[ヘルプ:編集|エディタ]]に組み込まれているテンプレートツールか、ソースモードを使用します。[[ヘルプ:ビジュアルエディタ|ビジュアルエディタ]]を使用すれば「挿入」ボタンから簡単にポータブルインフォボックスを挿入できます。

ソースモードを使用する場合は、通常、まずテンプレートのドキュメント（たいていはテンプレートのページの下の方にあります）から構文をコピーして記事の中に貼り付け、イコールの記号（=）の後を適切な情報に変更します。 たとえば、次のようにします。

<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
{{infobox character
| title = デイジー
| image = Example.jpg
| imagecaption = 風に吹かれるデイジー
| position = 最上位の花
| age = 2か月
| status = 有効
| height = 5インチ
| weight = 20グラム
}}
</syntaxhighlight>

ポータブルインフォボックスの加え方は他のテンプレートと同じです。しかしテンプレートページのマークアップが少々異なります。下記を参照。

== インフォボックスの作成 ==
[[ファイル:Tutorialinfobox.png|thumb|180px|''冬がやってくる'']]
最初に好きな名前（例: テンプレート:ExampleInfobox）で新しいテンプレートを作成します。かつてはtablesやdivsを使用しましたが今はinfoboxタグを使用します。まずは、タイトルと画像を含む基本的なインフォボックスを作成してみましょう。

<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
<infobox layout="stacked">
  <title source="name"><default>{{PAGENAME}}</default></title>
  <image source="image" />
</infobox>
</syntaxhighlight>

このWikiテキストでは、'''title'''と'''image'''の要素に''name''と''image''の変数が使用されることを示しています。 さらに、'''default'''タグを指定して、記事の名前や画像などが指定されていない場合にその値を使用することも できます。.

次に、追加情報を含むあと2つのフィールドを指定します。まず、1つ目のフィールドを指定してみましょう。

<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
<data source="season"><label>シーズン</label></data>
</syntaxhighlight>

次にsourceを''first''、labelを''first seen''と設定した最後の部分を入力すると、次のようになります。

<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
<infobox layout="stacked">
  <title source="name"><default>{{PAGENAME}}</default></title>
  <image source="image" />
  <data source="season"><label>シーズン</label></data>
  <data source="first"><label>第一場面</label></data>
</infobox>
</syntaxhighlight>

これで、記事内でテンプレートを使用してインフォボックスを記事に表示することができます。

<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
{{Example
 |name   = エダード・スターク
 |image  = eddard.jpg
 |season = [[シーズン1|1]]
 |first  = "[[冬がやってくる]]"
}}
</syntaxhighlight>

== スタイリングと表示 ==
上記のようなコードを使用したインフォボックスは、[[ヘルプ:テーマデザイナー|コミュニティのテーマ]]に合わせて自動的にデザインされます。 また、変数が指定されていない行は、表示されません（'default'タグを使用していない場合）。

=== レイアウトのオプション ===
インフォボックスには、次の2つのレイアウトオプションがあります。

{| class="article-table" style="width:100%;"
|-
! デフォルト（table）のレイアウト
! 積み重ね式（stacked）レイアウト
|-
| タグで指定するラベルが値の左側に表示されます
| タグで指定するラベルが値の上に表示されます
|-
|
<syntaxhighlight lang="xml" style="margin:0;">
<infobox>
   ...
</infobox>
</syntaxhighlight>
|
<syntaxhighlight lang="xml" style="margin:0;">
<infobox layout="stacked">
   ...
</infobox>
</syntaxhighlight>
|-
|
[[ファイル:Screen Shot 2015-06-16 at 12.12.17.png|thumb|center|150px|デフォルト（table）のレイアウト]]
|
[[ファイル:Screen Shot 2015-06-16 at 12.10.54.png|thumb|center|150px|積み重ね式（stacked）レイアウト]]
|}

=== テーマのカスタム設定 ===
デフォルトインフォボックスのテーマは、'''infobox'''タグの'''theme'''または'''theme-source'''属性を使って上書きすることができます。これにより、ローカル・コミュニティの[[ヘルプ:CSSとJavaScriptのカスタマイゼーション|CSS]]からインフォボックスをデザインできるようになります。

* インフォボックスのカスタムCSSクラスを指定するには'''theme'''属性を使用します
* '''theme-source'''属性を使用すると、テンプレート・パラメータからCSSクラスを変更することができます

インフォボックス・タグ内で両方の属性を使用した場合は、'''theme'''属性がデフォルトとして扱われます。また、'''theme'''と'''theme-source'''の値となる属性内のスペースはハイフンマイナス(-)に変換されるため、これを使用して追加できるのは、一つのクラスだけとなります。

インフォボックスのテーマやより細かいカスタマイズについて詳しくは、'''[[ヘルプ:ポータブルインフォボックス/CSS]]'''をご覧ください。'

===アクセント・カラー===
アクセント・カラー機能を使うと、タイトルやヘッダーの背景、テキストの色をインフォボックスごとに変更することができます。'''theme-source'''と同じく、カラーも'''accent-color-source'''（背景）や'''accent-color-text-source'''（テキスト）というテンプレート・パラメーターで設定することが可能です。

例えば、インフォボックス・テンプレートを'''accent-color-source="bkg"'''に設定し、記事中のインフォボックスで'''bkg = #FFF'''と書き込むと、ヘッダーの背景とタイトルの色が#FFF（16進数カラーコードで白）になります。色の上書きは、#FFFや#FFFFFFといったように16進数のフォーマットで記述してください。

アクセントカラーはデフォルトだけでなくカスタム設定のテーマより優先されます。

また、アクセントカラーのデフォルト値を設定することもできます。'''accent-color-default="#FFF"'''と設定することで全てのタイトルとヘッダー背景が白になり、同様に'''accent-color-text-default="#000000"'''とすればテキストが黒に設定されます。
== 複数の画像と動画の挿入 ==
[[ファイル:Infoboxtabs.png|thumb|150px|タブのついた画像]]
インフォボックスの一か所で複数の画像を使用する場合<code>&lt;gallery></code>タグを加えます。

<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
{{Example
 |name   = Eddard Stark
 |image  = <gallery>
Eddard 1.jpg|Eddard on a horse
Eddard 2.jpg|Eddard in a house
Eddard 3.jpg|Eddard by a hearse
</gallery>
}}
</syntaxhighlight>

この機能のさらなる情報については[[w:c:community:Thread:935527|英語版のスレッド]]を参照。

インフォボックス内に動画を埋め込みたいという場合には、<image>タグを使用して、画像の時と同じような作業での作成が可能です。画像の代わりに動画をインフォボックスに追加すると、動画のサムネイルとプレイアイコン、そして動画の長さがインフォボックス内に表示され、クリックすると動画プレイヤーがポップアップします。複数の動画を埋め込みたい場合には、複数の<image>タグを使用します。

== 高度な使用法 ==
[[ファイル:Advancedinfobox.png|thumb|200px|グループ化]]
基本的なインフォボックスを作成したら、さらに高度なフィールドを使用する方法についても学んでみましょう。このセクションでは、右のようなインフォボックスを作成します。

タイトル欄と画像欄の前に3つのデータフィールドがあります。 このように、タイトル欄がいつも最初のフィールドである必要はありません。ただし、タイトル欄を使用できるのは1つのインフォボックスにつき1回のみです。

<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
<infobox layout="stacked">
  <data source="prev"><label>Previous</label></data>
  <data source="conc"><label>Concurrent</label></data>
  <data source="next"><label>Next</label></data>
  <title source="name" />
  <image source="image" />
</infobox>
</syntaxhighlight>

<div style=margin-top:1em;> </div>

=== groupタグの中で情報をグループ化する ===
次のフィールドでは、複数のフィールドを1つのグループにまとめて、グループごとに見出しを付けることができます。 宣言したフィールドに値を指定しないと、そのフィールドは表示されませんので、ご注意ください。 このルールはgroupタグ内の項目でも同様です。特定のグループ内のフィールド（見出しタグ以外）のどれにも値が指定されていない場合、グループ全体が表示されません。

<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
<infobox layout="stacked">
  <data source="prev"><label>Previous</label></data>
  <data source="conc"><label>Concurrent</label></data>
  <data source="next"><label>Next</label></data>
  <title source="name" />
  <image source="image" />
  <group>
    <header>Details</header>
    <data source="conflict"><label>Conflict</label></data>
    <data source="date"><label>Date</label></data>
    <data source="place"><label>Place</label></data>
    <data source="result"><label>Outcome</label></data>
  </group>
</infobox>
</syntaxhighlight>

<div style=margin-top:1em;> </div>

=== グループタグの並列レイアウト ===
[[ファイル:Screen_Shot_2015-06-16_at_13.27.08.png|thumb|200px|並列レイアウト]]
グループタグには、すべてのコンテンツが横1列に隣合わせで表示される並列レイアウトの指定を含めることができます。これには、グループタグに'''layout="horizontal"'''属性を追加します。

<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
<group layout="horizontal">
   ...
</group>
</syntaxhighlight>

<div style=margin-top:1em;> </div>

===グループタグのスマートレイアウト===
“スマート”レイアウトは並列レイアウトに似た機能ですが、同じグループに属すデータフィールドを改行することができます。1行目のデータフィールドの個数が制限数を超えると、次のフィールドは下の行に移ります。フィールド内のアイテムは横幅に合わせて調節されます。

スマートグループを使うには、'''row-items="3"'''（数字は行の制限数）と書き込んでください。スマートグループ内のアイテムはデフォルトで並列レイアウトになっているため、スマートグループを使う際にこの属性を追加する必要はありません。また、個別の<nowiki><data></nowiki>タグに'''layout="default"'''を追加すれば、スマートグループの中で垂直と並列のレイアウトを組み合わせることができます。

特定のフィールドだけスペースを広く取りたい場合、<nowiki><data></nowiki>タグに'''span="2"'''と設定すれば、フィールドが数値の分だけ（この場合2つ分）広くなります。

<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
<infobox>
  <title source="name" />
  <image source="image" />
  <group row-items="3">
    <header>Details</header>
    <data source="conflict"><label>Conflict</label></data>
    <data source="date"><label>Date</label></data>
    <data source="place"><label>Place</label></data>
    <data source="result" layout="default"><label>Outcome</label></data>
  </group>
</infobox>
</syntaxhighlight>

<div style=margin-top:1em;> </div>
=== すべてのグループ要素の表示を強制する ===
'''show="incomplete"'''を使用して、'''空白'''の値があってもグループ要素の'''すべて'''が表示されるよう強制することができます。ただし、''すべて''が空の場合は、そのグループは表示されません。

<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
<group layout="horizontal" show="incomplete">
  <header>Combatants</header>
  <data source="side1" />
  <data source="side2" />
</group>
</syntaxhighlight>

上記のすべてを組み合わせると、次のようなテンプレートコードになります。

<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
<infobox layout="stacked">
  <data source="prev"><label>Previous</label></data>
  <data source="conc"><label>Concurrent</label></data>
  <data source="next"><label>Next</label></data>
  <title source="name" />
  <image source="image" />
  <group>
    <header>Details</header>
    <data source="conflict"><label>Conflict</label></data>
    <data source="date"><label>Date</label></data>
    <data source="place"><label>Place</label></data>
    <data source="result"><label>Outcome</label></data>
  </group>
  <group layout="horizontal" show="incomplete">
    <header>Combatants</header>
    <data source="side1" />
    <data source="side2" />
  </group>
  <group layout="horizontal" show="incomplete">
    <header>Commanders</header>
    <data source="commanders1" />
    <data source="commanders2" />
  </group>
  <group layout="horizontal" show="incomplete">
    <header>Strength</header>
    <data source="forces1" />
    <data source="forces2" />
  </group>
  <group layout="horizontal" show="incomplete">
    <header>Casualties</header>
    <data source="casual1" />
    <data source="casual2" />
  </group>
  <data source="civilian"><label>Civilian casualties</label></data>
</infobox>
</syntaxhighlight>

これを記事の中で使用すればインフォボックスの完成です。

<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
{{Battle
|prev = [[フェアアイルの戦い]]
|conc = [[オールド・ウィックの包囲]]
|next = [[パイクの包囲]]
|name = [[グレート・ウィックの包囲]]
|image = Stannis Great Wyk.png
|conflict = [[グレイジョイの反乱]]
|date = 289 AL
|place = [[鉄諸島]]、[[グレートウィック]]
|result = [[鉄の玉座]]獲得
|side1 = [[ファイル:Greyjoy mini shield.png|20px|right|link=House Greyjoy]] [[グレジョイ家]]
|side2 = [[ファイル:Baratheon mini shield.png|20px|right|link=House Baratheon]] [[鉄の玉座]]
|commanders1 = 不明
|commanders2 = [[スタニス・バラシオン]]卿
|casual1 = 不明
|casual2 = 不明
}}
</syntaxhighlight>

<div style=margin-top:1em;> </div>

=== グループの折りたたみ ===
[[ファイル:PI-Collapse.png|thumb|クリックで折りたためるグループ]]
<code>&lt;group></code>タグに'''collapse="open"''' か'''collapse="closed"'''を加えることで、グループの折りたたみが可能になります。グループのヘッダーをクリックすると表示/非表示の切り替えができます。

<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
<group collapse="closed">
  <header>Appearances</header>
  <data source="films" />
  <data source="comics" />
</group>
</syntaxhighlight>

注意：コンテンツを含んでいるヘッダーは、これを機能させるためグループタグに従います。

== 高度なオプション ==
=== フィールドのフォーマット ===
データの前後に情報を追加する場合（アイコンやカテゴリを追加するなど）や、渡された値の処理が必要な場合には、フィールドのフォーマットを使用します。

* '''format'''タグ内にnodeを指定した場合、'''source=に指定した変数は'''format'''タグの中で指定したとおりにフォーマット/変更されます'''
* '''source=の変数が空の場合、'''default'''タグで指定した値がレンダリングされます（'''default'''タグを指定していない場合はレンダリングされません）'''

使用例：
* テキストの追加 - <code>${{{price}}}</code>
* リンク - <code>[[{{{Harry Potter}}}]]</code>
* カテゴリ - <code><nowiki>[[カテゴリ:{{{car type}}}]]</nowiki></code>

例えば、<code><nowiki>{{money icon}}</nowiki></code>テンプレートを挿入できます。

<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
<data source="price">
  <label>Price</label>
  <format>{{{price}}} {{money icon}}</format>
</data>
</syntaxhighlight>

右の例は、次のような構文によってレンダリングされています。

[[ファイル:Field_mutators.png|thumb|フォーマットを含むフィールド|250px]]

<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
<header>Price to buy</header>
<data source="buyhaggle">
  <label>Price with Haggling</label>
  <format>{{{buyh}}} {{money icon}}</format>
</data>
<data source="buy">
  <label>Undiscounted price</label>
  <format>{{{buy}}} {{money icon}}</format>
</data>
<data source="sell">
  <label>Price to sell</label>
  <format>{{{sell}}} {{money icon}}</format>
</data>
<data source="weight">
  <label>Weight</label>
  <format>{{{weight}}} {{weight icon}}</format>
</data>
</syntaxhighlight>

=== パーサー関数 ===
[[ヘルプ:パーサー関数|パーサー関数]]をインフォボックスに加えられます。しかし、引数（タグかデータソース）が空白の場合自動的に非表示となります。

{| class="article-table" style="width:100%;"
|-
! テンプレートコード
! 表示
|-
|
<syntaxhighlight lang="xml" style="margin:0; width:360px;">
<data source="level">
  <label>Rank</label>
  <format>Orc {{#switch:{{{level}}}
         |1=peon
         |2=grunt
         |#default=grunt
  }}</format>
  <default>Orc</default>
</data>
</syntaxhighlight>
|
<infobox>
<data source="level">
  <label>Rank</label>
  <format>Orc {{#switch:{{{level}}}
         |1=peon
         |2=grunt
         |#default=grunt
  }}</format>
  <default>Orc</default>
</data>
</infobox>
|}

switch文の空文字列でテストするのは不思議に感じるかもしれませんが、すでに'''デフォルト'''タグでカバーされているのです。例：<code>|=(unknown rank)</code>

== 例 ==
* [[w:c:godofwar:Kratos|Kratos]]（<small>[[w:c:godofwar:Template:War Box|ソース]]</small>）
* [[w:c:killbill:Beatrix Kiddo|Beatrix Kiddo]]（<small>[[w:c:killbill:Template:Infobox Character|ソース]]</small>）
* [[w:c:dune:Battle of Arrakeen|Battle of Arrakeen]]（<small>[[w:c:dune:Template:Battle|ソース]]</small>）

== 関連情報 ==
*ビジュアルエディタでの基本的なインフォボックス編集方法 - '''[[ヘルプ:インフォボックスの編集|インフォボックスの編集]]'''
* ポータブル・インフォボックスで使用するスタンダードなタグとその中で使えるWikiテキストのサンプル等についての詳細なリストは、'''[[ヘルプ:インフォボックス/タグ]]'''をご覧ください。
* [[ヘルプ:クラシック・インフォボックス|クラシック・インフォボックス]]をポータブルインフォボックスに移行する方法について - '''[[ヘルプ:インフォボックスの移行]]'''
* [[ヘルプ:インフォボックス/CSS]]
* [[ヘルプ:インフォボックス/タグ]]

* [[w:c:portability:Infobox/Basics|ケーススタディ:インフォボックスを作ってみる。]] (英語)

===さらに詳しく===
* [[ヘルプ:インフォボックス/高度な情報]] … ポータブル・インフォボックスについての詳細
* [[ヘルプ:インフォボックス/利点|インフォボックスをポータブルにする利点とは？]]
* [[ヘルプ:インフォボックス/ポータブルにする方法#変換が必要なインフォボックスの見つけ方|ポータブル対応していないインフォボックスの見つけ方]]
* [[ヘルプ:インフォボックス/ポータブルにする方法#新しいインフォボックステンプレートのドラフトをチェックする|ポータブル対応インフォボックステンプレートの作り方]]
* [[ヘルプ:インフォボックス/CSS|ポータブルインフォボックスのスタイリング方法]]
* [[ヘルプ:インフォボックス/FAQ|FAQ]]
* [[ヘルプ:インフォボックス/ベストプラクティス|ベストプラクティス]]

===テクニカルインフォメーション===
* インフォボックス作成の従来の方法については[[ヘルプ:クラシック・インフォボックス]]をご覧ください
* クラシック, ポータブル, Lua: [[w:c:portability:Infobox/Types|インフォボックスのタイプについて]] (英語)
* [[ヘルプ:インフォボックス/ヒントと技法|インフォボックスをきれいに見せるためのヒント]]

== その他のヘルプとフィードバック ==
{{Help and feedback section}}

{{DEFAULTSORT:いんふおほつくす}}

[[be:Help:Інфабоксы]]
[[de:Hilfe:Infoboxen]]
[[en:Help:Infoboxes]]
[[es:Ayuda:Infoboxes]]
[[fi:Ohje:Tietolaatikot]]
[[fr:Aide:Infoboxes]]
[[hi:सहायता:इन्फोबॉक्स]]
[[it:Aiuto:Infobox]]
[[nl:Help:Infoboxen]]
[[pl:Pomoc:Infoboksy]]
[[pt:Ajuda:Infoboxes]]
[[ru:Справка:Инфобоксы]]
[[uk:Довідка:Інфобокси]]
[[vi:Trợ giúp:Hộp thông tin]]
[[zh:Help:訊息框]]

[[カテゴリ:ヘルプ]]
[[カテゴリ:編集]]
[[カテゴリ:ポータビリティ]]