編集の要約なし タグ: rte-source |
|||
(4人の利用者による、間の21版が非表示) | |||
1行目: | 1行目: | ||
{{Helpline}} |
{{Helpline}} |
||
+ | {{Untranslated help|w:Help:Infoboxes}} |
||
+ | <tabber> |
||
+ | Video1={{Uni-vid|Wikia ユニバーシティ インフォボックスの使い方}} |
||
+ | |-| |
||
+ | Video2={{Uni-vid|Fandom University - Customizing_Infobox_Templates}} |
||
+ | </tabber> |
||
{{Tocright}} |
{{Tocright}} |
||
+ | {{Infobox/Feature |
||
− | |||
+ | |image = Information_person.jpg |
||
⚫ | |||
+ | |description = あらゆるプラットフォームに対応して、その記事の情報をまとめている。 |
||
+ | |purpose = 情報の要約 |
||
+ | |popularity = 高 |
||
+ | |portable = 必須 |
||
+ | |styling = 推奨 |
||
+ | |stage= release |
||
+ | }} |
||
'''インフォボックス'''はファクトシートや雑誌の囲み記事のようなもので、ページのトピックの概要をまとめて紹介する形式になっており、 重要なポイントが一目でわかるよう読みやすく整理されています。 インフォボックスは通常、コミュニティ内で統一されるよう[[ヘルプ:テンプレート|テンプレート]]を使って作成します。 |
'''インフォボックス'''はファクトシートや雑誌の囲み記事のようなもので、ページのトピックの概要をまとめて紹介する形式になっており、 重要なポイントが一目でわかるよう読みやすく整理されています。 インフォボックスは通常、コミュニティ内で統一されるよう[[ヘルプ:テンプレート|テンプレート]]を使って作成します。 |
||
− | Fandomでは現在、さまざまな端末でインフォボックスが適切に表示されるよう、インフォボックスをコード化するための新しい方法を開発しています(詳細については下記を参照)が記事内での使い方は変わりません。しかしテンプレートのページが変化します。 |
+ | Fandomでは現在、さまざまな端末でインフォボックスが適切に表示されるよう、インフォボックスをコード化するための新しい方法を開発しています(詳細については下記を参照)が記事内での使い方は変わりません。しかしテンプレートのページが変化します。[[ヘルプ:クラシック・インフォボックス|クラシック・インフォボックス]]からの移行のヘルプは[[ヘルプ:インフォボックスの移行]]をご覧ください。 |
'''関連リンク:''' |
'''関連リンク:''' |
||
− | * |
+ | *ビジュアルエディタでの基本的なインフォボックス編集方法 - '''[[ヘルプ:インフォボックスの編集|インフォボックスの編集]]''' |
− | * |
+ | * ポータブル・インフォボックスで使用するスタンダードなタグとその中で使えるWikiテキストのサンプル等についての詳細なリストは、'''[[ヘルプ:インフォボックス/タグ]]'''をご覧ください。 |
− | *インフォボックス・ |
+ | * [[ヘルプ:クラシック・インフォボックス|クラシック・インフォボックス]]をポータブルインフォボックスに移行する方法について - '''[[ヘルプ:インフォボックスの移行]]''' |
− | |||
− | __TOC__ |
||
− | ==インフォボックスの使い方== |
+ | == インフォボックスの使い方 == |
[[ファイル:JA_selecting_infobox_from_VE.png|thumb|150px|ビジュアルエディタのインフォボックス挿入]] |
[[ファイル:JA_selecting_infobox_from_VE.png|thumb|150px|ビジュアルエディタのインフォボックス挿入]] |
||
インフォボックスは他のテンプレートと同様の方法で記事に追加することができ、[[ヘルプ:編集|エディタ]]に組み込まれているテンプレートツールか、ソースモードを使用します。[[ヘルプ:ビジュアルエディタ|ビジュアルエディタ]]を使用すれば「挿入」ボタンから簡単にポータブルインフォボックスを挿入できます。 |
インフォボックスは他のテンプレートと同様の方法で記事に追加することができ、[[ヘルプ:編集|エディタ]]に組み込まれているテンプレートツールか、ソースモードを使用します。[[ヘルプ:ビジュアルエディタ|ビジュアルエディタ]]を使用すれば「挿入」ボタンから簡単にポータブルインフォボックスを挿入できます。 |
||
34行目: | 47行目: | ||
ポータブルインフォボックスの加え方は他のテンプレートと同じです。しかしテンプレートページのマークアップが少々異なります。下記を参照。 |
ポータブルインフォボックスの加え方は他のテンプレートと同じです。しかしテンプレートページのマークアップが少々異なります。下記を参照。 |
||
+ | {{Clear}} |
||
⚫ | |||
+ | == インフォボックスの作成 == |
||
− | [[ |
+ | [[ファイル:Tutorialinfobox.png|thumb|180px|''冬がやってくる'']] |
最初に好きな名前(例: テンプレート:ExampleInfobox)で新しいテンプレートを作成します。かつてはtablesやdivsを使用しましたが今はinfoboxタグを使用します。まずは、タイトルと画像を含む基本的なインフォボックスを作成してみましょう。 |
最初に好きな名前(例: テンプレート:ExampleInfobox)で新しいテンプレートを作成します。かつてはtablesやdivsを使用しましたが今はinfoboxタグを使用します。まずは、タイトルと画像を含む基本的なインフォボックスを作成してみましょう。 |
||
75行目: | 89行目: | ||
</syntaxhighlight> |
</syntaxhighlight> |
||
− | ==スタイリングと表示== |
+ | == スタイリングと表示 == |
上記のようなコードを使用したインフォボックスは、[[ヘルプ:テーマデザイナー|コミュニティのテーマ]]に合わせて自動的にデザインされます。 また、変数が指定されていない行は、表示されません('default'タグを使用していない場合)。 |
上記のようなコードを使用したインフォボックスは、[[ヘルプ:テーマデザイナー|コミュニティのテーマ]]に合わせて自動的にデザインされます。 また、変数が指定されていない行は、表示されません('default'タグを使用していない場合)。 |
||
− | ===レイアウトのオプション=== |
+ | === レイアウトのオプション === |
インフォボックスには、次の2つのレイアウトオプションがあります。 |
インフォボックスには、次の2つのレイアウトオプションがあります。 |
||
103行目: | 117行目: | ||
|- |
|- |
||
| |
| |
||
− | [[ |
+ | [[ファイル: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]]からインフォボックスをデザインできるようになります。 |
デフォルトインフォボックスのテーマは、'''infobox'''タグの'''theme'''または'''theme-source'''属性を使って上書きすることができます。これにより、ローカル・コミュニティの[[ヘルプ:CSSとJavaScriptのカスタマイゼーション|CSS]]からインフォボックスをデザインできるようになります。 |
||
118行目: | 132行目: | ||
インフォボックスのテーマやより細かいカスタマイズについて詳しくは、'''[[ヘルプ:ポータブルインフォボックス/CSS]]'''をご覧ください。' |
インフォボックスのテーマやより細かいカスタマイズについて詳しくは、'''[[ヘルプ:ポータブルインフォボックス/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"'''とすればテキストが黒に設定されます。 |
||
⚫ | |||
⚫ | |||
インフォボックスの一か所で複数の画像を使用する場合<code><gallery></code>タグを加えます。 |
インフォボックスの一か所で複数の画像を使用する場合<code><gallery></code>タグを加えます。 |
||
137行目: | 159行目: | ||
インフォボックス内に動画を埋め込みたいという場合には、<image>タグを使用して、画像の時と同じような作業での作成が可能です。画像の代わりに動画をインフォボックスに追加すると、動画のサムネイルとプレイアイコン、そして動画の長さがインフォボックス内に表示され、クリックすると動画プレイヤーがポップアップします。複数の動画を埋め込みたい場合には、複数の<image>タグを使用します。 |
インフォボックス内に動画を埋め込みたいという場合には、<image>タグを使用して、画像の時と同じような作業での作成が可能です。画像の代わりに動画をインフォボックスに追加すると、動画のサムネイルとプレイアイコン、そして動画の長さがインフォボックス内に表示され、クリックすると動画プレイヤーがポップアップします。複数の動画を埋め込みたい場合には、複数の<image>タグを使用します。 |
||
− | ==高度な使用法== |
+ | == 高度な使用法 == |
− | [[ |
+ | [[ファイル:Advancedinfobox.png|thumb|200px|グループ化]] |
基本的なインフォボックスを作成したら、さらに高度なフィールドを使用する方法についても学んでみましょう。このセクションでは、右のようなインフォボックスを作成します。 |
基本的なインフォボックスを作成したら、さらに高度なフィールドを使用する方法についても学んでみましょう。このセクションでは、右のようなインフォボックスを作成します。 |
||
155行目: | 177行目: | ||
<div style=margin-top:1em;> </div> |
<div style=margin-top:1em;> </div> |
||
− | ===groupタグの中で情報をグループ化する=== |
+ | === groupタグの中で情報をグループ化する === |
次のフィールドでは、複数のフィールドを1つのグループにまとめて、グループごとに見出しを付けることができます。 宣言したフィールドに値を指定しないと、そのフィールドは表示されませんので、ご注意ください。 このルールはgroupタグ内の項目でも同様です。特定のグループ内のフィールド(見出しタグ以外)のどれにも値が指定されていない場合、グループ全体が表示されません。 |
次のフィールドでは、複数のフィールドを1つのグループにまとめて、グループごとに見出しを付けることができます。 宣言したフィールドに値を指定しないと、そのフィールドは表示されませんので、ご注意ください。 このルールはgroupタグ内の項目でも同様です。特定のグループ内のフィールド(見出しタグ以外)のどれにも値が指定されていない場合、グループ全体が表示されません。 |
||
177行目: | 199行目: | ||
<div style=margin-top:1em;> </div> |
<div style=margin-top:1em;> </div> |
||
− | ===グループタグの |
+ | === グループタグの並列レイアウト === |
− | [[ |
+ | [[ファイル:Screen_Shot_2015-06-16_at_13.27.08.png|thumb|200px|並列レイアウト]] |
グループタグには、すべてのコンテンツが横1列に隣合わせで表示される並列レイアウトの指定を含めることができます。これには、グループタグに'''layout="horizontal"'''属性を追加します。 |
グループタグには、すべてのコンテンツが横1列に隣合わせで表示される並列レイアウトの指定を含めることができます。これには、グループタグに'''layout="horizontal"'''属性を追加します。 |
||
189行目: | 211行目: | ||
<div style=margin-top:1em;> </div> |
<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"'''を使用して、'''空白'''の値があってもグループ要素の'''すべて'''が表示されるよう強制することができます。ただし、''すべて''が空の場合は、そのグループは表示されません。 |
||
253行目: | 297行目: | ||
|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 = [[スタニス・バラシオン]]卿 |
||
264行目: | 308行目: | ||
<div style=margin-top:1em;> </div> |
<div style=margin-top:1em;> </div> |
||
− | ===グループの折りたたみ=== |
+ | === グループの折りたたみ === |
− | [[ |
+ | [[ファイル:PI-Collapse.png|thumb|クリックで折りたためるグループ]] |
<code><group></code>タグに'''collapse="open"''' か'''collapse="closed"'''を加えることで、グループの折りたたみが可能になります。グループのヘッダーをクリックすると表示/非表示の切り替えができます。 |
<code><group></code>タグに'''collapse="open"''' か'''collapse="closed"'''を加えることで、グループの折りたたみが可能になります。グループのヘッダーをクリックすると表示/非表示の切り替えができます。 |
||
278行目: | 322行目: | ||
注意:コンテンツを含んでいるヘッダーは、これを機能させるためグループタグに従います。 |
注意:コンテンツを含んでいるヘッダーは、これを機能させるためグループタグに従います。 |
||
− | ==高度なオプション== |
+ | == 高度なオプション == |
− | ===フィールドのフォーマット=== |
+ | === フィールドのフォーマット === |
− | データの前後に情報を追加する場合(アイコンやカテゴリを追加するなど)や、渡された値の処理が必要 |
+ | データの前後に情報を追加する場合(アイコンやカテゴリを追加するなど)や、渡された値の処理が必要な場合には、フィールドのフォーマットを使用します。 |
* '''format'''タグ内にnodeを指定した場合、'''source=に指定した変数は'''format'''タグの中で指定したとおりにフォーマット/変更されます''' |
* '''format'''タグ内にnodeを指定した場合、'''source=に指定した変数は'''format'''タグの中で指定したとおりにフォーマット/変更されます''' |
||
301行目: | 345行目: | ||
右の例は、次のような構文によってレンダリングされています。 |
右の例は、次のような構文によってレンダリングされています。 |
||
− | [[ |
+ | [[ファイル:Field_mutators.png|thumb|フォーマットを含むフィールド|250px]] |
<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;"> |
<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;"> |
||
323行目: | 367行目: | ||
</syntaxhighlight> |
</syntaxhighlight> |
||
− | ===パーサー関数=== |
+ | === パーサー関数 === |
[[ヘルプ:パーサー関数|パーサー関数]]をインフォボックスに加えられます。しかし、引数(タグかデータソース)が空白の場合自動的に非表示となります。 |
[[ヘルプ:パーサー関数|パーサー関数]]をインフォボックスに加えられます。しかし、引数(タグかデータソース)が空白の場合自動的に非表示となります。 |
||
359行目: | 403行目: | ||
switch文の空文字列でテストするのは不思議に感じるかもしれませんが、すでに'''デフォルト'''タグでカバーされているのです。例:<code>|=(unknown rank)</code> |
switch文の空文字列でテストするのは不思議に感じるかもしれませんが、すでに'''デフォルト'''タグでカバーされているのです。例:<code>|=(unknown rank)</code> |
||
− | ==例== |
+ | == 例 == |
− | *[[w:c:godofwar:Kratos|Kratos]](<small>[[w:c:godofwar:Template:War Box|ソース]]</small>) |
+ | * [[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: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>) |
+ | * [[w:c:dune:Battle of Arrakeen|Battle of Arrakeen]](<small>[[w:c:dune:Template:Battle|ソース]]</small>) |
+ | == 関連情報 == |
||
⚫ | |||
− | * |
+ | * [[ヘルプ:インフォボックス/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:Даведка:Інфабоксы]] |
||
[[de:Hilfe:Infoboxen]] |
[[de:Hilfe:Infoboxen]] |
||
[[en:Help:Infoboxes]] |
[[en:Help:Infoboxes]] |
||
377行目: | 441行目: | ||
[[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:訊息框]] |
||
+ | |||
[[カテゴリ:ヘルプ]] |
[[カテゴリ:ヘルプ]] |
||
[[カテゴリ:編集]] |
[[カテゴリ:編集]] |
||
+ | [[カテゴリ:ポータビリティ]] |
2019年5月26日 (日) 09:42時点における版
- このヘルプには更新、または翻訳されていないコンテンツがあります。どなたでも翻訳にご協力いただくことができます。
- 原文 : w:Help:Infoboxes。
インフォボックスはファクトシートや雑誌の囲み記事のようなもので、ページのトピックの概要をまとめて紹介する形式になっており、 重要なポイントが一目でわかるよう読みやすく整理されています。 インフォボックスは通常、コミュニティ内で統一されるようテンプレートを使って作成します。
Fandomでは現在、さまざまな端末でインフォボックスが適切に表示されるよう、インフォボックスをコード化するための新しい方法を開発しています(詳細については下記を参照)が記事内での使い方は変わりません。しかしテンプレートのページが変化します。クラシック・インフォボックスからの移行のヘルプはヘルプ:インフォボックスの移行をご覧ください。
関連リンク:
- ビジュアルエディタでの基本的なインフォボックス編集方法 - インフォボックスの編集
- ポータブル・インフォボックスで使用するスタンダードなタグとその中で使えるWikiテキストのサンプル等についての詳細なリストは、ヘルプ:インフォボックス/タグをご覧ください。
- クラシック・インフォボックスをポータブルインフォボックスに移行する方法について - ヘルプ:インフォボックスの移行
インフォボックスの使い方
インフォボックスは他のテンプレートと同様の方法で記事に追加することができ、エディタに組み込まれているテンプレートツールか、ソースモードを使用します。ビジュアルエディタを使用すれば「挿入」ボタンから簡単にポータブルインフォボックスを挿入できます。
ソースモードを使用する場合は、通常、まずテンプレートのドキュメント(たいていはテンプレートのページの下の方にあります)から構文をコピーして記事の中に貼り付け、イコールの記号(=)の後を適切な情報に変更します。 たとえば、次のようにします。
{{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)
例
関連情報
- ヘルプ:インフォボックス/CSS
- ヘルプ:インフォボックス/タグ
- ポータブル・インフォボックスについての詳細はヘルプ:インフォボックス/高度な情報をご覧ください
- インフォボックス作成の従来の方法についてはヘルプ:クラシック・インフォボックスをご覧ください
さらに詳しく
- ヘルプ:インフォボックス/高度な情報
- インフォボックスをポータブルにする利点とは?
- ポータブル対応していないインフォボックスの見つけ方
- ポータブル対応インフォボックステンプレートの作り方
- ポータブルインフォボックスのスタイリング方法
- FAQ
- ベストプラクティス
テクニカルインフォメーション
- クラシック, ポータブル, Lua: インフォボックスのタイプについて (英語)
- インフォボックスをきれいに見せるためのヒント
その他のヘルプとフィードバック
- ヘルプ:コンテンツでは、他のヘルプページを閲覧、検索することができます。
- 最新の情報やヘルプについては、コミュニティセントラルをご覧ください。
- この記事で不明確な点や、曖昧な点がございましたら、Fandomとの連絡方法をご確認ください。
- このヘルプはコミュニティセントラル内にて管理されています。