編集が必要だと思われる場合は、このページのディスカッションか、サイトスタッフまでご連絡ください。
これは何ですか?
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"を色番号に置き換えてください。
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; }