Fandom


(使用可能なタグ)
1行: 1行:
 
{{Helpline}}
 
{{Helpline}}
 
{{Tocright}}
 
{{Tocright}}
[[File:90210-infobox-light.png|thumb|250px|インフォボックスのサンプル]]
 
 
{{beta}}
 
{{beta}}
 
{{Untranslated help|w:Help:Infoboxes}}
 
   
 
'''インフォボックス'''はファクトシートや雑誌の囲み記事のようなもので、ページのトピックの概要をまとめて紹介する形式になっており、 重要なポイントが一目でわかるよう読みやすく整理されています。 インフォボックスは通常、コミュニティ内で統一されるよう[[ヘルプ:テンプレート|テンプレート]]を使って作成します。
 
'''インフォボックス'''はファクトシートや雑誌の囲み記事のようなもので、ページのトピックの概要をまとめて紹介する形式になっており、 重要なポイントが一目でわかるよう読みやすく整理されています。 インフォボックスは通常、コミュニティ内で統一されるよう[[ヘルプ:テンプレート|テンプレート]]を使って作成します。
   
ウィキアでは現在、さまざまな端末でインフォボックスが適切に表示されるよう、インフォボックスをコード化するための新しい方法を開発しています(詳細については下記を参照)。インフォボックスのコードについて詳しく[[w:c:community:Thread:841717|英語版コミュニティセトラルのスレ]]をご覧ください。
+
ウィキアでは現在、さまざまな端末でインフォボックスが適切に表示されるよう、インフォボックスをコード化するための新しい方法を開発しています(詳細については下記を参照)が記事内での使い方は変わりません。しかしテンプレートのページが変化します。すでに存在するインフォボックスの移行のヘルプは[[ヘルプ:フォボクスの移行]]をご覧ください。
  +
  +
'''関連リンク:'''
  +
*ポータブル・インフォボックスで使用するスタンダードなタグとその中で使えるウィキテキストのサンプル等についての詳細なリストは、'''[[ヘルプ:インフォボックス/タグ]]'''をご覧ください。
  +
*[[ヘルプ:クラシックインフォボックス|従来のインフォボックス]]をポータブルインフォボックスに移行する方法について - '''[[ヘルプ:インフォボックスの移行]]'''
  +
*インフォボックス・プレビュー機能のガイド - '''[[w:Help:Infobox preview]]'''
  +
  +
__TOC__
   
 
==インフォボックスの使い方==
 
==インフォボックスの使い方==
インフォボックスは他のテンプレートと同様の方法で記事に追加することができ、[[ヘルプ:編集|エディタ]]に組み込まれているテンプレートツールか、ソースモードを使用します。 後者を使用する場合は、通常、まずテンプレートのドキュメント(たいていはテンプレートのページの下の方にあります)から構文をコピーして記事の中に貼り付け、イコールの記号(=)の後を適切な情報に変更します。 たとえば、次のようにします。
+
[[File:VE-portableinfobox.png|thumb|150px|ビジュアルエディタのインフォボックス挿入]]
  +
インフォボックスは他のテンプレートと同様の方法で記事に追加することができ、[[ヘルプ:編集|エディタ]]に組み込まれているテンプレートツールか、ソースモードを使用します。[[ヘルプ:ビジュアルエディタ|ビジュアルエディタ]]を使用すれば「挿入」ボタンから簡単にポータブルインフォボックスを挿入できます。
   
<pre>
+
ソースモードを使用する場合は、通常、まずテンプレートのドキュメント(たいていはテンプレートのページの下の方にあります)から構文をコピーして記事の中に貼り付け、イコールの記号(=)の後を適切な情報に変更します。 たとえば、次のようにします。
  +
  +
<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
 
{{infobox character
 
{{infobox character
 
| title = デイジー
 
| title = デイジー
24行: 21行:
 
| weight = 20グラム
 
| weight = 20グラム
 
}}
 
}}
</pre>
+
</syntaxhighlight>
   
==インフォボックスの作成==
+
ポータブルインフォボックスの加え方は他のテンプレートと同じです。しかしテンプレートページのマークアップが少々異なります。下記を参照。
[[File:Tutorialinfobox.png|thumb|200px]]
 
   
最初に好きな名前(例: テンプレート:ExampleInfobox)で新しいテンプレートを作成します。 まずは、タイトルと画像を含む基本的なインフォボックス作成してみましょう。
+
==インフォボックス作成==
  +
