ヘルプ:インフォボックス/ヒントと技法

このページは、ポータブルインフォボックスのためのヒントや技、スニペット、CSS、ハックを紹介しています。インフォボックス/CSSとインフォボックス/タグのヘルプページを参考にして、どのエレメント (英語)を使ってスタイリング出来るかを理解しましょう。

パーサー関数[]

パーサー関数もLuaも、<default>や<format>といったウィキテキストでも使えるタグと同じように使用可能です。しかし、これらはインフォボックスに表示されないように、そのの中でしか使えません。

ナビゲーションオプション[]

<navigation>タグは、<default>や<format>といったサブタグがありませんが、特定のパラメータ設定してそれを表示させる、変動パラメーターを使うことができます。下記コードの最初の例は、#ifeq パーサー関数で"showgallery"パラメーターに"yes"がセットされているかチェックしています。もし、セットされていればリンクが表示されます。何も表示されていなければ、ナビゲーションの列は作られていません。第二の例は、"showgallery"が空でないことを実証しています。

<navigation>
{{#ifeq: {{{showgallery}}} | yes | [[Main Page|Gallery]] |}}
</navigation>

<navigation>
{{#if: {{{showgallery|}}} | [[Main Page|Gallery]] |}}
</navigation>

展開[]

<infobox>
<group collapse="closed"> <header>Collapsing is easy</header>
<data> <default> Collapsed stuff</default></data>
</group>
</infobox>

コメント[]

ポータブルインフォボックスはxmlを使っているので、コメントをするための一般的なルールはそれらには全く適用されません。ポーションを隠したり、コメントを加える一つの方法として、以下のようなやり方があります。

<infobox> 
<group >
<header>Tony stark </header>
<data><default>War machine</default></data>
<data><default>Iron Man</default></data>
 <!--comment>
This part is hidden
<header>Hope</header>
<data><default>Dark Goddess </default></data>
<data><default>Lady death</default></data>
</comment-->
</group>
</infobox>

フォーマット[]

アドミンは、　wikiのCSSに幾つかのコードを追加することができます。詳細は、ヘルプ:インフォボックス/CSSに記載してあります。

テキストフォーマット[]

共通のニーズとして、テキストをセンターに置くか、それを横に配置するかがあり、それにはCSSを使います(こちらをチェック)。データをフォーマットするには、次のようなコードを使って形作られます。 ^[1]:

.portable-infobox .pi-data {
  height: 10em;  /*高さを設定*/
  display: flex; 
  align-items: center; /*横の列のアイテムやテキスト*/
  justify-content: center ; /*縦の列のアイテムやテキスト*/
}

ワードラップの防止策[]

まれに、テキストが囲まれていることがあります。それを防止する方法として、以下のCSSを加える方法があります。

.portable-infobox .pi-data-label { 
   flex-basis: 120px;
}

これは、最小幅を設定するもので、レーベルを必要でない限りは囲わないようにできます。

イメージフォーマット[]

自動リサイズ[]

全ての画像に対して、以下の方法で簡単にサイズを適応されることができます。

.pi-theme-name .pi-image-thumbnail {
    width: 100%;
    height:auto;
}

リサイズされたインフォボックス内[]

通常の幅のサイズでないインフォボックスを作成した場合(例: .pi-theme-name { width: 123px; })、CSSで画像のサイズをリサイズする必要があります。.pi-image-thumbnailクラスを以下のように使うことでそれは可能です。

.pi-theme-name .pi-image-thumbnail {
    max-width: 123px; // Typically, use the same width as your infobox, minus borders
    height: auto; // Preserves the image ratio
}

しかし、思っていた以上に画像の高さが長いイメージになることがあります。画像サイズの最大サイズを設定して、サイズ比率を維持することで、画像の高さサイズに制限をつけ、それを回避することができます。

.pi-theme-name .pi-image-thumbnail {
    max-width: 123px;
    max-height: 123px;
    width: auto;
    height: auto;
}

タイトルフォーマット[]

タイトルのテキストをカスタマイズする方法は、他のテキストをカスタマイズするのと共通しています。例:

.pi-theme-name .pi-title {
    font-family:formalscrp421 bt;
    font-weight:bold;
    color:blue;
}

上記のソースタグを使うことで、全てのインフォボックスのタイトルは、このようなスタイルになります。

グループ[]

グループはポータブルインフォボックスでは特に多様な設定ができます。これは、展開の設定をしたり、情報のレイアウトを変えたりすることができます。インフォボックスがたくさんの情報を含んでいた場合、情報をグループで分けて展開させると良いかもしれません。

<infobox> 
<group layout="horizontal">
<data source="apples"/>
<data source="pear"/>
<data source="mangos"/>
</group>
<group layout="horizontal">
<data source="avocados"/>
<data source="grapes"/>
<data source="tomatoes"/>
</group>
<group collapse="closed">
<header>Good food</header>
<data source="potatoes"/>
<data source="passion_fruit"/>
<data source="pineapples"/>
</group>

複合パラメーター[]

同じ範囲で[]

<infobox>
<data source="women">
    <default>{{{ladies|Janedoe}}}</default>
</data>
</infobox>

CSS[]

全体のデータ列のスタイリング[]

いくつかのエレメントにインラインスタイルを適用している、たとえば列全体の背景の色を変えたい場合、全てのデータエントリーとそれらのヘッダーに十分に反映しないでしょう。それは、それぞれの<data>列が<div>と<div>の中にあるそれらの値から成っているからです。それによって、完璧にそれは埋まり、背景の色をトップレベルの<div>をターゲットにする必要があります。そのようにするために、インフォボックスのどのdivがあなたがターゲットにしているものか決定する必要があります。

上から下までインフォボックスのコードを見て、あなたが望むスタイルに近づくようにすべての<data>タグを数えましょう。<title>や<image>、<navigation>タグはdiv要素が含まれていないので、数えません。例えば、タイトルや画像、年齢と性別、街などの三つのデータタグがあった場合。

重要: もしインフォボックスが初期値を持っていないデータタグを含んでいた場合、空欄にしていたらそれらは表示されず、インフォボックスの列の数は変わります。以下で、この事について説明します。

Div要素の数がインフォボックスの表面に関係しているのを知っていれば、適正値を含んだdiv:nth-of-type(1)の中の1を変える事ができます。（この例では、 1を"年齢"、２を"性別"、３を"街"にしています。）

.pi-theme-name div:nth-of-type(1) {
    background-color: #000000;
}

上記コードは、ヘッダーを含んだ全体の最初の列(年齢）を選択しています。値を含んだdiv要素にだけ影響させる場合は、以下を使います。

.pi-theme-name div:nth-of-type(1) div:first-of-type {
    background-color: #000000;
}

最後に追加しているdiv:first-of-typeは、全ての列と実際のコンテンツの間にあるコンテナを選択しているので、ヘッダーには反映されません。first-of-type (もしくはnth-of-type(1))は、どの列にターゲットしていようと、このセレクタでいつも使われます。

もちろん、この方法は幾つかの他のリストのようなインラインをデザインしづらい要素の特性を加えるのに使うことができます。li:nth-child(2n+2)のような全ての他のアイテムのようなリストアイテムだけだったり、最初のようなものたっだりなど、CSSセレクタを使うことでより深く色々なことができます。

オプション範囲をどのように扱うか[]

もしインフォボックスがデフォルト値をがないオプション範囲を含んでいる場合、row/divのポジションを確認するのは証明するのは不可能で、この意図的でない列をスタイルをしたトリックが原因だからです。コンテンツの状態によってだが、以下の幾つかの方法を試してみましょう。

インフォボックスの下部にもしくはその近くに、列を配置しましょう。もし、どのくらいの列が並ぶかわからないけれど、後でどのくらいの列が並ぶか確定すると解っている場合は、div:nth-of-type(1)の代わりにdiv:nth-last-of-type(1)を使って、それを他ゲットしましょう。例えば、私たちの場合は、"街"を先に選んでいます。

コンテンツによりますが、<navigation>タグをピンポイントにするのは難しいエントリーに使うことを考えるのも手です。divの代わりに<nav> HTML要素を使う際は、別にカウントでき、もしかすると表示されるかわからないいくつかのnavを使うを使わない限り、オプションコンテンツに関わらずそれらのポジションを見分けるかもしれません。シンプルに、nav:nth-of-type(1)かnav:nth-last-of-type(1)を適切に使うことを選べます。

Adding categories based on a data source[]

Input from the infobox data sources are available as named template variables. A common use is to add additional categories to the page, based on a given value in the infobox:

<infobox>
    <data source="item_type">
        <default>General item</default>
    </data>
    <!--- more here -->
</infobox>
{{#switch: {{{item_type}}}
|Gen|General|General item = [[Category:General Items]]
|Special|Special item = [[Category:Special Items]]
}}

ポータブルインフォボックスにカスタマイズするためのテンプレートの始め方[]

ポータブルインフォボックスのカスタマイズをする際に使用する　CSSをまとめています。

Themes/starter_theme.cssの中にあるコードをMediaWiki:Wikia.cssファイルへ追加して、希望するスタイルに変えます。

参考[]

↑ http://www.w3.org/Style/Examples/007/center.en.html

さらに詳しく[]

w:c:portability:Infobox/Converting … インフォボックスを変換する
The Styling of a Portable Infobox
ヘルプ:インフォボックス/ベストプラクティス
w:c:portability:Wookieepedia: a portability case study

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

ヘルプ:コンテンツでは、他のヘルプページを閲覧、検索することができます。
最新の情報やヘルプについては、コミュニティセントラルをご覧ください。
この記事で不明確な点や、曖昧な点がございましたら、Fandomとの連絡方法をご確認ください。
このヘルプはコミュニティセントラル内にて管理されています。

[1] ttp://www.w3.org/Style/Examples/007/center.en.html

[1]