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

ヘルプ

トップページ · 目次 · 索引

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

原文 : w:Help:Portable infoboxes/CSS。

ポータブル・インフォボックス のテーマ（色や幅）はCSSを使って簡単にカスタマイズすることができます。

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

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

上記のデフォルトのテーマは infoboxタグ内で使用する theme または theme-source の属性を使うことで、ローカルのCSSでスタイル指定できるようになっています。

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

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

 

テーマ

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

<infobox theme="delta">
  // インフォボックスのコンテンツ
</infobox>

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

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

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

テーマが指定されていない場合、 .pi-theme-wikia が使用されます。

 

テーマソース

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

例：

<infobox theme-source="location">
   ...
</infobox>

{{an infobox
 |location = アフリカ
}}

そして、テンプレートのテーマのCSSは次のようになります。

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

If you want to target specific elements within that infobox, you would do then something like this:

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

ヘルパー・クラス

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

.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;
}

 

より高度なカスタマイズ

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

.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との連絡方法をご確認ください。
• このヘルプはコミュニティセントラル内にて管理されています。