[[File:Tutorialinfobox.png|thumb|180px|''冬がやってくる'']]
  +
最初に好きな名前(例: テンプレート:ExampleInfobox)で新しいテンプレートを作成します。かつてはtablesやdivsを使用しましたが今はinfoboxタグを使用します。まずは、タイトルと画像を含む基本的なインフォボックスを作成してみましょう。
   
<pre>
+
<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
 
<infobox layout="stacked">
 
<infobox layout="stacked">
<title source="name"><default>{{PAGENAME}}</default></title>
+
<title source="name"><default>{{PAGENAME}}</default></title>
<image source="image" />
+
<image source="image" />
 
</infobox>
 
</infobox>
</pre>
+
</syntaxhighlight>
   
このウィキテキストでは、'''title'''と'''image'''の要素に''name''と''image''の変数が使用されることを示しています。 さらに、'''default'''タグを指定して、記事の名前や画像などが指定されていない場合にその値を使用することも できます。
+
このウィキテキストでは、'''title'''と'''image'''の要素に''name''と''image''の変数が使用されることを示しています。 さらに、'''default'''タグを指定して、記事の名前や画像などが指定されていない場合にその値を使用することも できます。.
   
 
次に、追加情報を含むあと2つのフィールドを指定します。まず、1つ目のフィールドを指定してみましょう。
 
次に、追加情報を含むあと2つのフィールドを指定します。まず、1つ目のフィールドを指定してみましょう。
   
<pre>
+
<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
 
<data source="season"><label>シーズン</label></data>
 
<data source="season"><label>シーズン</label></data>
</pre>
+
</syntaxhighlight>
   
 
次にsourceを''first''、labelを''first seen''と設定した最後の部分を入力すると、次のようになります。
 
次にsourceを''first''、labelを''first seen''と設定した最後の部分を入力すると、次のようになります。
   
<pre>
+
<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
 
<infobox layout="stacked">
 
<infobox layout="stacked">
<title source="name"><default>{{PAGENAME}}</default></title>
+
<title source="name"><default>{{PAGENAME}}</default></title>
<image source="image" />
+
<image source="image" />
<data source="season"><label>シーズン</label></data>
+
<data source="season"><label>シーズン</label></data>
<data source="first"><label>第一場面</label></data>
+
<data source="first"><label>第一場面</label></data>
 
</infobox>
 
</infobox>
</pre>
+
</syntaxhighlight>
   
 
これで、記事内でテンプレートを使用してインフォボックスを記事に表示することができます。
 
これで、記事内でテンプレートを使用してインフォボックスを記事に表示することができます。
   
<pre>
+
<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
{{ExampleInfobox
+
{{Example
|name = エダード・スターク
+
|name = エダード・スターク
|image = eddard.jpg
+
|image = eddard.jpg
|season = [[シーズン1|1]]
+
|season = [[シーズン1|1]]
|first = "[[冬がやってくる]]"
+
|first = "[[冬がやってくる]]"
 
}}
 
}}
</pre>
+
</syntaxhighlight>
   
 
==スタイリングと表示==
 
==スタイリングと表示==
73行: 70行:
 
インフォボックスには、次の2つのレイアウトオプションがあります。
 
インフォボックスには、次の2つのレイアウトオプションがあります。
   
*デフォルトの'''表形式'''(tabular)レイアウト - &lt;data>タグで指定するラベルが値の左側に表示されます
+
{| class="article-table" style="width:100%;"
<pre>
+
|-
<infobox layout="tabular">
+
! デフォルト(table)のレイアウト
...
+
! 積み重ね式(stacked)レイアウト
  +
|-
  +
| タグで指定するラベルが値の左側に表示されます
  +
| タグで指定するラベルが値の上に表示されます
  +
|-
  +
|
  +
<syntaxhighlight lang="xml" style="margin:0;">
  +
<infobox>
  +
...
 
</infobox>
 
</infobox>
</pre>
+
</syntaxhighlight>
+
|
*'''積み重ね式'''(stacked)レイアウト - &lt;data>タグで指定するラベルが値の上に表示されます
+
<syntaxhighlight lang="xml" style="margin:0;">
<pre>
 
 
<infobox layout="stacked">
 
<infobox layout="stacked">
...
+
...
 
</infobox>
 
</infobox>
</pre>
+
</syntaxhighlight>
+
|-
<gallery widths="310" position="center" captionalign="center" bordersize="none" orientation="none" captionsize="large" columns="2" hideaddbutton="true">
+
|
Screen Shot 2015-06-16 at 12.12.17.png|デフォルト(表形式)レイアウトのインフォボックス
+
[[File:Screen Shot 2015-06-16 at 12.12.17.png|thumb|center|150px|デフォルト(table)のレイアウト]]
Screen Shot 2015-06-16 at 12.10.54.png|積み重ね式レイアウトのインフォボックス
+
|
</gallery>
+
[[File:Screen Shot 2015-06-16 at 12.10.54.png|thumb|center|150px|積み重ね式(stacked)レイアウト]]
  +
|}
   
 
===テーマのカスタム設定===
 
