Theme Squares

このページはコンポーネントページです

Wiki内で使用されているコンポーネントページです。このページを編集することはできません。
編集が必要だと思われる場合は、このページのディスカッションか、サイトスタッフまでご連絡ください。

詳しくはカテゴリ運用ポリシーを参照してください。

これは何ですか？

CSSテーマのセンスの良さを際立たせるため、色付けされた四角形のパネルのまとまりを表示するコンポーネントです。

Woedenaz によりデザインされ、Croquembouche によってコンポーネント化されました。

このコンポーネントはCSSテーマのページで動作するよう設計されていますが、必要であればほぼすべてのページで使用することができます。

使い方

任意のWiki上で下記のincludeを使用してください:

[[include :scp-jp:component:theme-squares -=-
| color1-name=私の好きな色
| color1-variable=--fav-color
| color1-info=(191, 144, 0)
]]

コンポーネント名の後ろにある"-=-"に注意してください。これを記述しないと、このページに表示されている使い方の説明があなたのページに表示されてしまいます。

このコンポーネントには、色ごとに3つの変数があります。"N"を色番号に置き換えてください。

colorN-name	色の名前　好きなように設定してください!
colorN-variable	その色を格納しているCSS変数の名前 変数は、色のRGB値を表すコンマで区切られた3つの値を保持している必要があります。
colorN-info	その色についての情報を記述します。一般的には、色のRGB値を記述します。短くしてください。
colorN-has-light-text オプション. デフォルト値: 0	値は0か1のどちらかです。四角形内のテキストの色を決定します。背景色とテキスト色の間に十分なコントラストがあるかを確認するのに役立ちます。 1を使用した場合、--swatch-text-lightの値、定義されていない場合は白(255, 255, 255)が使用されます。0の場合は--swatch-text-darkもしくは黒(0, 0, 0)です。BHLスタイルの色変数と同様に、色のRGB値を表すコンマで区切られた3つの値が必要です。

CSS変数として定義されている色のみ使用できます。Black Highlighterテーマで使用されているすべての色には元々CSS変数が設定されているため、このコンポーネントはそのまま使用できます。しかし、sigma9はCSS変数を使用していないため、あなたのテーマで定義した色のみを使用することができます。

このコンポーネントには、最大で6個の主要カラーと12個のサブカラーを設定することができます。主要カラーを2個、サブカラーを2個以下にすることをおすすめします。

主要カラーを追加するには、例に示すように上記の変数の上3つをincludeに追記してください。

サブカラーを追加する場合も、"color"を"subcolor"に変更すること以外は主要カラーと同じです。

例

以下は、Black Highlighterテーマから引用したより長い例です:

[[include :scp-jp:component:theme-squares -=-
| color1-name=Payne's Grey
| color1-variable=--gray-monochrome
| color1-info=(66, 66, 72)
| color1-has-light-text=1
| color2-name=Rosewood
| color2-variable=--bright-accent
| color2-info=(133, 0, 5)
| color2-has-light-text=1
| subcolor1-name=Alto
| subcolor1-variable=--very-light-gray-monochrome
| subcolor1-info=(215, 215, 215)
| subcolor2-name=White Smoke
| subcolor2-variable=--pale-gray-monochrome
| subcolor2-info=(244, 244, 244)
| subcolor3-name=Bastille
| subcolor3-variable=--dark-gray-monochrome
| subcolor3-info=(48, 48, 52)
| subcolor3-has-light-text=1
| subcolor4-name=Buccaneer
| subcolor4-variable=--medium-accent
| subcolor4-info=(100, 46, 44)
| subcolor4-has-light-text=1
| subcolor5-name=Maroon
| subcolor5-variable=--dark-accent
| subcolor5-info=(100, 3, 15)
| subcolor5-has-light-text=1
| subcolor6-name=Mango Tango
| subcolor6-variable=--newpage-color
| subcolor6-info=(221, 102, 17)
]]

このコードにより、以下のように四角形が生成されます:

微調整

CSSを使ってこのコンポーネントの外観を微調整することができます。

このコンポーネントは、全体が.colors-containerクラスの中にあり、このクラスを対象とするCSSはページの他の場所に影響を及ぼさないようにする必要があります。全ての四角形には.colorクラスが与えられており、主要カラーは.colors、サブカラーは.subcolorsクラスを親に持っています。

四角形の背景を上書きするには、!importantを使用する必要があります。

たとえば、Laughter and Knives themeでは、9個目のサブカラーの背景にグラデーションを設定しています。

.colors-container .subcolors .color:nth-of-type(9) {
    background: var(--pastel-rainbow) !important;
}

---

既存の構文をこのコンポーネントの引数に変換するツール

{$color1-name}{$color1-variable}{$color1-info}

{$color2-name}{$color2-variable}{$color2-info}

{$color3-name}{$color3-variable}{$color3-info}

{$color4-name}{$color4-variable}{$color4-info}

{$color5-name}{$color5-variable}{$color5-info}

{$color6-name}{$color6-variable}{$color6-info}

{$subcolor1-name}{$subcolor1-variable}{$subcolor1-info}

{$subcolor2-name}{$subcolor2-variable}{$subcolor2-info}

{$subcolor3-name}{$subcolor3-variable}{$subcolor3-info}

{$subcolor4-name}{$subcolor4-variable}{$subcolor4-info}

{$subcolor5-name}{$subcolor5-variable}{$subcolor5-info}

{$subcolor6-name}{$subcolor6-variable}{$subcolor6-info}

{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}

{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}

{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}

{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}

{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}

{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}