Fandom


(新しいインフォボックスの作成)
96行: 96行:
 
* インフォボックスのカスタムCSSクラスを指定するには'''theme'''属性を使用します
 
* インフォボックスのカスタムCSSクラスを指定するには'''theme'''属性を使用します
 
* '''theme-source'''属性を使用すると、テンプレート・パラメータからCSSクラスを変更することができます
 
* '''theme-source'''属性を使用すると、テンプレート・パラメータからCSSクラスを変更することができます
インフォボックス・タグ内で両方の属性を使用した場合は、'''theme'''属性がデフォルトとして扱われます。
 
   
;テーマ
+
インフォボックス・タグ内で両方の属性を使用した場合は、'''theme'''属性がデフォルトとして扱われます。また、'''theme'''と'''theme-source'''の値となる属性内のスペスはハイフンイナス(-)に変換されるため、これを使用して追加できるのは、一つのクラスだけとなります。
たとえば、'''theme="delta"'''と指定すると、インフォボックスHTMLに'''pi-theme-delta'''と呼ばれるクラスが追加されます。これをCSSを使ってカスタマイズできます。
 
   
<syntaxhighlight lang="css">
+
インフォボックスのテーマやより細かいカスタマイズについて詳しくは、'''[[ヘルプ:ポータブルインフォボックス/CSS]]'''をご覧ください。
.pi-theme-delta {
 
//custom styles
 
}
 
</syntaxhighlight>
 
   
;テーマソース
+
==動画の挿入==
たとえば'''theme-source="location"'''指定すると、記事のインフォボックスで'''location'''を指定した場合、''値''がクラスとして使用されます。
+
インフォボックス内に動画を埋め込みいう場合には<nowiki><image></nowiki>タグを使用して、画像の時同じような作業での作成が可能です。画像の代わりに動画をインフォボックスに追加すると、動画サムネイルとプレイアイコン、そして動画の長さがインフォボックス内に表示され、クリックすると動画プレイヤーがポップアップます。複数の動画を埋め込み場合には複数<nowiki><image></nowiki>タグを使用ます。
 
例:
 
<pre>
 
<infobox layout="stacked" theme-source="location">
 
...
 
</infobox>
 
</pre>
 
 
<pre>
 
{{an infobox
 
|location = アフリカ
 
}}
 
</pre>
 
 
したがって、テンプレートのテーマのCSSは次のようになります。
 
 
<syntaxhighlight lang="css">
 
.pi-theme-africa {
 
//custom styles
 
}
 
</syntaxhighlight>
 
 
もしインフォボックス内の特定の項目をターゲットしたい時には、下記のようにします。
 
<syntaxhighlight lang="css">
 
.pi-theme-africa .item-type-title {
 
//custom styles
 
}
 
</syntaxhighlight>
 
   
 
==高度な使用法==
 
==高度な使用法==
267行: 266行:
   
 
==使用可能なタグ==
 
==使用可能なタグ==
インフォボックスべてのフィはXML規則を使用して宣言され、フールド設定応じ属性含む必要があります
+
ポータブル・インフォボックスで使用るスタンダードなタグとその中で使えるウキテキストサンプル等ついの詳細なリストは、'''[[ヘルプ:ポータブル・インフォボックス/タグ]]'''ご覧ください
 