===テーマのカスタム設定===
99行: 96行:
 
インフォボックス・タグ内で両方の属性を使用した場合は、'''theme'''属性がデフォルトとして扱われます。また、'''theme'''と'''theme-source'''の値となる属性内のスペースはハイフンマイナス(-)に変換されるため、これを使用して追加できるのは、一つのクラスだけとなります。
 
インフォボックス・タグ内で両方の属性を使用した場合は、'''theme'''属性がデフォルトとして扱われます。また、'''theme'''と'''theme-source'''の値となる属性内のスペースはハイフンマイナス(-)に変換されるため、これを使用して追加できるのは、一つのクラスだけとなります。
   
インフォボックスのテーマやより細かいカスタマイズについて詳しくは、'''[[ヘルプ:ポータブルインフォボックス/CSS]]'''をご覧ください。
+
インフォボックスのテーマやより細かいカスタマイズについて詳しくは、'''[[ヘルプ:ポータブルインフォボックス/CSS]]'''をご覧ください。'
  +
  +
==複数の画像と動画の挿入==
  +
[[File: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>
  +
  +
この機能のさらなる情報については{{#NewWindowLink:http://community.wikia.com/index.php?title=Thread:935527|英語版のスレッド}}を参照。
   
==動画の挿入==
+
インフォボックス内に動画を埋め込みたいという場合には、<image>タグを使用して、画像の時と同じような作業での作成が可能です。画像の代わりに動画をインフォボックスに追加すると、動画のサムネイルとプレイアイコン、そして動画の長さがインフォボックス内に表示され、クリックすると動画プレイヤーがポップアップします。複数の動画を埋め込みたい場合には、複数<image>タグを使用します。
インフォボックス内に動画を埋め込みたいという場合には、<nowiki><image></nowiki>タグを使用して、画像の時と同じような作業での作成が可能です。画像の代わりに動画をインフォボックスに追加すると、動画のサムネイルとプレイアイコン、そして動画の長さがインフォボックス内に表示され、クリックすると動画プレイヤーがポップアップします。複数の動画を埋め込みたい場合には、複数の<nowiki><image></nowiki>タグを使用します。
 
   
 
==高度な使用法==
 
==高度な使用法==
[[File:Advancedinfobox.png|thumb|200px]]
+
[[File:Advancedinfobox.png|thumb|200px|グループ化]]
 
基本的なインフォボックスを作成したら、さらに高度なフィールドを使用する方法についても学んでみましょう。このセクションでは、右のようなインフォボックスを作成します。
 
基本的なインフォボックスを作成したら、さらに高度なフィールドを使用する方法についても学んでみましょう。このセクションでは、右のようなインフォボックスを作成します。
   
===シンプルなタグを使用した順序オプション===
 
 
タイトル欄と画像欄の前に3つのデータフィールドがあります。 このように、タイトル欄がいつも最初のフィールドである必要はありません。ただし、タイトル欄を使用できるのは1つのインフォボックスにつき1回のみです。
 
タイトル欄と画像欄の前に3つのデータフィールドがあります。 このように、タイトル欄がいつも最初のフィールドである必要はありません。ただし、タイトル欄を使用できるのは1つのインフォボックスにつき1回のみです。
   
<pre>
+
<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
 
<infobox layout="stacked">
 
<infobox layout="stacked">
<data source="prev"><label>Previous</label></data>
+
<data source="prev"><label>Previous</label></data>
<data source="conc"><label>Concurrent</label></data>
+
<data source="conc"><label>Concurrent</label></data>
<data source="next"><label>Next</label></data>
+
<data source="next"><label>Next</label></data>
<title source="name" />
+
<title source="name" />
<image source="image" />
+
<image source="image" />
 
</infobox>
 
</infobox>
</pre>
+
</syntaxhighlight>
  +
  +
<div style=margin-top:1em;> </div>
   
 
===groupタグの中で情報をグループ化する===
 
===groupタグの中で情報をグループ化する===
 
次のフィールドでは、複数のフィールドを1つのグループにまとめて、グループごとに見出しを付けることができます。 宣言したフィールドに値を指定しないと、そのフィールドは表示されませんので、ご注意ください。 このルールはgroupタグ内の項目でも同様です。特定のグループ内のフィールド(見出しタグ以外)のどれにも値が指定されていない場合、グループ全体が表示されません。
 
次のフィールドでは、複数のフィールドを1つのグループにまとめて、グループごとに見出しを付けることができます。 宣言したフィールドに値を指定しないと、そのフィールドは表示されませんので、ご注意ください。 このルールはgroupタグ内の項目でも同様です。特定のグループ内のフィールド(見出しタグ以外)のどれにも値が指定されていない場合、グループ全体が表示されません。
   
<pre>
+
<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
 
<infobox layout="stacked">
 
<infobox layout="stacked">
<data source="prev"><label>Previous</label></data>
+
<data source="prev"><label>Previous</label></data>
<data source="conc"><label>Concurrent</label></data>
+
<data source="conc"><label>Concurrent</label></data>
<data source="next"><label>Next</label></data>
+
<data source="next"><label>Next</label></data>
<title source="name" />
+
<title source="name" />
<image source="image" />
+
<image source="image" />
<group>
+
<group>
<header>Details</header>
+
<header>Details</header>
<data source="conflict"><label>Conflict</label></data>
+
<data source="conflict"><label>Conflict</label></data>
<data source="date"><label>Date</label></data>
+
<data source="date"><label>Date</label></data>
<data source="place"><label>Place</label></data>
+
<data source="place"><label>Place</label></data>
<data source="result"><label>Outcome</label></data>
+
<data source="result"><label>Outcome</label></data>
</group>
+
</group>
 
</infobox>
 
</infobox>
</pre>
+
</syntaxhighlight>
   
[[File:Screen_Shot_2015-06-16_at_13.27.08.png|thumb|200px|並列グループ]]
+
<div style=margin-top:1em;> </div>
====グループタグのもう一つのレイアウト====
+
  +
===グループタグのもう一つのレイアウト===
  +
[[File:Screen_Shot_2015-06-16_at_13.27.08.png|thumb|200px|並列レイアウト]]
 
グループタグには、すべてのコンテンツが横1列に隣合わせで表示される並列レイアウトの指定を含めることができます。これには、グループタグに'''layout="horizontal"'''属性を追加します。
 
グループタグには、すべてのコンテンツが横1列に隣合わせで表示される並列レイアウトの指定を含めることができます。これには、グループタグに'''layout="horizontal"'''属性を追加します。
   
<pre>
+
<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
 
<group layout="horizontal">
 
<group layout="horizontal">
...
+
...
 
</group>
 
</group>
</pre>
+
</syntaxhighlight>
  +
  +
<div style=margin-top:1em;> </div>
   
====すべてのグループ要素の表示を強制する====
+
===すべてのグループ要素の表示を強制する===
 
'''show="incomplete"'''を使用して、'''空白'''の値があってもグループ要素の'''すべて'''が表示されるよう強制することができます。ただし、''すべて''が空の場合は、そのグループは表示されません。
 
'''show="incomplete"'''を使用して、'''空白'''の値があってもグループ要素の'''すべて'''が表示されるよう強制することができます。ただし、''すべて''が空の場合は、そのグループは表示されません。
   
<pre>
+
<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
 
<group layout="horizontal" show="incomplete">
 
<group layout="horizontal" show="incomplete">
<header>Combatants</header>
+
<header>Combatants</header>
<data source="side1" />
+
<data source="side1" />
<data source="side2" />
+
<data source="side2" />
 
</group>
 
</group>
</pre>
+
</syntaxhighlight>
   
 
上記のすべてを組み合わせると、次のようなテンプレートコードになります。
 
上記のすべてを組み合わせると、次のようなテンプレートコードになります。
   
<pre>
+
<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
 
<infobox layout="stacked">
 
<infobox layout="stacked">
<data source="prev"><label>Previous</label></data>
+
<data source="prev"><label>Previous</label></data>
<data source="conc"><label>Concurrent</label></data>
+
<data source="conc"><label>Concurrent</label></data>
<data source="next"><label>Next</label></data>
+
<data source="next"><label>Next</label></data>
<title source="name" />
+
<title source="name" />
<image source="image" />
+
<image source="image" />
<group>
+
<group>
<header>Details</header>
+
<header>Details</header>
<data source="conflict"><label>Conflict</label></data>
+
<data source="conflict"><label>Conflict</label></data>
<data source="date"><label>Date</label></data>
+
<data source="date"><label>Date</label></data>
<data source="place"><label>Place</label></data>
+
<data source="place"><label>Place</label></data>
<data source="result"><label>Outcome</label></data>
+
<data source="result"><label>Outcome</label></data>
</group>
+
</group>
<group layout="horizontal" show="incomplete">
+
<group layout="horizontal" show="incomplete">
<header>Combatants</header>
+
<header>Combatants</header>
<data source="side1" />
+
<data source="side1" />
<data source="side2" />
+
<data source="side2" />
</group>
+
</group>
<group layout="horizontal" show="incomplete">
+
<group layout="horizontal" show="incomplete">
<header>Commanders</header>
+
<header>Commanders</header>
<data source="commanders1" />
+
<data source="commanders1" />
<data source="commanders2" />
+
<data source="commanders2" />
</group>
+
</group>
<group layout="horizontal" show="incomplete">
+
<group layout="horizontal" show="incomplete">
<header>Strength</header>
+
<header>Strength</header>
<data source="forces1" />
+
<data source="forces1" />
<data source="forces2" />
+
<data source="forces2" />
</group>
+
</group>
<group layout="horizontal" show="incomplete">
+
<group layout="horizontal" show="incomplete">
<header>Casualties</header>
+
<header>Casualties</header>
<data source="casual1" />
+
<data source="casual1" />
<data source="casual2" />
+
<data source="casual2" />
</group>
+
</group>
<data source="civilian"><label>Civilian casualties</label></data>
+
<data source="civilian"><label>Civilian casualties</label></data>
 
</infobox>
 
</infobox>
</pre>
+
</syntaxhighlight>
   
 
これを記事の中で使用すればインフォボックスの完成です。
 
これを記事の中で使用すればインフォボックスの完成です。
   
<pre>
+
<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
 
{{Battle
 
{{Battle
 
|prev = [[フェアアイルの戦い]]
 
|prev = [[フェアアイルの戦い]]
212行: 208行:
 
|conflict = [[グレイジョイの反乱]]
 
|conflict = [[グレイジョイの反乱]]
 
|date = 289 AL
 
|date = 289 AL
|place = [[グレートワイ]], [[鉄諸島]]
+
|place = [[鉄諸島]]、[[グレートウィック]]
|result = [[鉄の座]]獲得
+
|result = [[鉄の座]]獲得
|side1 = [[File:Greyjoy mini shield.png|20px|right|link=House Greyjoy]] [[House Greyjoy]]
+
|side1 = [[File:Greyjoy mini shield.png|20px|right|link=House Greyjoy]] [[グレジョイ家]]
|side2 = [[File:Baratheon mini shield.png|20px|right|link=House Baratheon]] [[Iron Throne]]
+
|side2 = [[File:Baratheon mini shield.png|20px|right|link=House Baratheon]] [[鉄の玉座]]
 
|commanders1 = 不明
 
|commanders1 = 不明
|commanders2 = [[スタニス・バラシオン]]
+
|commanders2 = [[スタニス・バラシオン]]
|casual1 = Unknown
+
|casual1 = 不明
|casual2 = Unknown
+
|casual2 = 不明
 
}}
 
}}
</pre>
+
</syntaxhighlight>
   
  +
<div style=margin-top:1em;> </div>
  +
  +
===グループの折りたたみ===
  +
[[File: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>
  +
  +
注意:コンテンツを含んでいるヘッダーは、これを機能させるためグループタグに従います。
  +
  +
==高度なオプション==
 
===フィールドのフォーマット===
 
===フィールドのフォーマット===
 
データの前後に情報を追加する場合(アイコンやカテゴリを追加するなど)や、渡された値の処理が必要ば場合には、フィールドのフォーマットを使用します。
 
データの前後に情報を追加する場合(アイコンやカテゴリを追加するなど)や、渡された値の処理が必要ば場合には、フィールドのフォーマットを使用します。
234行: 247行:
 
* カテゴリ - <code><nowiki>[[カテゴリ:{{{car type}}}]]</nowiki></code>
 
* カテゴリ - <code><nowiki>[[カテゴリ:{{{car type}}}]]</nowiki></code>
   
アイコンを追加してみます。
+
例えば、<code><nowiki>{{money icon}}</nowiki></code>テプレート挿入できます。
<pre>
+
  +
<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
 
<data source="price">
 
<data source="price">
<label>Price</label>
+
<label>Price</label>
<format>{{{price}}} {{money_icon}}</format>
+
<format>{{{price}}} {{money icon}}</format>
 
</data>
 
</data>
</pre>
+
</syntaxhighlight>
   
 
右の例は、次のような構文によってレンダリングされています。
 
右の例は、次のような構文によってレンダリングされています。
  +
 
[[File:Field_mutators.png|thumb|フォーマットを含むフィールド|250px]]
 
[[File:Field_mutators.png|thumb|フォーマットを含むフィールド|250px]]
<pre>
+
  +
<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
 
<header>Price to buy</header>
 
<header>Price to buy</header>
<data source="buyh">
+
<data source="buyhaggle">
<label>Price with Haggling</label>
+
<label>Price with Haggling</label>
<format>{{{buyh}}} {{oren2}}</format>
+
<format>{{{buyh}}} {{money icon}}</format>
 
</data>
 
</data>
 
<data source="buy">
 
<data source="buy">
<label>Undiscounted price</label>
+
<label>Undiscounted price</label>
<format>{{{buy}}} {{oren2}}</format>
+
<format>{{{buy}}} {{money icon}}</format>
 
</data>
 
</data>
 
<data source="sell">
 
<data source="sell">
<label>Price to sell</label>
+
<label>Price to sell</label>
<format>{{{sell}}} {{oren2}}</format>
+
<format>{{{sell}}} {{money icon}}</format>
 
</data>
 
</data>
 
<data source="weight">
 
<data source="weight">
<label>Weight</label>
+
<label>Weight</label>
<format>{{{weight}}} {{weight}}</format>
+
<format>{{{weight}}} {{weight icon}}</format>
 
</data>
 
</data>
</pre>
+
</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>
ポータブル・インフォボックスで使用するスタンダードなタグとその中で使えるウィキテキストのサンプル等についての詳細なリストは、'''[[ヘルプ:インフォボックス/タグ]]'''をご覧ください。
 
   
 
==例==
 
==例==
271行: 285行:
 
*[[w:c:dune:Battle of Arrakeen|Battle of Arrakeen]](<small>[[w:c:dune:Template:Battle|ソース]]</small>)
 
*[[w:c:dune:Battle of Arrakeen|Battle of Arrakeen]](<small>[[w:c:dune:Template:Battle|ソース]]</small>)
   
==関連ペ==
+
==ヘルプとフィドバックFurther help and feedback==
*'''[[ヘルプ:インフォボックス/CSS]]'''
+
*インフォボックス作成の従来の方法については[[ヘルプ:クラシックインフォボックス]]をご覧ください
*'''[[ヘルプ:インフォボックス/タグ]]'''
+
*インフォボックスのヘルプは[[w:c:portability:Portable Infoboxes]]を参照してください。
*[[ヘルプ:CSSとJavaScriptのカスタマイゼーション]]
+
{{Help and feedback section}}
[[カテゴリ:ヘルプ]]
 
[[カテゴリ:編集]]
 
   
==その他のヘルプとフィードバック==
 
{{Help and feedback section}}
 
[[カテゴリ:ヘルプ]]
 
[[カテゴリ:編集]]
 
 
{{DEFAULTSORT:ほたふるいんふおほつくす}}
 
{{DEFAULTSORT:ほたふるいんふおほつくす}}
   
293行: 303行:
 
[[vi:Trợ giúp:Hộp thông tin]]
 
[[vi:Trợ giúp:Hộp thông tin]]
 
[[zh:Help:訊息框]]
 
[[zh:Help:訊息框]]
  +
[[カテゴリ:ヘルプ]]
  +
[[カテゴリ:編集]]

2016年3月23日 (水) 13:25時点における版

ヘルプ

この機能は現在開発中です - ベータテストを行っている一部のコミュニティのみでのご利用となっている場合があります。

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

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

関連リンク:


インフォボックスの使い方

VE-portableinfobox

ビジュアルエディタのインフォボックス挿入

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

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

{{infobox character
| title = デイジー
| image = Example.jpg
| imagecaption = 風に吹かれるデイジー
| position = 最上位の花
| age = 2か月
| status = 有効
| height = 5インチ
| weight = 20グラム
}}

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

インフォボックスの作成

Tutorialinfobox

冬がやってくる

最初に好きな名前(例: テンプレート:ExampleInfobox)で新しいテンプレートを作成します。かつてはtablesやdivsを使用しましたが今はinfoboxタグを使用します。まずは、タイトルと画像を含む基本的なインフォボックスを作成してみましょう。

<infobox layout="stacked">
  <title source="name"><default>{{PAGENAME}}</default></title>
  <image source="image" />
</infobox>

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

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

<data source="season"><label>シーズン</label></data>

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

<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>

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

{{Example
 |name   = エドダード・スターク
 |image  = eddard.jpg
 |season = [[シーズン1|1]]
 |first  = "[[冬がやってくる]]"
}}

スタイリングと表示

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

レイアウトのオプション

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

デフォルト(table)のレイアウト 積み重ね式(stacked)レイアウト
タグで指定するラベルが値の左側に表示されます タグで指定するラベルが値の上に表示されます
<infobox>
   ...
</infobox>
<infobox layout="stacked">
   ...
</infobox>
Screen Shot 2015-06-16 at 12.12.17

デフォルト(table)のレイアウト

Screen Shot 2015-06-16 at 12.10.54

積み重ね式(stacked)レイアウト

テーマのカスタム設定

デフォルトインフォボックスのテーマは、infoboxタグのthemeまたはtheme-source属性を使って上書きすることができます。これにより、ローカル・コミュニティのCSSからインフォボックスをデザインできるようになります。

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

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

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

複数の画像と動画の挿入

Infoboxtabs

タブのついた画像

インフォボックスの一か所で複数の画像を使用する場合<gallery>タグを加えます。

{{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>
}}

この機能のさらなる情報については{{#NewWindowLink:http://community.wikia.com/index.php?title=Thread:935527%7C英語版のスレッド}}を参照。

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

高度な使用法

Advancedinfobox

グループ化

基本的なインフォボックスを作成したら、さらに高度なフィールドを使用する方法についても学んでみましょう。このセクションでは、右のようなインフォボックスを作成します。

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

<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>
 

groupタグの中で情報をグループ化する

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

<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>
 

グループタグのもう一つのレイアウト

Screen Shot 2015-06-16 at 13.27.08

並列レイアウト

グループタグには、すべてのコンテンツが横1列に隣合わせで表示される並列レイアウトの指定を含めることができます。これには、グループタグにlayout="horizontal"属性を追加します。

<group layout="horizontal">
   ...
</group>
 

すべてのグループ要素の表示を強制する

show="incomplete"を使用して、空白の値があってもグループ要素のすべてが表示されるよう強制することができます。ただし、すべてが空の場合は、そのグループは表示されません。

<group layout="horizontal" show="incomplete">
  <header>Combatants</header>
  <data source="side1" />
  <data source="side2" />
</group>

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

<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>

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

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

グループの折りたたみ

PI-Collapse

クリックで折りたためるグループ

<group>タグにcollapse="open"collapse="closed"を加えることで、グループの折りたたみが可能になります。グループのヘッダーをクリックすると表示/非表示の切り替えられます。

<group collapse="closed">
  <header>Appearances</header>
  <data source="films" />
  <data source="comics" />
</group>

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

高度なオプション

フィールドのフォーマット

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

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

使用例:

  • テキストの追加 - ${{{price}}}
  • リンク - [[{{{Harry Potter}}}]]
  • カテゴリ - [[カテゴリ:{{{car type}}}]]

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

<data source="price">
  <label>Price</label>
  <format>{{{price}}} {{money icon}}</format>
</data>

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

Field mutators

フォーマットを含むフィールド

<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>

パーサー関数

パーサー関数をインフォボックスに加えられます。しかし、引数(タグかデータソース)が空白の場合自動的に非表示となります。

テンプレートコード 表示
<data source="level">
  <label>Rank</label>
  <format>Orc {{#switch:{{{level}}}
         |1=peon
         |2=grunt
         |#default=grunt
  }}</format>
  <default>Orc</default>
</data>

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

ヘルプとフィードバックFurther help and feedback

特に記載のない限り、コミュニティのコンテンツはCC-BY-SA ライセンスの下で利用可能です。