ヘルプ:インフォボックス/タグ

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

原文 : w:Help:Infoboxes/Tags。

ポータブルインフォボックス では、様々な種類のタグやオプションを使用して、自分が好きなインフォボックスをデザインすることができます。下記は、スタンダードなタグのリスト、その中で使用できるヘルプ:ウィキテキストの例、HTMLのアウトプットです。どのタグを使用したらいいのか、またCSSはどのようにカスタマイズしたらいいのかを決めていただく際に、役立てていただくことができます。（詳しくはヘルプ:インフォボックス/CSSもぜひご覧ください。）

インフォボックスのすべてのフィールドはXML規則を使用して決められ、フィールドの設定に応じて属性を含む必要があります。

基本的なタグ

infobox

属性	theme theme-source layout accent-color-source accent-color-text-source accent-color-default accent-color-text-default
子タグ	title image header navigation data group

他のすべてのタグを含む、インフォボックスのスコープを定めるためのタグです。

入力	出力
<infobox> <title source="title_source" /> </infobox>	<aside class="portable-infobox pi-background pi-theme-wikia pi-layout-default"> <h2 class="pi-item pi-item-spacing pi-title">Title</h2> </aside>

title

属性	source
子タグ	default format

インフォボックスのタイトルを示します。Images used in titleタグで使われる画像はモバイル版では表示されません。.

入力	出力
<title source="title_source"> <default>{{PAGENAME}}</default> </title>	<h2 class="pi-item pi-item-spacing pi-title">Page name</h2>

data

属性	source span layout
子タグ	default label format

標準的なキー値タグです。

入力	出力
<data source="name"> <label>First name</label> <default>John</default> </data>	<div class="pi-item pi-item-spacing pi-data pi-border-color"> <h3 class="pi-secondary-font pi-data-label">First name</h3> <div class="pi-font pi-data-value">John</div> </div>

出力の修飾

label

属性	なし
子タグ	なし

labelタグは他のタグの中でのみ使用でき、詳細情報について子タグの列を参照します。 ウィキテキストを使用できます。

入力	出力
<label>First name</label>	<h3 class="pi-secondary-font pi-data-label">First name</h3>

default

属性	なし
子タグ	なし

defaultタグは"source"データが特定されていないとき他のタグの中でのみ使用でき、詳細情報について子タグの列を参照します。 ウィキテキストを使用できます。

入力	出力
<default>John</default>	<div class="pi-font pi-data-value">John</div>

format

属性	なし
子タグ	なし

formatタグは他のタグの中でのみ使用でき、詳細情報について子タグの列を参照します。 ウィキテキストを使用できます。

入力	出力
<data source="dollars"> <label>Regular price</label> <format>${{{dollars}}}</format> </data>	<div class="pi-item pi-item-spacing pi-data pi-border-color"> <h3 class="pi-secondary-font pi-data-label">Regular price</h3> <div class="pi-font pi-data-value">$15</div> </div>

画像タグ

image

属性	source
子タグ	alt caption default

imageタグはインフォボックス内に画像を挿入するために使用します。これはコミュニティのCSSを使う事によってのみ機能し手動でのサイズ調整はできません。複数の画像はギャラリータグを使うことによって設置されます。

ここでは、記事上で画像が選択されていない場合に画像を特定するためにdefaultタグが使われています。例えば、<default>Example.jpg</default>です。

入力	出力
<image source="image" />	<figure class="pi-item pi-image"> <a href=".../File:Image.jpg" class="image image-thumbnail" title=""> <img src="Image.jpg" class="pi-image-thumbnail" alt="" width="" height="" data-image-key="Image.jpg" data-image-name="Image.jpg"> </a> </figure>

alt

属性	source
子タグ	default

画像タグ内でのみ使用できます。

入力	出力
<image source="image"> <alt source="alternative_title"> <default>Default alt text</default> </alt> </image>	<figure class="pi-item pi-image"> <a href=".../File:Image.jpg" class="image image-thumbnail" title="Default alt text"> <img src="Image.jpg" class="pi-image-thumbnail" alt="Default alt text" width="" height="" data-image-key="Image.jpg" data-image-name="Image.jpg"> </a> </figure>

