「ヘルプ:インフォボックス/CSS」を編集中

{{Untranslated help|w:Help:Infoboxes/CSS}}
{{tocright}}

'''[[ヘルプ:インフォボックス|ポータブル・インフォボックス]]''' コミュニティの'''[[ヘルプ:CSSとJavaScriptのカスタマイゼーション|CSS]]'''を使うことによってアドミンの手で簡単に設定できます。

ポータブルインフォボックスのテーマのデフォルトは、[[ヘルプ:テーマデザイナー]]で設定するページの背景色とリンクの色によって決められています。

インフォボックスをオリジナルのデザインにするには、初期設定で有効になっている[[ヘルプ:ウィキフィーチャーズ|ウィキフィーチャーズ]]の「インフォボックスのデザインテーマ - Europa」を無効にし、[[Mediawiki:Wikia.css]]に自分の設定を追加する必要があります。

== インフォボックスのカスタマイズ ==
上記のデフォルトのテーマは '''infobox'''タグ内で使用する '''theme''' または '''theme-source''' の属性を使うことで、ローカルの[[ヘルプ:CSSとJavaScriptのカスタマイゼーション|CSS]]でスタイル指定できるようになっています。

* '''theme'''属性を使用すると、インフォボックスのカスタムCSSクラスを指定することができます
* '''theme-source'''属性を使用すると、テンプレート・パラメータからCSSクラスを変更することができます
* Communities using the Europa theme feature have a different set of CSS defaults. These can be identified using the '''.pi-europa''' selector. Communities with existing classic styles that they are trying to recreate for Portable Infoboxes are encouraged to deactivate Europa before migrating their CSS.

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

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

{| class="article-table" style="width:100%;"
|-
! テンプレートのコード
|
<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
<infobox theme="delta">
  //インフォボックスのコンテンツ
</infobox>
</syntaxhighlight>
|-
! 使うCSS
|
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox.pi-theme-delta {
   //スタイルのカスタマイズ
}</syntaxhighlight>
|}

そしてこの下のコードを使うと、第二背景色を赤に変えることができます。

<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox.pi-theme-delta .pi-secondary-background {
    background-color: #CF3D0C;
}</syntaxhighlight>

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

例：

{| class="article-table" style="width:100%;"
|-
! テンプレートのコード
|
<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
<infobox theme-source="location">
   ...
</infobox>
</syntaxhighlight>
|-
! 記事のコード
|
<syntaxhighlight lang="xml" style="margin:1em 0 1em 1em;">
{{Example infobox
 |location = アフリカ
}}</syntaxhighlight>
|-
! 使うCSS
|
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox.pi-theme-africa {
   //スタイルのカスタマイズ
}
</syntaxhighlight>
|}

そのインフォボックスの特定の要素を変更したい場合、下記のようにすると有効です：

<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox.pi-theme-africa .pi-secondary-background {
   //スタイルのカスタマイズ
}
</syntaxhighlight>

=== 高度なテーマの注意 ===
* '''theme'''と'''theme-source'''の両方が使われる場合、'''theme'''の属性はデフォルトとして扱われます（'''theme-source'''が定義されていないとき）。
* '''theme'''と'''theme-source'''の変数にあるスペースはハイフン（<code>-</code>）に変換され、これはひとつのクラスしか追加できないことを意味しています。
* テーマが指定されていない場合、 '''.pi-theme-wikia''' が代わりに使用されます。

== メイン・クラス ==
これらのクラスは特定のタグのスタイリングのアップデートに便利です：
;Title
:<code>.pi-title</code>
;Header
:<code>.pi-header</code>
;Navigation
:<code>.pi-navigation</code>
;Groups
:<code>.pi-group</code>
; Data tag
:<code>.pi-data</code>
; Data Value
:<code>.pi-data-value</code>
; Data Label
:<code>.pi-data-label</code>
;Image
:<code>.pi-image</code>
;Image Tabs
:<code>.pi-image-collection-tabs</code>

== ヘルパー・クラス ==
ポータブル・インフォボックスには、デザインに関わる多様なヘルパー・クラスがあり、これらを使って総合的なカスタマイズを簡単に行うことができます。

