Charicocco (メッセージウォール | 投稿記録) (→関連ページ) タグ: sourceedit |
Plover-bot (メッセージウォール | 投稿記録) 細 (*be) |
||
(7人の利用者による、間の39版が非表示) | |||
1行目: | 1行目: | ||
{{Helpline}} |
{{Helpline}} |
||
− | {{Tocright}} |
||
− | [[File:90210-infobox-light.png|thumb|250px|インフォボックスのサンプル]] |
||
− | {{beta}} |
||
− | |||
{{Untranslated help|w:Help:Infoboxes}} |
{{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;"> |
||
− | <pre> |
||
{{infobox character |
{{infobox character |
||
| title = デイジー |
| title = デイジー |
||
24行目: | 45行目: | ||
| weight = 20グラム |
| weight = 20グラム |
||
}} |
}} |
||
+ | </syntaxhighlight> |
||
− | </pre> |
||
+ | ポータブルインフォボックスの加え方は他のテンプレートと同じです。しかしテンプレートページのマークアップが少々異なります。下記を参照。 |
||
− | ==インフォボックスの作成== |
||
− | [[File:Tutorialinfobox.png|thumb|200px]] |
||
+ | {{Clear}} |
||
− | 最初に好きな名前(例: テンプレート:ExampleInfobox)で新しいテンプレートを作成します。 まずは、タイトルと画像を含む基本的なインフォボックスを作成してみましょう。 |
||
+ | == インフォボックスの作成 == |
||
+ | [[ファイル:Tutorialinfobox.png|thumb|180px|''冬がやってくる'']] |
||
+ | 最初に好きな名前(例: テンプレート:ExampleInfobox)で新しいテンプレートを作成します。かつてはtablesやdivsを使用しましたが今はinfoboxタグを使用します。まずは、タイトルと画像を含む基本的なインフォボックスを作成してみましょう。 |
||
+ | <syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;"> |
||
− | <pre> |
||
<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> |
||
+ | </syntaxhighlight> |
||
− | </pre> |
||
− | この |
+ | このWikiテキストでは、'''title'''と'''image'''の要素に''name''と''image''の変数が使用されることを示しています。 さらに、'''default'''タグを指定して、記事の名前や画像などが指定されていない場合にその値を使用することも できます。. |
次に、追加情報を含むあと2つのフィールドを指定します。まず、1つ目のフィールドを指定してみましょう。 |
次に、追加情報を含むあと2つのフィールドを指定します。まず、1つ目のフィールドを指定してみましょう。 |
||
+ | <syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;"> |
||
− | <pre> |
||
<data source="season"><label>シーズン</label></data> |
<data source="season"><label>シーズン</label></data> |
||
+ | </syntaxhighlight> |
||
− | </pre> |
||
次にsourceを''first''、labelを''first seen''と設定した最後の部分を入力すると、次のようになります。 |
次にsourceを''first''、labelを''first seen''と設定した最後の部分を入力すると、次のようになります。 |
||
+ | <syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;"> |
||
− | <pre> |
||
<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> |
||
+ | </syntaxhighlight> |
||
− | </pre> |
||
これで、記事内でテンプレートを使用してインフォボックスを記事に表示することができます。 |
これで、記事内でテンプレートを使用してインフォボックスを記事に表示することができます。 |
||
+ | <syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;"> |
||
− | <pre> |
||
+ | {{Example |
||
− | {{ExampleInfobox |
||
− | |name = エダード・スターク |
+ | |name = エダード・スターク |
− | |image = eddard.jpg |
+ | |image = eddard.jpg |
− | |season = [[シーズン1|1]] |
+ | |season = [[シーズン1|1]] |
− | |first = "[[冬がやってくる]]" |
+ | |first = "[[冬がやってくる]]" |
}} |
}} |
||
+ | </syntaxhighlight> |
||
− | </pre> |
||
− | ==スタイリングと表示== |
+ | == スタイリングと表示 == |
上記のようなコードを使用したインフォボックスは、[[ヘルプ:テーマデザイナー|コミュニティのテーマ]]に合わせて自動的にデザインされます。 また、変数が指定されていない行は、表示されません('default'タグを使用していない場合)。 |
上記のようなコードを使用したインフォボックスは、[[ヘルプ:テーマデザイナー|コミュニティのテーマ]]に合わせて自動的にデザインされます。 また、変数が指定されていない行は、表示されません('default'タグを使用していない場合)。 |
||
− | ===レイアウトのオプション=== |
+ | === レイアウトのオプション === |
インフォボックスには、次の2つのレイアウトオプションがあります。 |
インフォボックスには、次の2つのレイアウトオプションがあります。 |
||
+ | {| class="article-table" style="width:100%;" |
||
− | *デフォルトの'''表形式'''(tabular)レイアウト - <data>タグで指定するラベルが値の左側に表示されます |
||
+ | |- |
||
− | <pre> |
||
+ | ! デフォルト(table)のレイアウト |
||
− | <infobox layout="tabular"> |
||
+ | ! 積み重ね式(stacked)レイアウト |
||
− | ... |
||
+ | |- |
||
+ | | タグで指定するラベルが値の左側に表示されます |
||
+ | | タグで指定するラベルが値の上に表示されます |
||
+ | |- |
||
+ | | |
||
+ | <syntaxhighlight lang="xml" style="margin:0;"> |
||
+ | <infobox> |
||
+ | ... |
||
</infobox> |
</infobox> |
||
+ | </syntaxhighlight> |
||
− | </pre> |
||
+ | | |
||
− | |||
+ | <syntaxhighlight lang="xml" style="margin:0;"> |
||
− | *'''積み重ね式'''(stacked)レイアウト - <data>タグで指定するラベルが値の上に表示されます |
||
− | <pre> |
||
<infobox layout="stacked"> |
<infobox layout="stacked"> |
||
− | ... |
+ | ... |
</infobox> |
</infobox> |
||
+ | </syntaxhighlight> |
||
− | </pre> |
||
+ | |- |
||
− | |||
+ | | |
||
− | <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|デフォルト |
+ | [[ファイル:Screen Shot 2015-06-16 at 12.12.17.png|thumb|center|150px|デフォルト(table)のレイアウト]] |
+ | | |
||
− | Screen Shot 2015-06-16 at 12.10.54.png|積み重ね式レイアウトのインフォボックス |
||
+ | [[ファイル:Screen Shot 2015-06-16 at 12.10.54.png|thumb|center|150px|積み重ね式(stacked)レイアウト]] |
||
− | </gallery> |
||
+ | |} |
||
− | ===テーマのカスタム設定=== |
+ | === テーマのカスタム設定 === |
デフォルトインフォボックスのテーマは、'''infobox'''タグの'''theme'''または'''theme-source'''属性を使って上書きすることができます。これにより、ローカル・コミュニティの[[ヘルプ:CSSとJavaScriptのカスタマイゼーション|CSS]]からインフォボックスをデザインできるようになります。 |
デフォルトインフォボックスのテーマは、'''infobox'''タグの'''theme'''または'''theme-source'''属性を使って上書きすることができます。これにより、ローカル・コミュニティの[[ヘルプ:CSSとJavaScriptのカスタマイゼーション|CSS]]からインフォボックスをデザインできるようになります。 |
||
101行目: | 132行目: | ||
インフォボックス・タグ内で両方の属性を使用した場合は、'''theme'''属性がデフォルトとして扱われます。また、'''theme'''と'''theme-source'''の値となる属性内のスペースはハイフンマイナス(-)に変換されるため、これを使用して追加できるのは、一つのクラスだけとなります。 |
インフォボックス・タグ内で両方の属性を使用した場合は、'''theme'''属性がデフォルトとして扱われます。また、'''theme'''と'''theme-source'''の値となる属性内のスペースはハイフンマイナス(-)に変換されるため、これを使用して追加できるのは、一つのクラスだけとなります。 |
||
− | インフォボックスのテーマやより細かいカスタマイズについて詳しくは、'''[[ヘルプ:ポータブルインフォボックス/CSS]]'''をご覧ください。 |
+ | インフォボックスのテーマやより細かいカスタマイズについて詳しくは、'''[[ヘルプ:ポータブルインフォボックス/CSS]]'''をご覧ください。' |
+ | ===アクセント・カラー=== |
||
− | ==動画の挿入== |
||
+ | アクセント・カラー機能を使うと、タイトルやヘッダーの背景、テキストの色をインフォボックスごとに変更することができます。'''theme-source'''と同じく、カラーも'''accent-color-source'''(背景)や'''accent-color-text-source'''(テキスト)というテンプレート・パラメーターで設定することが可能です。 |
||
− | インフォボックス内に動画を埋め込みたいという場合には、<nowiki><image></nowiki>タグを使用して、画像の時と同じような作業での作成が可能です。画像の代わりに動画をインフォボックスに追加すると、動画のサムネイルとプレイアイコン、そして動画の長さがインフォボックス内に表示され、クリックすると動画プレイヤーがポップアップします。複数の動画を埋め込みたい場合には、複数の<nowiki><image></nowiki>タグを使用します。 |
||
+ | 例えば、インフォボックス・テンプレートを'''accent-color-source="bkg"'''に設定し、記事中のインフォボックスで'''bkg = #FFF'''と書き込むと、ヘッダーの背景とタイトルの色が#FFF(16進数カラーコードで白)になります。色の上書きは、#FFFや#FFFFFFといったように16進数のフォーマットで記述してください。 |
||
− | ==高度な使用法== |
||
+ | |||
− | [[File:Advancedinfobox.png|thumb|200px]] |
||
+ | アクセントカラーはデフォルトだけでなくカスタム設定のテーマより優先されます。 |
||
+ | |||
+ | また、アクセントカラーのデフォルト値を設定することもできます。'''accent-color-default="#FFF"'''と設定することで全てのタイトルとヘッダー背景が白になり、同様に'''accent-color-text-default="#000000"'''とすればテキストが黒に設定されます。 |
||
+ | == 複数の画像と動画の挿入 == |
||
+ | [[ファイル:Infoboxtabs.png|thumb|150px|タブのついた画像]] |
||
+ | インフォボックスの一か所で複数の画像を使用する場合<code><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回のみです。 |
タイトル欄と画像欄の前に3つのデータフィールドがあります。 このように、タイトル欄がいつも最初のフィールドである必要はありません。ただし、タイトル欄を使用できるのは1つのインフォボックスにつき1回のみです。 |
||
+ | <syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;"> |
||
− | <pre> |
||
<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> |
||
+ | </syntaxhighlight> |
||
− | </pre> |
||
+ | <div style=margin-top:1em;> </div> |
||
− | ===groupタグの中で情報をグループ化する=== |
||
+ | |||
+ | === groupタグの中で情報をグループ化する === |
||
次のフィールドでは、複数のフィールドを1つのグループにまとめて、グループごとに見出しを付けることができます。 宣言したフィールドに値を指定しないと、そのフィールドは表示されませんので、ご注意ください。 このルールはgroupタグ内の項目でも同様です。特定のグループ内のフィールド(見出しタグ以外)のどれにも値が指定されていない場合、グループ全体が表示されません。 |
次のフィールドでは、複数のフィールドを1つのグループにまとめて、グループごとに見出しを付けることができます。 宣言したフィールドに値を指定しないと、そのフィールドは表示されませんので、ご注意ください。 このルールはgroupタグ内の項目でも同様です。特定のグループ内のフィールド(見出しタグ以外)のどれにも値が指定されていない場合、グループ全体が表示されません。 |
||
+ | <syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;"> |
||
− | <pre> |
||
<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> |
||
+ | </syntaxhighlight> |
||
− | </pre> |
||
+ | |||
+ | <div style=margin-top:1em;> </div> |
||
+ | === グループタグの並列レイアウト === |
||
− | [[File:Screen_Shot_2015-06-16_at_13.27.08.png|thumb|200px|並列グループ]] |
||
+ | [[ファイル:Screen_Shot_2015-06-16_at_13.27.08.png|thumb|200px|並列レイアウト]] |
||
− | ====グループタグのもう一つのレイアウト==== |
||
グループタグには、すべてのコンテンツが横1列に隣合わせで表示される並列レイアウトの指定を含めることができます。これには、グループタグに'''layout="horizontal"'''属性を追加します。 |
グループタグには、すべてのコンテンツが横1列に隣合わせで表示される並列レイアウトの指定を含めることができます。これには、グループタグに'''layout="horizontal"'''属性を追加します。 |
||
+ | <syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;"> |
||
− | <pre> |
||
<group layout="horizontal"> |
<group layout="horizontal"> |
||
− | ... |
+ | ... |
</group> |
</group> |
||
+ | </syntaxhighlight> |
||
− | </pre> |
||
+ | <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"'''を使用して、'''空白'''の値があってもグループ要素の'''すべて'''が表示されるよう強制することができます。ただし、''すべて''が空の場合は、そのグループは表示されません。 |
'''show="incomplete"'''を使用して、'''空白'''の値があってもグループ要素の'''すべて'''が表示されるよう強制することができます。ただし、''すべて''が空の場合は、そのグループは表示されません。 |
||
+ | <syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;"> |
||
− | <pre> |
||
<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> |
||
+ | </syntaxhighlight> |
||
− | </pre> |
||
上記のすべてを組み合わせると、次のようなテンプレートコードになります。 |
上記のすべてを組み合わせると、次のようなテンプレートコードになります。 |
||
+ | <syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;"> |
||
− | <pre> |
||
<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> |
||
+ | </syntaxhighlight> |
||
− | </pre> |
||
これを記事の中で使用すればインフォボックスの完成です。 |
これを記事の中で使用すればインフォボックスの完成です。 |
||
+ | <syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;"> |
||
− | <pre> |
||
{{Battle |
{{Battle |
||
|prev = [[フェアアイルの戦い]] |
|prev = [[フェアアイルの戦い]] |
||
215行目: | 297行目: | ||
|conflict = [[グレイジョイの反乱]] |
|conflict = [[グレイジョイの反乱]] |
||
|date = 289 AL |
|date = 289 AL |
||
− | |place = [[グレート |
+ | |place = [[鉄諸島]]、[[グレートウィック]] |
− | |result = [[鉄の |
+ | |result = [[鉄の玉座]]獲得 |
− | |side1 = [[ |
+ | |side1 = [[ファイル:Greyjoy mini shield.png|20px|right|link=House Greyjoy]] [[グレジョイ家]] |
− | |side2 = [[ |
+ | |side2 = [[ファイル:Baratheon mini shield.png|20px|right|link=House Baratheon]] [[鉄の玉座]] |
|commanders1 = 不明 |
|commanders1 = 不明 |
||
− | |commanders2 = [[スタニス・バラシオン]] |
+ | |commanders2 = [[スタニス・バラシオン]]卿 |
− | |casual1 = |
+ | |casual1 = 不明 |
− | |casual2 = |
+ | |casual2 = 不明 |
}} |
}} |
||
+ | </syntaxhighlight> |
||
− | </pre> |
||
+ | <div style=margin-top:1em;> </div> |
||
− | ===フィールドのフォーマット=== |
||
+ | |||
− | データの前後に情報を追加する場合(アイコンやカテゴリを追加するなど)や、渡された値の処理が必要ば場合には、フィールドのフォーマットを使用します。 |
||
+ | === グループの折りたたみ === |
||
+ | [[ファイル:PI-Collapse.png|thumb|クリックで折りたためるグループ]] |
||
+ | <code><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'''タグの中で指定したとおりにフォーマット/変更されます''' |
* '''format'''タグ内にnodeを指定した場合、'''source=に指定した変数は'''format'''タグの中で指定したとおりにフォーマット/変更されます''' |
||
237行目: | 336行目: | ||
* カテゴリ - <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}}} {{ |
+ | <format>{{{price}}} {{money icon}}</format> |
</data> |
</data> |
||
+ | </syntaxhighlight> |
||
− | </pre> |
||
右の例は、次のような構文によってレンダリングされています。 |
右の例は、次のような構文によってレンダリングされています。 |
||
+ | |||
− | [[File:Field_mutators.png|thumb|フォーマットを含むフィールド|250px]] |
||
+ | [[ファイル: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=" |
+ | <data source="buyhaggle"> |
− | <label>Price with Haggling</label> |
+ | <label>Price with Haggling</label> |
− | <format>{{{buyh}}} {{ |
+ | <format>{{{buyh}}} {{money icon}}</format> |
</data> |
</data> |
||
<data source="buy"> |
<data source="buy"> |
||
− | <label>Undiscounted price</label> |
+ | <label>Undiscounted price</label> |
− | <format>{{{buy}}} {{ |
+ | <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}}} {{ |
+ | <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> |
||
+ | </syntaxhighlight> |
||
− | </pre> |
||
+ | === パーサー関数 === |
||
− | ==使用可能なタグ== |
||
+ | [[ヘルプ:パーサー関数|パーサー関数]]をインフォボックスに加えられます。しかし、引数(タグかデータソース)が空白の場合自動的に非表示となります。 |
||
− | ポータブル・インフォボックスで使用するスタンダードなタグとその中で使えるウィキテキストのサンプル等についての詳細なリストは、'''[[ヘルプ:ポータブル・インフォボックス/タグ]]'''をご覧ください。 |
||
+ | {| class="article-table" style="width:100%;" |
||
− | ==例== |
||
+ | |- |
||
− | *[[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>) |
||
+ | |- |
||
+ | | |
||
+ | <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> |
||
− | ==関連ページ== |
||
− | *'''[[ヘルプ:インフォボックス/CSS]]''' |
||
− | *'''[[ヘルプ:インフォボックス/タグ]]''' |
||
− | *[[ヘルプ:CSSとJavaScriptのカスタマイゼーション]] |
||
− | [[カテゴリ:ヘルプ]] |
||
− | [[カテゴリ:編集]] |
||
+ | == 例 == |
||
− | ==その他のヘルプとフィードバック== |
||
+ | * [[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}} |
{{Help and feedback section}} |
||
− | [[カテゴリ:ヘルプ]] |
||
− | [[カテゴリ:編集]] |
||
− | {{DEFAULTSORT:ほたふるいんふおほつくす}} |
||
+ | {{DEFAULTSORT:いんふおほつくす}} |
||
+ | |||
+ | [[be:Help:Інфабоксы]] |
||
[[de:Hilfe:Infoboxen]] |
[[de:Hilfe:Infoboxen]] |
||
[[en:Help:Infoboxes]] |
[[en:Help:Infoboxes]] |
||
294行目: | 445行目: | ||
[[fr:Aide:Infoboxes]] |
[[fr:Aide:Infoboxes]] |
||
[[it:Aiuto:Infobox]] |
[[it:Aiuto:Infobox]] |
||
+ | [[nl:Help:Infoboxen]] |
||
[[pl:Pomoc:Infoboksy]] |
[[pl:Pomoc:Infoboksy]] |
||
[[pt:Ajuda:Infoboxes]] |
[[pt:Ajuda:Infoboxes]] |
||
[[ru:Справка:Инфобоксы]] |
[[ru:Справка:Инфобоксы]] |
||
+ | [[uk:Довідка:Інфобокси]] |
||
[[vi:Trợ giúp:Hộp thông tin]] |
[[vi:Trợ giúp:Hộp thông tin]] |
||
[[zh:Help:訊息框]] |
[[zh:Help:訊息框]] |
||
+ | |||
+ | [[カテゴリ:ヘルプ]] |
||
+ | [[カテゴリ:編集]] |
||
+ | [[カテゴリ:ポータビリティ]] |
2021年5月31日 (月) 18:57時点における版
- このヘルプには更新、または翻訳されていないコンテンツがあります。どなたでも翻訳にご協力いただくことができます。
- 原文 : w:Help:Infoboxes。
インフォボックスはファクトシートや雑誌の囲み記事のようなもので、ページのトピックの概要をまとめて紹介する形式になっており、 重要なポイントが一目でわかるよう読みやすく整理されています。 インフォボックスは通常、コミュニティ内で統一されるようテンプレートを使って作成します。
Fandomでは現在、さまざまな端末でインフォボックスが適切に表示されるよう、インフォボックスをコード化するための新しい方法を開発しています(詳細については下記を参照)が記事内での使い方は変わりません。しかしテンプレートのページが変化します。クラシック・インフォボックスからの移行のヘルプはヘルプ:インフォボックスの移行をご覧ください。
インフォボックスの使い方
インフォボックスは他のテンプレートと同様の方法で記事に追加することができ、エディタに組み込まれているテンプレートツールか、ソースモードを使用します。ビジュアルエディタを使用すれば「挿入」ボタンから簡単にポータブルインフォボックスを挿入できます。
ソースモードを使用する場合は、通常、まずテンプレートのドキュメント(たいていはテンプレートのページの下の方にあります)から構文をコピーして記事の中に貼り付け、イコールの記号(=)の後を適切な情報に変更します。 たとえば、次のようにします。
{{infobox character
| title = デイジー
| image = Example.jpg
| imagecaption = 風に吹かれるデイジー
| position = 最上位の花
| age = 2か月
| status = 有効
| height = 5インチ
| weight = 20グラム
}}
ポータブルインフォボックスの加え方は他のテンプレートと同じです。しかしテンプレートページのマークアップが少々異なります。下記を参照。
インフォボックスの作成
最初に好きな名前(例: テンプレート:ExampleInfobox)で新しいテンプレートを作成します。かつてはtablesやdivsを使用しましたが今はinfoboxタグを使用します。まずは、タイトルと画像を含む基本的なインフォボックスを作成してみましょう。
<infobox layout="stacked">
<title source="name"><default>{{PAGENAME}}</default></title>
<image source="image" />
</infobox>
このWikiテキストでは、titleとimageの要素にnameとimageの変数が使用されることを示しています。 さらに、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>
|
テーマのカスタム設定
デフォルトインフォボックスのテーマは、infoboxタグのthemeまたはtheme-source属性を使って上書きすることができます。これにより、ローカル・コミュニティの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"とすればテキストが黒に設定されます。
複数の画像と動画の挿入
インフォボックスの一か所で複数の画像を使用する場合<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>
}}
この機能のさらなる情報については英語版のスレッドを参照。
インフォボックス内に動画を埋め込みたいという場合には、<image>タグを使用して、画像の時と同じような作業での作成が可能です。画像の代わりに動画をインフォボックスに追加すると、動画のサムネイルとプレイアイコン、そして動画の長さがインフォボックス内に表示され、クリックすると動画プレイヤーがポップアップします。複数の動画を埋め込みたい場合には、複数の<image>タグを使用します。
高度な使用法
基本的なインフォボックスを作成したら、さらに高度なフィールドを使用する方法についても学んでみましょう。このセクションでは、右のようなインフォボックスを作成します。
タイトル欄と画像欄の前に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>
グループタグの並列レイアウト
グループタグには、すべてのコンテンツが横1列に隣合わせで表示される並列レイアウトの指定を含めることができます。これには、グループタグにlayout="horizontal"属性を追加します。
<group layout="horizontal">
...
</group>
グループタグのスマートレイアウト
“スマート”レイアウトは並列レイアウトに似た機能ですが、同じグループに属すデータフィールドを改行することができます。1行目のデータフィールドの個数が制限数を超えると、次のフィールドは下の行に移ります。フィールド内のアイテムは横幅に合わせて調節されます。
スマートグループを使うには、row-items="3"(数字は行の制限数)と書き込んでください。スマートグループ内のアイテムはデフォルトで並列レイアウトになっているため、スマートグループを使う際にこの属性を追加する必要はありません。また、個別の<data>タグにlayout="default"を追加すれば、スマートグループの中で垂直と並列のレイアウトを組み合わせることができます。
特定のフィールドだけスペースを広く取りたい場合、<data>タグにspan="2"と設定すれば、フィールドが数値の分だけ(この場合2つ分)広くなります。
<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>
すべてのグループ要素の表示を強制する
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 = [[ファイル:Greyjoy mini shield.png|20px|right|link=House Greyjoy]] [[グレジョイ家]]
|side2 = [[ファイル:Baratheon mini shield.png|20px|right|link=House Baratheon]] [[鉄の玉座]]
|commanders1 = 不明
|commanders2 = [[スタニス・バラシオン]]卿
|casual1 = 不明
|casual2 = 不明
}}
グループの折りたたみ
<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>
右の例は、次のような構文によってレンダリングされています。
<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)
例
関連情報
- ビジュアルエディタでの基本的なインフォボックス編集方法 - インフォボックスの編集
- ポータブル・インフォボックスで使用するスタンダードなタグとその中で使えるWikiテキストのサンプル等についての詳細なリストは、ヘルプ:インフォボックス/タグをご覧ください。
- クラシック・インフォボックスをポータブルインフォボックスに移行する方法について - ヘルプ:インフォボックスの移行
- ヘルプ:インフォボックス/CSS
- ヘルプ:インフォボックス/タグ
さらに詳しく
- ヘルプ:インフォボックス/高度な情報 … ポータブル・インフォボックスについての詳細
- インフォボックスをポータブルにする利点とは?
- ポータブル対応していないインフォボックスの見つけ方
- ポータブル対応インフォボックステンプレートの作り方
- ポータブルインフォボックスのスタイリング方法
- FAQ
- ベストプラクティス
テクニカルインフォメーション
- インフォボックス作成の従来の方法についてはヘルプ:クラシック・インフォボックスをご覧ください
- クラシック, ポータブル, Lua: インフォボックスのタイプについて (英語)
- インフォボックスをきれいに見せるためのヒント
その他のヘルプとフィードバック
- ヘルプ:コンテンツでは、他のヘルプページを閲覧、検索することができます。
- 最新の情報やヘルプについては、コミュニティセントラルをご覧ください。
- この記事で不明確な点や、曖昧な点がございましたら、Fandomとの連絡方法をご確認ください。
- このヘルプはコミュニティセントラル内にて管理されています。