組込みサイト・コンポーネントはすべて、同様のCSSクラス構造を共有します。
各コンポーネントには、最も外側の<div>要素に適用される次の3つのCSSクラスがあります:
scs-component scs-type design-style
typeは、コンポーネント・タイプ(image、galleryまたはdividerなど)です。design-styleは、テーマのファイルに定義されているとおりに、コンポーネントに選択されたスタイル・クラスです。
テーマ・スタイルの基本
テーマのdesign.jsonファイルには、コンポーネントの各タイプ(buttonまたはimageなど)に適用できるすべてのスタイル(frame、shadow、highlightedなど)がリストされます。各スタイルには、display nameとclass nameの両方があります。表示名は、「設定」パネルの「スタイル」タブに表示されます。クラス名は、テーマのdesign.cssファイル内のCSSセレクタを参照します。たとえば、buttonコンポーネントのエントリは次のようになります:
"scs-button": {
"styles": [{
"name": "COMP_STYLE_ALTA_SMALL",
"class": "scs-button-default-style"
},
{
"name": "COMP_STYLE_ALTA_LARGE",
"class": "scs-button-style-2"
},
{
"name": "COMP_STYLE_SIMPLE",
"class": "scs-button-style-3"
}
]
},
組込みコンポーネントの名前は翻訳されるため、リソース・バンドルからスタイル名を取得するためのキーが表示されます。buttonコンポーネントをページに追加してから、「設定」 > 「スタイル」パネルで「シンプル」スタイルを選択すると、design.jsonファイルにより、表示名「シンプル」(キーCOMP_STYLE_SIMPLE)がクラス名scs-button-style-3に関連付けられます。buttonは、次のクラスを使用してレンダリングされます:
scs-component scs-button scs-button-style-3
特定のコンポーネントに対してスタイルが選択されていない場合、デフォルトのスタイルscs-type-default-styleが使用されます。前の例では、ボタンは次のクラスを使用してレンダリングされます:
scs-component scs-button scs-button-default-style
scs-component-contentスタイル
すべての組込みコンポーネントについて、前述のscs-component <div>内に、CSSクラスscs-component-contentを持つcontent <div>があります。つまり、次のようになります:
scs-component scs-type design-style scs-component-content
design.css ファイル内では、多くの場合、scs-component-contentクラスを使用して、コンポーネントの周りの「ボックス」をスタイルします(たとえば、枠線またはシャドウを適用します)。
組込みcomp.cssファイル内では、他のCSSプロパティ間でposition:relativeおよびdisplay:inline-blockを使用して共通のscs-component-contentクラスが定義されていることに注意してください。
scs-component-contentはコンポーネントの周りの「ボックス」をスタイルする上で役に立ちますが、コンポーネントを完全にスタイルするにはコンポーネント固有のクラスが必要です。コンポーネント固有のスタイルを参照してください。