;<code>.pi-background</code>
: インフォボックスの背景
;<code>.pi-secondary-background</code>
: headerとnavigation内の背景
;<code>.pi-font</code>
: data valueのフォント
;<code>.pi-secondary-font</code>
: header、label、navigation内のフォント
;<code>.pi-item-spacing</code>
: インフォボックス内の各項目の間隔
;<code>.pi-border-color</code>
: インフォボックスの項目を仕切るボーダーラインの色

注：これらは利用可能なクラスの一部です。その他のタグについては[[ヘルプ:インフォボックス/タグ]]をご覧ください。

== サンプル・コードスニペット ==
インフォボックスの幅の変更：
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox {
   width: 300px;
}
</syntaxhighlight>

インフォボックスの背景色の変更：
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox.pi-background {
   background-color: #ff0000;
}
</syntaxhighlight>

インフォボックスのヘッダーとナビゲーションの背景色の変更：
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox .pi-secondary-background {
   background-color: #00ff00;
}
</syntaxhighlight>

インフォボックスの項目を仕切るボーダーラインの色の変更：
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox .pi-border-color {
   border-color: #00ff00;
}
</syntaxhighlight>

インフォボックス内の各項目の間隔の変更：
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox .pi-item-spacing {
   padding-top: 10px;
   padding-right: 20px;
   padding-bottom: 10px;
   padding-left: 20px;
}
</syntaxhighlight>

項目のフォントサイズの変更：
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox .pi-font {
   font-size: 16px;
}
</syntaxhighlight>

インフォボックスのヘッダー、ラベル、ナビゲーションのフォントサイズの変更：
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox .pi-secondary-font {
   font-size: 18px;
}
</syntaxhighlight>

インフォボックスのタイトルのフォントサイズの変更：
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox .pi-title {
   font-size: 24px;
}
</syntaxhighlight>

ラベルのカラムの幅の変更：
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox .pi-data-label {
   flex-basis: 165px;
}
</syntaxhighlight>

"oblivion"というカスタムテーマの選択、そしてキャプションサイズの変更
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox.pi-theme-oblivion .pi-caption {
   font-size: 16px;
}
</syntaxhighlight>

タブの背景を画像に変更する
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.pi-image-collection-tabs li {
  background-color: green;
}</syntaxhighlight>

=== より高度なカスタマイズ ===
ある特定のテーマのスタイリングを変更する場合、通常、下記のようなコードを書きます。
<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox.pi-theme-name .pi-secondary-background {
   background-color:#334;
}
</syntaxhighlight>

ですが、CSSのクラスが'''同じエレメント'''で、両方を選択する必要がある場合、クラスの間にはスペースを入れずに入力します。例えば<code>.pi-background</code>は、<code>.pi-theme-name</code>と<code>.portable-infobox</code>と同じ<code>&lt;aside></code>エレメントであるため、この背景色の変更のためのCSSは下記のようになります。

<syntaxhighlight lang="css" style="margin:1em 0 1em 1em;">
.portable-infobox.pi-theme-name.pi-background {
   background-color:#334;
}
</syntaxhighlight>

== 関連ページ ==
* '''[[ヘルプ:インフォボックス]]'''
* '''[[ヘルプ:インフォボックス/タグ]]'''

== その他のヘルプとフィードバック ==
{{Help and feedback section}}
{{DEFAULTSORT:いんふおほつくす/CSS}}

[[be:Даведка:Інфабоксы/CSS]]
[[de:Hilfe:Infoboxen/CSS]]
[[en:Help:Infoboxes/CSS]]
[[es:Ayuda:Infoboxes/CSS]]
[[fi:Ohje:Tietolaatikot/CSS]]
[[fr:Aide:Infoboxes/CSS]]
[[it:Aiuto:Infobox/CSS]]
[[pl:Pomoc:Infoboksy/CSS]]
[[pt:Ajuda:Infoboxes/CSS]]
[[ru:Справка:Инфобоксы/CSS]]
[[uk:Довідка:Інфобокси/CSS]]
[[vi:Trợ giúp:Hộp thông tin/CSS]]
[[zh:Help:訊息框/CSS]]

[[カテゴリ:ヘルプ]]
[[カテゴリ:編集]]
[[カテゴリ:ポータビリティ]]