コンポーネントのスタイル設定の基本

組込みサイト・コンポーネントはすべて、同様の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ファイルでは、一般的なscs-component-contentクラスが、他のCSSプロパティの中でposition:relativeおよびdisplay:inline-blockで定義されていることに注意してください。

scs-component-contentは各コンポーネントの「ボックス」をスタイリングするのに便利ですが、コンポーネントを完全にスタイルするにはコンポーネント固有のクラスが必要です。コンポーネント固有のスタイル設定を参照してください。