{|class="article-table"
 
!タグ
 
!属性
 
!子タグ
 
!説明
 
|-
 
|rowspan="2"|'''infobox'''
 
|''theme'', ''theme-source'', ''layout'',
 
|''title'', ''image'', ''header'', ''navigation'', ''data'', ''group''
 
|他のすべてのタグを含む、インフォボックスのスコープを定めるためのタグです
 
|-
 
|colspan="4" class="mw-collapsible mw-collapsed"|使用例:
 
<pre>
 
<infobox layout="stacked">
 
<title source="title_source" />
 
</infobox>
 
</pre>
 
 
HTML出力:
 
<pre style="white-space:pre-wrap;">
 
<aside class="portable-infobox">
 
<div class="portable-infobox-item item-type-title portable-infobox-item-margins">
 
<h2 class="portable-infobox-title">タイトル</h2>
 
</div>
 
</aside>
 
</pre>
 
|-
 
|rowspan="2"|'''data'''
 
|''source''
 
|''default'', ''label'', ''format''
 
|標準的なキー値タグです
 
|-
 
|colspan="4" class="mw-collapsible mw-collapsed"|使用例:
 
<pre>
 
<data source="name">
 
<label>名</label>
 
<default>太郎</default>
 
</data>
 
</pre>
 
 
HTML出力:
 
<pre style="white-space:pre-wrap;">
 
<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>
 
</pre>
 
|-
 
|rowspan="2"|'''label'''
 
|なし
 
|なし
 
|labelタグは他のタグの中でのみ使用でき、詳細情報について子タグの列を参照します。 '''ウィキテキスト'''を使用できます。
 
|-
 
|colspan="4" class="mw-collapsible mw-collapsed"|使用例:
 
<pre>
 
<label>名</label>
 
</pre>
 
HTML出力:
 
<pre style="white-space:pre-wrap;">
 
<h3 class="portable-infobox-item-label portable-infobox-header-font">名</h3>
 
</pre>
 
|-
 
|rowspan="2"|'''default'''
 
|なし
 
|なし
 
|defaultタグは他のタグの中でのみ使用でき、詳細情報について子タグの列を参照します。 '''ウィキテキスト'''を使用できます。
 
|-
 
|colspan="4" class="mw-collapsible mw-collapsed"|使用例:
 
<pre>
 
<default>太郎</default>
 
</pre>
 
HTML出力:
 
<pre>
 
<div class="portable-infobox-item-value">太郎</div>
 
</pre>
 
|-
 
|rowspan="2"|'''format'''
 
|なし
 
|なし
 
|formatタグは他のタグの中でのみ使用でき、詳細情報について子タグの列を参照します。 '''ウィキテキスト'''を使用できます。
 
|-
 
|colspan="4" class="mw-collapsible mw-collapsed"|使用例:
 
<pre>
 
<data source="dollars">
 
<label>通常価格</label>
 
<format>{{{dollars}}}ドル</format>
 
</data>
 
</pre>
 
HTML出力:
 
<pre>
 
<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>
 
</pre>
 
|-
 
|rowspan="2"|'''title'''
 
|''source''
 
|''default'', ''format''
 
|1つのインフォボックスごとに1回のみ使用でき、インフォボックスのタイトルを示します。
 
|-
 
|colspan="4" class="mw-collapsible mw-collapsed"|使用例:
 
<pre>
 
<title source="title_source">
 
<default>{{PAGENAME}}</default>
 
</title>
 
</pre>
 
 
HTML出力:
 
<pre style="white-space:pre-wrap;">
 
<div class="portable-infobox-item item-type-title portable-infobox-item-margins">
 
<h2 class="portable-infobox-title">ページ名</h2>
 
</div>
 
</pre>
 
|-
 
|rowspan="2"|'''image'''
 
|''source''
 
|''alt'', ''caption'', ''default''
 
|imageタグはインフォボックス内に画像を挿入するために使用します。
 
|-
 
|colspan="4" class="mw-collapsible mw-collapsed"|使用例:
 
<pre>
 
<image source="img_name" />
 
</pre>
 
 
HTML出力:
 
<pre style="white-space:pre-wrap;">
 
<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>
 
</pre>
 
|-
 
|rowspan="2"|'''alt'''
 
|''source''
 
|''default''
 
|画像タグ内でのみ使用できます。
 
|-
 
|colspan="4" class="mw-collapsible mw-collapsed"|使用例:
 
<pre>
 
<image source="image">
 
<alt source="alternative_title">
 
<default>デフォルトの代替テキスト</default>
 
</alt>
 
</image>
 
</pre>
 
 
HTML出力:
 
<pre style="white-space:pre-wrap;">
 
<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>
 
</pre>
 
|-
 
|rowspan="2"|'''caption'''
 
|''source''
 
|''default'', ''format''
 
|画像タグ内でのみ使用できます。
 
|-
 
|colspan="4" class="mw-collapsible mw-collapsed"|使用例:
 
<pre>
 
<caption source="caption">
 
<default>デフォルトの代替テキスト</default>
 
</caption>
 
</pre>
 
 
HTML出力:
 
<pre style="white-space:pre-wrap;">
 
<figcaption class="portable-infobox-item-margins portable-infobox-image-caption">デフォルトの代替テキスト</figcaption>
 
</pre>
 
|-
 
|rowspan="2"|'''group'''
 
|''layout'', ''show="incomplete"''
 
|''data'', ''header'', ''image''
 
|フィールドのグループ化に使用し、グループごとに見出しを指定できます。 すべてのフィールドが空の場合、見出しも含むグループ全体がレンダリングされません。
 
|-
 
| colspan="4" class="mw-collapsible mw-collapsed"|使用例:
 
<pre>
 
<group>
 
<header>グループ名</header>
 
<data source="value1" />
 
</group>
 
</pre>
 
 
HTML出力:
 
<pre style="white-space:pre-wrap;">
 
<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>
 
</pre>
 
|-
 
|rowspan="2"|'''header'''
 
| なし
 
| なし
 
| headerタグはセクションまたはタグのグループの先頭を示します。
 
|-
 
|colspan="4" class="mw-collapsible mw-collapsed"|使用例:
 
<pre>
 
<header>見出しテキスト</header>
 
</pre>
 
 
HTML出力:
 
<pre style="white-space:pre-wrap;">
 
<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>
 
</pre>
 
|-
 
|rowspan="2"|'''navigation'''
 
|なし
 
|なし
 
|'''ウィキテキスト'''の指定に使用します。
 
|-
 
|colspan="4" class="mw-collapsible mw-collapsed"|使用例:
 
<pre>
 
<navigation>[[Links]]</navigation>
 
</pre>
 
 
HTML出力:
 
<pre style="white-space:pre-wrap;">
 
<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>
 
</pre>
 
|}
 
   
 
