カスタムデザインオプションを修正

オブジェクト

例：

"customStyles": { "all": { /* すべての CSS プロパティ */ /* E.g., "flexDirection": "rowReverse" */ },

"desktop": { /* すべての CSS プロパティ */ /* すべてのセクションに一覧表示されているプロパティに加えて適用されるプロパティ */ }

, "tablet": { /* すべての CSS プロパティ。 */ /* すべてのセクションに一覧表示されているプロパティに加えて適用されるプロパティ */ }

, "mobile": { /* すべての CSS プロパティ */ /* すべてのセクションに一覧表示されているプロパティに加えて適用されるプロパティ */ },

"mobile_landscape": { /* すべての CSS プロパティ */ /* すべてのセクションに一覧表示されているプロパティに加えて適用されるプロパティ */ }, }

エレメントまたはコンテナーに CSS スタイルを直接適用するために使用します。 CSS スタイル名はキャメルケースで記述する必要があることに注意してください。 例えば、flex-direction は flexDirection になります。 CSS セレクターは使用できません。 ここで説明するスタイルは、CSS スタイルとして対応する HTML エレメントに直接適用されます。これらは、それぞれのコンテナーのビジュアルプロパティにはマップされません。 このような性質があるため、「margin」などの一部のプロパティが「content-width」などのビジュアルプロパティと同期されない可能性があります。

ガイドラインとして、ビジュアルプロパティで制御できるものは「customProperties」に宣言し、それ以外のものは CSS プロパティとして「customStyles」に宣言します。

オブジェクト

詳細については、customProperties テーブルを参照してください。

カードコンテナーのプロパティのみ

"cornerRadius": { "type": 1, "value": { "topLeft": 4, "bottomLeft": 4, "bottomRight": 4, "topRight": 4 } },

コンテナーに背景を追加するには、fill プロパティを使用します。 fill プロパティには、次の情報が含まれています。

1. Type：塗りつぶしのタイプを指定します。次のオプションから選択できます。

   • 1：ベタ塗り
   • 2：画像の塗りつぶし
   • 3：線状グラデーション
   • 4：放射状グラデーション

2. Enabled：塗りつぶしプロパティが有効かどうかを示すブール値。

3. Props：色、不透明度（アルファ）、色分岐点、終点、放射状のハンドルポイント、背景画像など、塗りつぶしに関するすべての詳細が含まれます。

ベタ塗りの JSON 構造

"fill": {
"type": 1,
"props": {
"color": "<fill color>",(色の任意の 16 進コード)
"alpha": <color opacity (値の範囲は 0～1)>
}
}

画像の塗りつぶしの JSON 構造

"fill": {
"type": 2,
"props": {
"backgroundImage": "<image name with extension (画像が同じディレクトリにあることを確認)>"
}
}

線状／放射状グラデーションの JSON 構造

• 色分岐点：グラデーションの特定の位置の色を定義します。 各分岐点には次のプロパティがあります。
  • color：グラデーションの色（16 進形式）。
  • alpha：色の透明度（値の範囲は 0～1）。
  • scaledPosition：色分岐点の位置（値の範囲は 0～1）。

"fill": {

"type": <Fill Type (線状グラデーションには 3 を、放射状グラデーションには 4 を使用)>,
"props": {
"colorStops": [
{
"color": "cp-color-c7",
"alpha": 1,
"scaledPosition": 0
},
{
"color": "cp-color-c9",
"alpha": 0.5,
"scaledPosition": 1
}
]
}
}

fill プロパティとそれに関連付けられた属性を使用することで、コンテナーの様々な背景スタイルを定義できます。

shadow プロパティを使用すると、コンテンツブロックやカードコンテナーなどのコンテナーエレメントにシャドウを追加できます。 次の属性はシャドウの外観を定義します。

シャドウのプロパティ

• x：シャドウの水平方向のオフセットです。
• y：シャドウの垂直方向のオフセットです。
• blur：シャドウのぼかしの半径です。
• color：16 進形式で表したシャドウの色です。
• type：シャドウのタイプを指定します。 シャドウ（内側）の場合は 1 を使用します。
• alpha：シャドウの不透明度です（値の範囲は 0～1）。
• enabled：シャドウを有効（true）または無効（false）にするブール値です。

コンテンツブロックコンテナーのシャドウ

コンテナーにシャドウを適用するには、次のプロパティを使用します。

• x：シャドウの水平方向のオフセットです。
• y：シャドウの垂直方向のオフセットです。
• blur：シャドウのぼかしの半径です。
• color：シャドウの色です（16 進形式）。
• type：シャドウ（内側）には 1 を使用します。
• alpha：シャドウの不透明度です（0～1）。
• enabled：シャドウを有効または無効にするブール値です。

例：

"shadow": { "x": 1, "y": 2, "blur": 4, "color": "#b3b3b3", "type": 1, "alpha": 0.5, "enabled": false }

カードコンテナーのシャドウ

次のプロパティを使用して、カードコンテナーにシャドウを追加します。

• x：シャドウの水平方向のオフセットです。
• y：シャドウの垂直方向のオフセットです。
• blur：シャドウのぼかしの半径です。
• color：シャドウの色です（16 進形式）。
• enabled：シャドウを有効または無効にするブール値です。

例：

"shadow": { "x": 0, "y": 0, "blur": 10, "color": "#666666", "enabled": true }