caption

属性	source
子タグ	default format

画像タグ内でのみ使用できます。

入力	出力
<image source="image"> <caption source="caption"> <default>My caption</default> </caption> </image>	<figcaption class="pi-item-spacing pi-caption">My caption</figcaption>

その他のタグ

group

属性	layout show collapse row-items
子タグ	data header image title navigation

フィールドのグループ化に使用し、グループごとに見出しを指定できます。 すべてのフィールドが空の場合、見出しを含めてグループ全体がレンダリングされません。ただし、show="incomplete"の属性を使用した場合、グループ内の項目のどれか一つでも入力がされていれば、そのグループ内の項目をすべて表示します。

デフォルトgroup

入力	出力
<group> <header>Group name</header> <data source="value1" /> </group>	<section class="pi-item pi-group pi-border-color"> <h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">Group name</h2> <div class="pi-item pi-item-spacing pi-data pi-border-color"> <div class="pi-font pi-data-value">Data value</div> </div> </section>

水平group

入力

出力

<group layout="horizontal"> <header>Group name</header> <data source="value1"> <label>Data label</label> </data> </group>

<section class="pi-item pi-group pi-border-color"> <table class="pi-horizontal-group"> <caption class="pi-secondary-font pi-secondary-background pi-item-spacing pi-header">Group name</caption> <thead> <tr> <th class="pi-secondary-font pi-horizontal-group-item pi-data-label pi-border-color pi-item-spacing">Data label</th> </tr> </thead> <tbody> <tr> <td class="pi-font pi-horizontal-group-item pi-data-value pi-border-color pi-item-spacing">Data value</td> </tr> </tbody> </table> </section>

スマートgroup

入力

出力

<group row-items="3"> <header>Section Header</header> <data source="row3"> <label>Label</label> </data> <data source="row4"> <label>Label</label> </data> <data source="row5"> <label>Label</label> </data> <data source="row6"> <label>Label</label> </data> <data source="row7"> <label>Label</label> </data> <data source="row8" layout="default"> <label>Label</label> </data> <data source="row9" layout="default"> <label>Label</label> </data> </group>

<section class="pi-item pi-group pi-border-color"><h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Section Header</h2> <section class="pi-item pi-smart-group pi-border-color"> <section class="pi-smart-group-head"> <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Label</h3> <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Label</h3> <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Label</h3> </section> <section class="pi-smart-group-body"> <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">CCC</div> <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">DDD</div> <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">EEE</div> </section> </section> <section class="pi-item pi-smart-group pi-border-color"> <section class="pi-smart-group-head"> <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Label</h3> <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Label</h3> </section> <section class="pi-smart-group-body"> <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">FFF</div> <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">GGG</div> </section> </section> <div class="pi-item pi-data pi-item-spacing pi-border-color"> <h3 class="pi-data-label pi-secondary-font">Label</h3> <div class="pi-data-value pi-font">HHH</div> </div> <div class="pi-item pi-data pi-item-spacing pi-border-color"> <h3 class="pi-data-label pi-secondary-font">Label</h3> <div class="pi-data-value pi-font">III</div> </div> </section>

header

属性	なし
子タグ	なし

headerタグはセクションまたはタグのグループの先頭を示します。

入力	出力
<header>見出しのテキスト</header>	デフォルトのgroup <h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">Header Text</h2> 水平のgroup <caption class="pi-secondary-font pi-secondary-background pi-item-spacing pi-header">Header Text</caption>

navigation

属性	なし
子タグ	なし

ウィキテキストの指定に使用します。

入力	出力
<navigation>[[リンク]]</navigation>	<nav class="pi-item-spacing pi-secondary-background pi-secondary-font pi-navigation"> <a href="/wiki/Link" title="Link">Link</a> </nav>

関連ページ

• ヘルプ:インフォボックス
• ヘルプ:インフォボックス/CSS

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

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