==例==
 
==例==
273行: 272行:
 
*[[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]]'''
  +
*'''[[ヘルプ:ポータブル・インフォボックス/タグ]]'''
  +
*[[ヘルプ:CSS]]
   
 
==その他のヘルプとフィードバック==
 
==その他のヘルプとフィードバック==

2015年9月1日 (火) 08:43時点における版

ヘルプ
90210-infobox-light

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

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

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

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

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

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

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

インフォボックスの作成

Tutorialinfobox

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

<infobox layout="stacked">
<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 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>

これで、記事内でテンプレートを使用してインフォボックスを記事に表示することができます。

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

スタイリングと表示

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

レイアウトのオプション

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

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

テーマのカスタム設定

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

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

インフォボックス・タグ内で両方の属性を使用した場合は、theme属性がデフォルトとして扱われます。また、themetheme-sourceの値となる属性内のスペースはハイフンマイナス(-)に変換されるため、これを使用して追加できるのは、一つのクラスだけとなります。

インフォボックスのテーマやより細かいカスタマイズについて詳しくは、ヘルプ:ポータブルインフォボックス/CSSをご覧ください。

動画の挿入

インフォボックス内に動画を埋め込みたいという場合には、<image>タグを使用して、画像の時と同じような作業での作成が可能です。画像の代わりに動画をインフォボックスに追加すると、動画のサムネイルとプレイアイコン、そして動画の長さがインフォボックス内に表示され、クリックすると動画プレイヤーがポップアップします。複数の動画を埋め込みたい場合には、複数の<image>タグを使用します。

高度な使用法

Advancedinfobox

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

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

タイトル欄と画像欄の前に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>
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 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 = [[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>

使用可能なタグ

ポータブル・インフォボックスで使用するスタンダードなタグとその中で使えるウィキテキストのサンプル等についての詳細なリストは、ヘルプ:ポータブル・インフォボックス/タグをご覧ください。

関連ページ

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

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