組込みサイト・コンポーネントはすべて、同様の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
はコンポーネントの周りの「ボックス」をスタイルする上で役に立ちますが、コンポーネントを完全にスタイルするにはコンポーネント固有のクラスが必要です。コンポーネント固有のスタイルを参照してください。