ステップ12: カスタム・スタイルの定義
作成したコンポーネントは、サイトのために使用されるテーマ内の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つのオプションとして、「プレーン」(デフォルト)およびゴシックが表示されるようになります。 ただし、これらのオプション間を切り替えても、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ファイル内で定義されている、ゴシックスタイルと「プレーン」スタイルとを切り替えます。各選択内容の適用済CSSクラスを切り替えると、コンポーネント内のフォント・サイズが、その変更内容を反映するよう調整されることに気が付くでしょう。