作成したコンポーネントは、サイトに使用されるテーマの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クラス間で切り替えると、変更内容を反映するようにコンポーネント内のフォント・サイズが調整されます。