マニュアル キャンセル

デザインオプションの各部

概要

独自のカスタムデザインを作成するには、Captivate のデザインオプションのコンポーネントを理解することが不可欠です。 また、組織のテーマや標準に合わせてデザインをカスタマイズするには、CSS プロパティに関する基本的な知識も必要です。

デザインオプションフォルダー内のファイル

各デザインオプションフォルダーには、次の 3 つのファイルが含まれています。

  • designOption.json - スタイルの定義、テキストプリセットの指定、タブレットビュー、モバイルビュー、またはデスクトップビューのカスタムデザインのためのタグおよびレイアウトの追加に使用するファイルです。 任意のテキストエディターを使用して、このファイルの値を編集します。
  • localized.json - カスタムデザインオプションの名前と説明を提供します。 この名前は、ビジュアルプロパティパネルのサムネイルにカーソルを合わせたときに表示されるデザインオプションの名前に対応しています。
  • Thumbnail.png - ビジュアルプロパティパネルに表示されるデザインオプションの視覚表示です。 ユーザーは、カスタムデザインオプションの画像としてカスタムサムネイルを追加できます。
注意:

JSON ファイルを開いて編集するには、任意のテキスト/HTML エディターを使用できます。  フォルダーに次のファイルが含まれていることを確認します:designOption.jsonlocalized.jsonThumbnail.png

テキスト/HTML エディターで開いたデザインオプションの例を以下に示します。 この例では、使用されるエディターは Visual Studio Code です。

designOption JSON ファイルの例です
CSS のスタイルとプロパティを含むカスタムデザインオプションの JSON

デザインオプションのローカライズされた JSON ファイルの画像です
カスタムデザインオプションの名前と説明を含む、ローカライズされた JSON ファイル

サムネイル PNG ファイルの画像です
カスタムデザインオプションのサムネイル - PNG ファイル

JSON ファイル内の様々なフィールドの説明

キーの名前

説明

必須

“type”

文字列

デザインオプションが書き込まれるコンテンツブロック、コンポーネント、またはスライドレイアウトです。

はい

“name”

文字列

デザインオプションの名前です。フィールド値を $$name として追加し、localized.json で同じ値をローカライズしてください。 既存のデザインオプションの例については、Captivate のインストールフォルダー内にあるものを参照してください。

はい

“description”

文字列

デザインオプションの説明です。 フィールド値を $$description name として追加し、localized.json で「name」と同様にローカライズしてください。

はい

“version”

バージョン番号の形式の文字列です。 例: “1.0”

デザインオプションのバージョン

はい

“designOptionId”

文字列

デザインオプションを一意に表すデザインオプション ID です。 これは他のデザインオプションで使用できます。

はい

“isDefault”

“true”、“false”

デザインオプションがデフォルトとして設定されているかどうかを示します。 デザインオプションがデフォルトとしてマークされている場合、コンテンツブロックまたはコンポーネントを挿入すると、そのデザインオプションが自動的に適用されます。

いいえ

“thumbnail”

文字列

デザインオプションの json ファイルと同じフォルダーにコピーされたファイル名です。 この画像は、ビジュアルプロパティパネルでサムネイルとして使用されます。

はい

“styles”

配列

「styles」配列には、エレメントのリストのエントリと、指定されたコンテンツブロックまたはコンポーネントの対応するスタイルが含まれます。

はい

ヘルプをすばやく簡単に入手

新規ユーザーの場合