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

このヘルプには更新、または翻訳されていないコンテンツがあります。どなたでも翻訳にご協力いただくことができます。

原文 : w:Help:Infoboxes/CSS。

ポータブル・インフォボックス コミュニティのCSSを使うことによってアドミンの手で簡単に設定できます。

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

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

インフォボックスのカスタマイズ

上記のデフォルトのテーマは infoboxタグ内で使用する theme または theme-source の属性を使うことで、ローカルの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を使ってカスタマイズできます。

テンプレートのコード	<infobox theme="delta"> //インフォボックスのコンテンツ </infobox>
使うCSS	.portable-infobox.pi-theme-delta { //スタイルのカスタマイズ }

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

.portable-infobox.pi-theme-delta .pi-secondary-background {
    background-color: #CF3D0C;
}

テーマソース

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

例：

テンプレートのコード	<infobox theme-source="location"> ... </infobox>
記事のコード	{{Example infobox |location = アフリカ }}
使うCSS	.portable-infobox.pi-theme-africa { //スタイルのカスタマイズ }

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

.portable-infobox.pi-theme-africa .pi-secondary-background {
   //スタイルのカスタマイズ
}

高度なテーマの注意

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

メイン・クラス

これらのクラスは特定のタグのスタイリングのアップデートに便利です：

Title

.pi-title

Header

.pi-header

Navigation

.pi-navigation

Groups

.pi-group

Data tag

.pi-data

Data Value

.pi-data-value

Data Label

.pi-data-label

Image

.pi-image

Image Tabs

.pi-image-collection-tabs

ヘルパー・クラス

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

.pi-background

インフォボックスの背景

.pi-secondary-background

headerとnavigation内の背景

.pi-font

data valueのフォント

.pi-secondary-font

header、label、navigation内のフォント

.pi-item-spacing

インフォボックス内の各項目の間隔

.pi-border-color

インフォボックスの項目を仕切るボーダーラインの色

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

サンプル・コードスニペット

インフォボックスの幅の変更：

.portable-infobox {
   width: 300px;
}

インフォボックスの背景色の変更：

.portable-infobox.pi-background {
   background-color: #ff0000;
}

インフォボックスのヘッダーとナビゲーションの背景色の変更：

.portable-infobox .pi-secondary-background {
   background-color: #00ff00;
}

インフォボックスの項目を仕切るボーダーラインの色の変更：

.portable-infobox .pi-border-color {
   border-color: #00ff00;
}

インフォボックス内の各項目の間隔の変更：

.portable-infobox .pi-item-spacing {
   padding-top: 10px;
   padding-right: 20px;
   padding-bottom: 10px;
   padding-left: 20px;
}

項目のフォントサイズの変更：

.portable-infobox .pi-font {
   font-size: 16px;
}

インフォボックスのヘッダー、ラベル、ナビゲーションのフォントサイズの変更：

.portable-infobox .pi-secondary-font {
   font-size: 18px;
}

インフォボックスのタイトルのフォントサイズの変更：

.portable-infobox .pi-title {
   font-size: 24px;
}

ラベルのカラムの幅の変更：

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

"oblivion"というカスタムテーマの選択、そしてキャプションサイズの変更

.portable-infobox.pi-theme-oblivion .pi-caption {
   font-size: 16px;
}

タブの背景を画像に変更する

.pi-image-collection-tabs li {
  background-color: green;
}

より高度なカスタマイズ

ある特定のテーマのスタイリングを変更する場合、通常、下記のようなコードを書きます。

.portable-infobox.pi-theme-name .pi-secondary-background {
   background-color:#334;
}

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

.portable-infobox.pi-theme-name.pi-background {
   background-color:#334;
}

関連ページ

• ヘルプ:インフォボックス
• ヘルプ:インフォボックス/タグ

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

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