作成したコンポーネントは、サイトに使用されるテーマのdesign.jsonおよびdesign.cssファイル内の他のコンポーネントと同様に処理されます。
カスタム・コンポーネントの独自のスタイルを追加するには、コンポーネントを登録したときに使用されたid値を確認します。appinfo.jsonファイルでは、これは"id": "hello-world"でした。
この値を使用して、テーマのdesign.jsonファイルを編集して、このidに対してサポートする新しいスタイルを追加します。たとえば、テーマ内の/designs/default/design.jsonファイルを編集して、このコードを追加します。
"hello-world": {
"styles": [{
"name": "Plain",
"class": "hello-world-default-style"
},
{
"name": "Gothic",
"class": "hello-world-gothic-style"
}]
},
「設定」パネルをコンポーネントに対して開くと、「スタイル」タブにリストされる2つのオプションとして「プレーン」(デフォルト)およびGothicが表示されます。ただし、これらのオプション間で切り替えても、design.cssファイルにリストされたスタイル・クラスを実際に定義するまで、何も処理されません。
テーマのdesign.cssファイルを編集して、スタイルのカスケード・スタイル・シート(CSS)のクラスを追加します。たとえば、テーマ内の/designs/default/design.cssファイルを編集して、このコードを追加します。
.hello-world-default-style .scs-component-content {
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: 24px;
font-weight: normal; }
.hello-world-gothic-style .scs-component-content {
font-family: "Century Gothic","CenturyGothic","AppleGothic",sans-serif;
font-size: 32px;
font-weight: bold; }
ファイルをOracle Content Managementインスタンス・サーバーに保存および同期します。
ステップ12の結果の確認
サイト・ビルダーでコンポーネントへの変更内容を反映できるように、サイトでページをリフレッシュします。
ページを編集モードで取り込みます。
コンポーネントをページにドラッグ・アンド・ドロップします。
「設定」パネルをコンポーネントに対して開きます。
「スタイル」タブに移動します。
design.jsonファイルに定義されているGothicと「プレーン」スタイル間で切り替えます。
選択ごとに適用されたCSSクラス間で切り替えると、変更内容を反映するようにコンポーネント内のフォント・サイズが調整されます。