(Adding explicit layout parameter) |
Charicocco (メッセージウォール | 投稿記録) 編集の要約なし タグ: sourceedit |
||
| 72行目: | 72行目: | ||
インフォボックスには、次の2つのレイアウトオプションがあります。 |
インフォボックスには、次の2つのレイアウトオプションがあります。 |
||
| − | * |
+ | *デフォルトの'''表形式'''(tabular)レイアウト - <data>タグで指定するラベルが値の左側に表示されます |
<pre> |
<pre> |
||
| − | <infobox layout=" |
+ | <infobox layout="tabular"> |
... |
... |
||
</infobox> |
</infobox> |
||
</pre> |
</pre> |
||
| − | *''' |
+ | *'''積み重ね式'''(stacked)レイアウト - <data>タグで指定するラベルが値の上に表示されます |
<pre> |
<pre> |
||
| − | <infobox layout=" |
+ | <infobox layout="stacked"> |
... |
... |
||
</infobox> |
</infobox> |
||
| 87行目: | 87行目: | ||
<gallery widths="310" position="center" captionalign="center" bordersize="none" orientation="none" captionsize="large" columns="2" hideaddbutton="true"> |
<gallery widths="310" position="center" captionalign="center" bordersize="none" orientation="none" captionsize="large" columns="2" hideaddbutton="true"> |
||
| − | Screen Shot 2015-06-16 at 12.12.17.png|表形式レイアウトのインフォボックス |
+ | Screen Shot 2015-06-16 at 12.12.17.png|デフォルト（表形式）レイアウトのインフォボックス |
| − | Screen Shot 2015-06-16 at 12.10.54.png| |
+ | Screen Shot 2015-06-16 at 12.10.54.png|積み重ね式レイアウトのインフォボックス |
</gallery> |
</gallery> |
||
| 99行目: | 99行目: | ||
;テーマ |
;テーマ |
||
| − | たとえば、'''theme="delta"'''と指定すると、インフォボックスHTMLに''' |
+ | たとえば、'''theme="delta"'''と指定すると、インフォボックスHTMLに'''pi-theme-delta'''と呼ばれるクラスが追加されます。これをCSSを使ってカスタマイズできます。 |
<syntaxhighlight lang="css"> |
<syntaxhighlight lang="css"> |
||
| − | . |
+ | .pi-theme-delta { |
//custom styles |
//custom styles |
||
} |
} |
||
| 126行目: | 126行目: | ||
<syntaxhighlight lang="css"> |
<syntaxhighlight lang="css"> |
||
| − | . |
+ | .pi-theme-africa { |
| + | //custom styles |
||
| + | } |
||
| + | </syntaxhighlight> |
||
| + | |||
| + | もしインフォボックス内の特定の項目をターゲットしたい時には、下記のようにします。 |
||
| + | |||
| + | <syntaxhighlight lang="css"> |
||
| + | .pi-theme-africa .item-type-title { |
||
//custom styles |
//custom styles |
||
} |
} |
||
2015年8月14日 (金) 05:58時点における版
インフォボックスのサンプル
この機能は現在開発中です - ベータテストを行っている一部のコミュニティのみでのご利用となっている場合があります。
インフォボックスはファクトシートや雑誌の囲み記事のようなもので、ページのトピックの概要をまとめて紹介する形式になっており、 重要なポイントが一目でわかるよう読みやすく整理されています。 インフォボックスは通常、コミュニティ内で統一されるようテンプレートを使って作成します。
ウィキアでは現在、さまざまな端末でインフォボックスが適切に表示されるよう、インフォボックスをコード化するための新しい方法を開発しています（詳細については下記を参照）。 新しいインフォボックスのコードについて詳しくは、英語版コミュニティセントラルのスレッドをご覧ください。
インフォボックスの使い方
インフォボックスは他のテンプレートと同様の方法で記事に追加することができ、エディタに組み込まれているテンプレートツールか、ソースモードを使用します。 後者を使用する場合は、通常、まずテンプレートのドキュメント（たいていはテンプレートのページの下の方にあります）から構文をコピーして記事の中に貼り付け、イコールの記号（=）の後を適切な情報に変更します。 たとえば、次のようにします。
{{infobox character
| title = デイジー
| image = Example.jpg
| imagecaption = 風に吹かれるデイジー
| position = 最上位の花
| age = 2か月
| status = 有効
| height = 5インチ
| weight = 20グラム
}}
新しいインフォボックスの作成
最初に好きな名前（例: テンプレート:ExampleInfobox）で新しいテンプレートを作成します。 まずは、タイトルと画像を含む基本的なインフォボックスを作成してみましょう。
<infobox layout="stacked">
<title source="name"><default>{{PAGENAME}}</default></title>
<image source="image" />
</infobox>
このウィキテキストでは、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>
これで、記事内のテンプレートを使用してインフォボックスを取得できます。
{{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属性がデフォルトとして扱われます。
- テーマ
たとえば、theme="delta"と指定すると、インフォボックスHTMLにpi-theme-deltaと呼ばれるクラスが追加されます。これをCSSを使ってカスタマイズできます。
.pi-theme-delta {
//custom styles
}
- テーマソース
たとえば、theme-source="location"と指定すると、記事のインフォボックスでlocationを指定した場合、その値がクラスとして使用されます。
例：
<infobox layout="stacked" theme-source="location"> ... </infobox>
{{an infobox
|location = アフリカ
}}
したがって、テンプレートのテーマのCSSは次のようになります。
.pi-theme-africa {
//custom styles
}
もしインフォボックス内の特定の項目をターゲットしたい時には、下記のようにします。
.pi-theme-africa .item-type-title {
//custom styles
}
高度な使用法
基本的なインフォボックスを作成したら、さらに高度なフィールドを使用する方法についても学んでみましょう。このセクションでは、右のようなインフォボックスを作成します。
シンプルなタグを使用した順序オプション
タイトル欄と画像欄の前に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>
すべてのグループ要素の表示を強制する
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>
右の例は、次のような構文によってレンダリングされています。
フォーマットを含むフィールド
<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 layout="stacked"> <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> | |||
例
その他のヘルプとフィードバック
- ヘルプ:コンテンツでは、他のヘルプページを閲覧、検索することができます。
- 最新の情報やヘルプについては、コミュニティセントラルをご覧ください。
- この記事で不明確な点や、曖昧な点がございましたら、Fandomとの連絡方法をご確認ください。
- このヘルプはコミュニティセントラル内にて管理されています。