FANDOM


ヘルプ
このヘルプには更新、または翻訳されていないコンテンツがあります。どなたでも翻訳にご協力いただくことができます。
原文 : 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属性がデフォルトとして扱われます。また、themetheme-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 {
   //スタイルのカスタマイズ
}

高度なテーマの注意 編集

  • themetheme-sourceの両方が使われる場合、themeの属性はデフォルトとして扱われます(theme-sourceが定義されていないとき)。
  • themetheme-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;
}

関連ページ 編集

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

特に記載のない限り、コミュニティのコンテンツはCC-BY-SA ライセンスの下で利用可能です。