他のユーザーがH1コンポーネントのスタイルを選択できるようにするためのテーマの更新

自分のコンポーネントのために提供しているスタイルを、他のユーザーが設定パネルまたは「スタイル」タブから切り替えられるよう、自分のコンポーネントのスタイルをテーマとともに登録できます。

他のユーザーがコンポーネントのスタイルを選択できるよう、テーマを更新するには:

コンポーネントdesign.cssファイルにさらにスタイルを追加します。各スタイルの前に、appinfo.jsonで定義されているコンポーネントの登録済styleClassNameを付けます。このコンポーネントでは、プレフィクスは h1-componentです。

さらに2つのスタイル、h1-component-gothic-styleおよびh1-component-courier-styleが追加されました。
design.cssの新しい内容は次のとおりです:
```
.h1-component-default-style .scs-component-content {
 font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 font-size: 24px;
 color:red;
 font-weight: normal; }
.h1-component-gothic-style .scs-component-content {
 font-family: "Century Gothic","CenturyGothic","AppleGothic",sans-serif;
 font-size: 32px;
 font-weight: bold; }
.h1-component-courier-style .scs-component-content {
 font-family: "Courier";
 font-size: 32px;
 font-weight: bold; }
```

テーマのdesign.jsonファイルにスタイルを登録します。サイトで使用されているテーマ内で、このファイルを見つけることができます。デザイン・フォルダのテーマ・ファイル、デフォルト・フォルダの順にドリルダウンし、コンポーネントのセクションをdesign.jsonに追加します。

後に続くboldのテキストは、追加内容の例です。

           "news-article": {
                    "styles": [{
                                      "name": "News Article 1",
                                      "class": "news-article-default-style"
                                      },
                    {
                                      "name": "News Article 2",
                                      "class": "news-article-style-1"
                                      }
                               ]
           }, 
           "h1-component": { 
    "styles": [{ 
      "name": "Plain", 
      "class": "h1-component-default-style" 
   }, { 
            "name": "Courier", 
            "class": "h1-component-courier-style" 
   }, { "name": "Gothic", 
        "class": "h1-component-gothic-style" 
   }] 
  }
  },
  "componentIcons": {
          "scs-socialbar": {
                    "icons": [

追加されたdesign.jsonスニペット("Plain", "Courier", "Gothic")内の名前は、次のように、スタイル・タブ上のコンポーネントの設定パネルに表示されます。選択すると、対応するスタイル(h1-component-default-style、h1-component-courier-style、h1-component-gothic-style)がコンポーネントにそれぞれ適用されます。