border プロパティを使用すると、コンテンツブロックやカードなどのコンテナーエレメントに境界線を適用できます。 境界線の外観は、次の属性で定義します。

border プロパティ：

• type：境界線のタイプを指定します。 値の範囲は 0～5 で、チャームの境界線ドロップダウンのオプションに対応します。
• capType：ボーダーキャップのタイプを定義します。 値の範囲は 0～2 です。
• width：境界線の幅を指定します。
• color：境界線の色を 16 進形式で設定します。
• alpha：境界線の不透明度を決定します（値の範囲は 0～1）。
• enabled：境界線を有効（true）または無効（false）にするブール値です。

例：

"border": { "enabled": false, "color": "cp-color-c4", "width": 8, "type": 0 }

カードコンテナーの境界線のプロパティ

• enabled：境界線を有効（true）または無効（false）にするブール値です。
• color：境界線の色を 16 進形式で指定します。
• width：境界線の幅を定義します。
• type：境界線のタイプを指定します。

例：

"border": { "enabled": true, "color": "#666666", "width": 5, "type": 1 }

コンポーネントの配置を変更

• コンテンツブロック内の各コンポーネントは、コンポーネントプロパティにエントリがあります。
• alignment プロパティは、各コンポーネントの配置を指定し、次の値を受け入れます。
  • left
  • right
  • center

カードの表示を制御

• card プロパティを使用すると、カードの表示を制御できます。
• 値を true に設定するとカードが有効になり、false に設定すると無効になります。

例：
カードコンテナーのプロパティ

カードコンテナーにはコンポーネントまたはスライドアイテムが保持されます。components プロパティを使用することで、それらの配置および表示をカスタマイズできます。

コンポーネントの配置を変更

• コンテンツブロック内の各コンポーネントは、components プロパティにエントリがあります。
• alignment プロパティは、各コンポーネントの配置を指定し、次の値を受け入れます。
  • left
  • right
  • center

カードの表示を制御

• card プロパティを使用すると、カードの表示を制御できます。
• 値を true に設定するとカードが有効になり、false に設定すると無効になります。

例

"components": {
"label": {
"alignment": "left"
},
"checkbox": {
"alignment": "left"
},
"buttons": {
"alignment": "left"
},
"card": false
}

alignmentAndSpacing セクション内の padding プロパティを使用すると、任意のオブジェクト、カードコンテナー、またはコンテンツブロックにパディングを定義できます。

padding プロパティ

• left：左側のパディングです（ピクセル単位）。
• right：右側のパディングです（ピクセル単位）。
• top：上部のパディングです（コンテキストに応じて、ピクセルまたはパーセント単位）。
• bottom：下部のパディングです（コンテキストに応じて、ピクセルまたはパーセント単位）。
• isDTMLinked：異なるデバイスの種類（デスクトップ、タブレット、モバイルなど）間でパディングがリンクされているかどうかを決定するブール値です。
• tablet：タブレットデバイス固有のパディングです（上部など）。
• mobile：モバイルデバイス固有のパディングです（上部など）。

例：

"alignmentAndSpacing": { "padding": { "left": 10, "right": 10, "top": 50, "bottom": 50, "isDTMLinked": false, "tablet": { "top": 80 }, "mobile": { "top": 80 } } }

autofit - コンテンツブロックにのみ適用されます。 これにより、使用可能なスペースに合わせて自動調整されます

例：

"alignmentAndSpacing": { "autoFit": false, "padding": { "left": 10, .... } },

テキストブロックにのみ適用されます。 例：

"customProperties":{

"textProps": {

        "listProps":{

          "listDepth":4,

          "listColor": "#EB2699",

          "listSize":"120%",

          "listType":"OrderedListRoman1"

        }

}

  }

"imageHeight"

"imageAspectRatio"

"imageBehavior"

イメージコンテンツブロックおよびイメージグリッドコンテンツブロックにのみ適用されます。 「imageBehavior」が「IG_SCALE」に設定されている場合、異なるビューポートでオブジェクトをスケールするには、「imageAspectRatio」を適用します。 ただし、「IG_FIXED_HEIGHT」に設定されている場合は、「imageHeight」プロパティが優先されます。

例：

{

"customProperties": {

        "alignmentAndSpacing": {

        .....

        "imageHeight": 768,

        "imageAspectRatio": 3.415,

        "imageBehavior": "IG_SCALE"

      }

ビデオカードコンテナーにのみ適用されます。 これにより、コンテンツブロック内のビデオオブジェクトの高さが定義されます。 例：

{"tag": "videoCard",

      "customStyles": {

        ...

        },

             "customProperties": {....

            "videoHeight": 400

      }

    }

文字およびシナリオのコンテンツブロックにのみ適用されます。 

•  "imageHeight" - コンテンツブロック内の文字のデフォルトの高さです。
•  "minImageHeight" - サイズ変更時にオブジェクトに対して維持される最小の高さです。

以下に例を示します。

{

"tag": "character-block-container",

      "customStyles": {

       ......

      "customProperties": {

        "imageHeight": 600,

        "minImageHeight": 200

}

}

質問スライドのキャプションオブジェクトにのみ適用されます。 position は、質問スライド内のキャプションの位置を定義します。

• 上 
• 中央
• 下

例：

 {

      "tag": "slide-item-question-caption",

      "customProperties": {

        "position": 1

      },

}