ポータブルインフォボックス では、様々な種類のタグやオプションを使用して、自分が好きなインフォボックスをデザインすることができます。下記は、スタンダードなタグのリスト、その中で使用できるヘルプ:ウィキテキストの例、HTMLのアウトプットです。どのタグを使用したらいいのか、またCSSはどのようにカスタマイズしたらいいのかを決めていただく際に、役立てていただくことができます。(詳しくはヘルプ:インフォボックス/CSSもぜひご覧ください。)
インフォボックスのすべてのフィールドはXML規則を使用して決められ、フィールドの設定に応じて属性を含む必要があります。
基本的なタグ
infobox
属性 |
|
---|---|
子タグ |
|
他のすべてのタグを含む、インフォボックスのスコープを定めるためのタグです。
<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
属性 |
|
---|---|
子タグ |
|
インフォボックスのタイトルを示します。Images used in title
タグで使われる画像はモバイル版では表示されません。[1].
<title source="title_source">
<default>{{PAGENAME}}</default>
</title>
<h2 class="pi-item pi-item-spacing pi-title">Page name</h2>
data
属性 |
|
---|---|
子タグ |
|
標準的なキー値タグです。
<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タグは他のタグの中でのみ使用でき、詳細情報について子タグの列を参照します。 ウィキテキストを使用できます。
default
属性 | なし |
---|---|
子タグ | なし |
defaultタグは"source"データが特定されていないとき他のタグの中でのみ使用でき、詳細情報について子タグの列を参照します。 ウィキテキストを使用できます。
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
属性 |
|
---|---|
子タグ |
|
imageタグはインフォボックス内に画像を挿入するために使用します。これはコミュニティのCSSを使う事によってのみ機能し手動でのサイズ調整はできません。複数の画像は{{#NewWindowLink:http://community.wikia.com/index.php?title=Thread:935527%7Cギャラリータグを使うことによって}}設置されます。
ここでは、記事上で画像が選択されていない場合に画像を特定するために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
属性 |
|
---|---|
子タグ |
|
画像タグ内でのみ使用できます。
<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>
属性 |
|
---|---|
子タグ |
|
画像タグ内でのみ使用できます。
<image source="image">
<caption source="caption">
<default>My caption</default>
</caption>
</image>
<figcaption class="pi-item-spacing pi-caption">My caption</figcaption>
その他のタグ
group
属性 |
|
---|---|
子タグ |
|
フィールドのグループ化に使用し、グループごとに見出しを指定できます。 すべてのフィールドが空の場合、見出しを含めてグループ全体がレンダリングされません。ただし、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>
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>
<nav class="pi-item-spacing pi-secondary-background pi-secondary-font pi-navigation">
<a href="/wiki/Link" title="Link">Link</a>
</nav>
関連ページ
その他のヘルプとフィードバック
- ヘルプ:コンテンツでは、他のヘルプページを閲覧、検索することができます。
- 最新の情報やヘルプについては、コミュニティセントラルをご覧ください。
- この記事で不明確な点や、曖昧な点がございましたら、Fandomとの連絡方法をご確認ください。
- このヘルプはコミュニティセントラル内にて管理されています。