Fandom

コミュニティセントラル
コミュニティセントラル
402 ページ
新しいページをつくる
関連:
ヘルプ, 編集, ポータビリティ

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

編集
シェアする
ヘルプ
トップページ · 目次 · 索引
このヘルプには更新、または翻訳されていないコンテンツがあります。どなたでも翻訳にご協力いただくことができます。
原文 : w:Help:Infoboxes。

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

Fandomでは現在、さまざまな端末でインフォボックスが適切に表示されるよう、インフォボックスをコード化するための新しい方法を開発しています（詳細については下記を参照）が記事内での使い方は変わりません。しかしテンプレートのページが変化します。クラシック・インフォボックスからの移行のヘルプはヘルプ:インフォボックスの移行をご覧ください。

関連リンク：

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

JA selecting infobox from VE

ビジュアルエディタのインフォボックス挿入

インフォボックスは他のテンプレートと同様の方法で記事に追加することができ、エディタに組み込まれているテンプレートツールか、ソースモードを使用します。ビジュアルエディタを使用すれば「挿入」ボタンから簡単にポータブルインフォボックスを挿入できます。

ソースモードを使用する場合は、通常、まずテンプレートのドキュメント（たいていはテンプレートのページの下の方にあります）から構文をコピーして記事の中に貼り付け、イコールの記号（=）の後を適切な情報に変更します。 たとえば、次のようにします。 

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

ポータブルインフォボックスの加え方は他のテンプレートと同じです。しかしテンプレートページのマークアップが少々異なります。下記を参照。

インフォボックスの作成 編集

Tutorialinfobox

冬がやってくる

最初に好きな名前（例: テンプレート:ExampleInfobox）で新しいテンプレートを作成します。かつてはtablesやdivsを使用しましたが今はinfoboxタグを使用します。まずは、タイトルと画像を含む基本的なインフォボックスを作成してみましょう。 

<infobox layout="stacked">
  <title source="name"><default>{{PAGENAME}}</default></title>
  <image source="image" />
</infobox>

このWikiテキストでは、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>

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

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

スタイリングと表示 編集

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

レイアウトのオプション 編集

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

デフォルト（table）のレイアウト 積み重ね式（stacked）レイアウト
タグで指定するラベルが値の左側に表示されます タグで指定するラベルが値の上に表示されます 
<infobox>
   ...
</infobox>
 
<infobox layout="stacked">
   ...
</infobox>
Screen Shot 2015-06-16 at 12.12.17

デフォルト（table）のレイアウト
Screen Shot 2015-06-16 at 12.10.54

積み重ね式（stacked）レイアウト

テーマのカスタム設定 編集

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

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

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

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

アクセント・カラー編集

アクセント・カラー機能を使うと、タイトルやヘッダーの背景、テキストの色をインフォボックスごとに変更することができます。theme-sourceと同じく、カラーもaccent-color-source（背景）やaccent-color-text-source（テキスト）というテンプレート・パラメーターで設定することが可能です。

例えば、インフォボックス・テンプレートをaccent-color-source="bkg"に設定し、記事中のインフォボックスでbkg = #FFFと書き込むと、ヘッダーの背景とタイトルの色が#FFF（16進数カラーコードで白）になります。色の上書きは、#FFFや#FFFFFFといったように16進数のフォーマットで記述してください。

アクセントカラーはデフォルトだけでなくカスタム設定のテーマより優先されます。

また、アクセントカラーのデフォルト値を設定することもできます。accent-color-default="#FFF"と設定することで全てのタイトルとヘッダー背景が白になり、同様にaccent-color-text-default="#000000"とすればテキストが黒に設定されます。

複数の画像と動画の挿入 編集

Infoboxtabs

タブのついた画像

インフォボックスの一か所で複数の画像を使用する場合<gallery>タグを加えます。 

{{Example
 |name   = Eddard Stark
 |image  = <gallery>
Eddard 1.jpg|Eddard on a horse
Eddard 2.jpg|Eddard in a house
Eddard 3.jpg|Eddard by a hearse
</gallery>
}}

この機能のさらなる情報については英語版のスレッドを参照。

インフォボックス内に動画を埋め込みたいという場合には、<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>
 

グループタグのスマートレイアウト編集

“スマート”レイアウトは並列レイアウトに似た機能ですが、同じグループに属すデータフィールドを改行することができます。1行目のデータフィールドの個数が制限数を超えると、次のフィールドは下の行に移ります。フィールド内のアイテムは横幅に合わせて調節されます。

スマートグループを使うには、row-items="3"（数字は行の制限数）と書き込んでください。スマートグループ内のアイテムはデフォルトで並列レイアウトになっているため、スマートグループを使う際にこの属性を追加する必要はありません。また、個別の<data>タグにlayout="default"を追加すれば、スマートグループの中で垂直と並列のレイアウトを組み合わせることができます。

特定のフィールドだけスペースを広く取りたい場合、<data>タグにspan="2"と設定すれば、フィールドが数値の分だけ（この場合2つ分）広くなります。 

<infobox>
  <title source="name" />
  <image source="image" />
  <group row-items="3">
    <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" layout="default"><label>Outcome</label></data>
  </group>
</infobox>
 

すべてのグループ要素の表示を強制する 編集

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 = [[ファイル:Greyjoy mini shield.png|20px|right|link=House Greyjoy]] [[グレジョイ家]]
|side2 = [[ファイル:Baratheon mini shield.png|20px|right|link=House Baratheon]] [[鉄の玉座]]
|commanders1 = 不明
|commanders2 = [[スタニス・バラシオン]]卿
|casual1 = 不明
|casual2 = 不明
}}
 

グループの折りたたみ 編集

PI-Collapse

クリックで折りたためるグループ

<group>タグにcollapse="open" かcollapse="closed"を加えることで、グループの折りたたみが可能になります。グループのヘッダーをクリックすると表示/非表示の切り替えができます。 

<group collapse="closed">
  <header>Appearances</header>
  <data source="films" />
  <data source="comics" />
</group>

注意：コンテンツを含んでいるヘッダーは、これを機能させるためグループタグに従います。

高度なオプション 編集

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

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

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

使用例：

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

例えば、{{money icon}}テンプレートを挿入できます。 

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

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

Field mutators

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

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

パーサー関数 編集

パーサー関数をインフォボックスに加えられます。しかし、引数（タグかデータソース）が空白の場合自動的に非表示となります。

テンプレートコード 表示 
<data source="level">
  <label>Rank</label>
  <format>Orc {{#switch:{{{level}}}
         |1=peon
         |2=grunt
         |#default=grunt
  }}</format>
  <default>Orc</default>
</data>

switch文の空文字列でテストするのは不思議に感じるかもしれませんが、すでにデフォルトタグでカバーされているのです。例：|=(unknown rank)

例 編集

関連情報 編集

さらに詳しく編集

テクニカルインフォメーション編集

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

「https://community.fandom.com/ja/wiki/%E3%83%98%E3%83%AB%E3%83%97:%E3%82%A4%E3%83%B3%E3%83%95%E3%82%A9%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9?oldid=35485」より作成
特に記載のない限り、コミュニティのコンテンツはCC-BY-SA ライセンスの下で利用可能です。