Fandom


(Charicocco がページ「ヘルプ:PortableInfoboxes」を「ヘルプ:ポータブル・インフォボックス」へと移動しました)
538行: 538行:
 
==その他のヘルプとフィードバック==
 
==その他のヘルプとフィードバック==
 
{{Help and feedback section}}
 
{{Help and feedback section}}
 
 
[[カテゴリ:ヘルプ]]
 
[[カテゴリ:ヘルプ]]
 
[[カテゴリ:編集]]
 
[[カテゴリ:編集]]
  +
{{DEFAULTSORT:ほたふるいんふおほつくす}}
   
 
[[en:Help:PortableInfoboxes]]
 
[[en:Help:PortableInfoboxes]]

2015年7月25日 (土) 06:06時点における版

90210-infobox-light

インフォボックスのサンプル

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

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

ウィキアでは現在、さまざまな端末でインフォボックスが適切に表示されるよう、インフォボックスをコード化するための新しい方法を開発しています(詳細については下記を参照)。 新しいインフォボックスのコードについて詳しくは、英語版コミュニティセントラルのスレッドをご覧ください。

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

インフォボックスは他のテンプレートと同様の方法で記事に追加することができ、エディタに組み込まれているテンプレートツールか、ソースモードを使用します。 後者を使用する場合は、通常、まずテンプレートのドキュメント(たいていはテンプレートのページの下の方にあります)から構文をコピーして記事の中に貼り付け、イコールの記号(=)の後を適切な情報に変更します。 たとえば、次のようにします。

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

新しいインフォボックスの作成

Tutorialinfobox

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

<infobox>
<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>
<title source="name"><default>{{PAGENAME}}</default></title>
<image source="image" />
<data source="season"><label>シーズン</label></data>
<data source="first"><label>第一場面</label></data>
</infobox>

これで、記事内のテンプレートを使用してインフォボックスを取得できます。

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

スタイリングと表示

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

レイアウトのオプション

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

  • デフォルトレイアウト - <data>タグで指定するラベルが値の上に表示されます
<infobox>
...
</infobox>
  • 表形式レイアウト - <data>タグで指定するラベルが値の左側に表示されます
<infobox layout="tabular">
...
</infobox>

テーマのカスタム設定

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

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

インフォボックス・タグ内で両方の属性を使用した場合は、theme属性がデフォルトとして扱われます。

テーマ

たとえば、theme="delta"と指定すると、インフォボックスHTMLにportable-infobox-theme-deltaと呼ばれるクラスが追加されます。これをCSSを使ってカスタマイズできます。

.portable-infobox-theme-delta {
//custom styles
}
テーマソース

たとえば、theme-source="location"と指定すると、記事のインフォボックスでlocationを指定した場合、そのがクラスとして使用されます。

例:

<infobox theme-source="location">
...
</infobox>
{{an infobox
|location = アフリカ
}}

したがって、テンプレートのテーマのCSSは次のようになります。

.portable-infobox-theme-africa {
//custom styles
}

高度な使用法

Advancedinfobox

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

シンプルなタグを使用した順序オプション

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

<infobox>
<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>
<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>
<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]] [[House Greyjoy]]
|side2 = [[File:Baratheon mini shield.png|20px|right|link=House Baratheon]] [[Iron Throne]]
|commanders1 = 不明
|commanders2 = [[スタニス・バラシオン]]
|casual1 = Unknown
|casual2 = Unknown
}}

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

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

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

使用例:

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

アイコンを追加してみます。

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

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

Field mutators

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

<header>Price to buy</header>
<data source="buyh">
<label>Price with Haggling</label>
<format>{{{buyh}}} {{oren2}}</format>
</data>
<data source="buy">
<label>Undiscounted price</label>
<format>{{{buy}}} {{oren2}}</format>
</data>
<data source="sell">
<label>Price to sell</label>
<format>{{{sell}}} {{oren2}}</format>
</data>
<data source="weight">
<label>Weight</label>
<format>{{{weight}}} {{weight}}</format>
</data>

使用可能なタグ

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

タグ 属性 子タグ 説明
infobox theme, theme-source, layout, title, image, header, navigation, data, group 他のすべてのタグを含む、インフォボックスのスコープを定めるためのタグです
使用例:
<infobox>
<title source="title_source" />
</infobox>

HTML出力:

<aside class="portable-infobox">
<div class="portable-infobox-item item-type-title portable-infobox-item-margins">
<h2 class="portable-infobox-title">タイトル</h2>
</div>
</aside>
data source default, label, format 標準的なキー値タグです
使用例:
<data source="name">
<label>名</label>
<default>太郎</default>
</data>

HTML出力:

<div class="portable-infobox-item item-type-key-val portable-infobox-item-margins">
<h3 class="portable-infobox-item-label portable-infobox-header-font">名</h3>
<div class="portable-infobox-item-value">太郎</div>
</div>
label なし なし labelタグは他のタグの中でのみ使用でき、詳細情報について子タグの列を参照します。 ウィキテキストを使用できます。
使用例:
<label>名</label>

HTML出力:

<h3 class="portable-infobox-item-label portable-infobox-header-font">名</h3>
default なし なし defaultタグは他のタグの中でのみ使用でき、詳細情報について子タグの列を参照します。 ウィキテキストを使用できます。
使用例:
<default>太郎</default>

HTML出力:

<div class="portable-infobox-item-value">太郎</div>
format なし なし formatタグは他のタグの中でのみ使用でき、詳細情報について子タグの列を参照します。 ウィキテキストを使用できます。
使用例:
<data source="dollars">
<label>通常価格</label>
<format>{{{dollars}}}ドル</format>
</data>

HTML出力:

<div class="portable-infobox-item item-type-key-val portable-infobox-item-margins">
<h3 class="portable-infobox-item-label">通常価格</h3>
<div class="portable-infobox-item-value">15ドル</div>
</div>
title source default, format 1つのインフォボックスごとに1回のみ使用でき、インフォボックスのタイトルを示します。
使用例:
<title source="title_source">
<default>{{PAGENAME}}</default>
</title>

HTML出力:

<div class="portable-infobox-item item-type-title portable-infobox-item-margins">
<h2 class="portable-infobox-title">ページ名</h2>
</div>
image source alt, caption, default imageタグはインフォボックス内に画像を挿入するために使用します。
使用例:
<image source="img_name" />

HTML出力:

<div class="portable-infobox-item item-type-image no-margins">
<figure>
<a href="/wiki/File:Image.jpg" class="image image-thumbnail" title="">
<img src="Image.jpg" class="portable-infobox-image" alt="" data-image-key="Image.jpg" data-image-name="Image.jpg">
</a>
</figure>
</div>
alt source default 画像タグ内でのみ使用できます。
使用例:
<image source="image">
<alt source="alternative_title">
<default>デフォルトの代替テキスト</default>
</alt>
</image>

HTML出力:

<div class="portable-infobox-item item-type-image no-margins">
<figure>
<a href="/wiki/File:Image.jpg" class="image image-thumbnail" title="">
<img src="Image.jpg" class="portable-infobox-image" alt="Default alt text" data-image-key="Image.jpg" data-image-name="Image.jpg">
</a>
</figure>
</div>
caption source default, format 画像タグ内でのみ使用できます。
使用例:
<caption source="caption">
<default>デフォルトの代替テキスト</default>
</caption>

HTML出力:

<figcaption class="portable-infobox-item-margins portable-infobox-image-caption">デフォルトの代替テキスト</figcaption>
group layout, show="incomplete" data, header, image フィールドのグループ化に使用し、グループごとに見出しを指定できます。 すべてのフィールドが空の場合、見出しも含むグループ全体がレンダリングされません。
使用例:
<group>
<header>グループ名</header>
<data source="value1" />
</group>

HTML出力:

<section class="portable-infobox-item item-type-group">
<div class="portable-infobox-item item-type-header portable-infobox-item-margins portable-infobox-header-background">
<h2 class="portable-infobox-header portable-infobox-header-font">グループ名</h2>
</div>
<div class="portable-infobox-item item-type-key-val portable-infobox-item-margins">
<div class="portable-infobox-item-value">値</div>
</div>
</section>
header なし なし headerタグはセクションまたはタグのグループの先頭を示します。
使用例:
<header>見出しテキスト</header>

HTML出力:

<div class="portable-infobox-item item-type-header portable-infobox-item-margins portable-infobox-header-background">
<h2 class="portable-infobox-header portable-infobox-header-font">見出しテキスト</h2>
</div>
navigation なし なし ウィキテキストの指定に使用します。
使用例:
<navigation>[[Links]]</navigation>

HTML出力:

<navigation class="portable-infobox-navigation portable-infobox-item-margins portable-infobox-secondary-background portable-infobox-secondary-font">
<a href="/wiki/Links" title="Links">リンク</a>
</navigation>

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

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