編集画面の右端に「テンプレートの編集」画面が表示されます。
「テンプレートの編集」画面では[コンテンツ]と[スタイル]の編集ができます。
1. コンテンツを編集する
アコーディオンに表示する以下のテキストを編集します。
①タイトルテキスト
②パネルセクション
[コンテンツ]タブからテキストを編集します。
①[タイトルテキスト]を入力します。
②「パネルセクション」のテキストを入力します。非表示にする場合は「オフ」にします。
「テンプレートの編集」画面(コンテンツ)
①[タイトルテキスト] | アコーディオンに表示する[タイトルテキスト]を入力します。 | |
パネルセクション | ②[ヘッダーテキスト] | パネルが開いているときに表示する[ヘッダーテキスト]を表示します。 |
③[オン/オフ] | [ヘッダーテキスト]の表示を[オン/オフ]をで設定します。 [オン]:[ヘッダーテキスト]が表示された状態 [オフ]:ヘッダーテキスト]が非表示の状態 |
|
④[詳細テキスト] | パネルが開いているときに表示する[詳細テキスト]を表示します。 | |
⑤[オン/オフ] | [詳細テキスト]の表示を[オン/オフ]をで設定します。 [オン]:[詳細テキスト]が表示された状態 [オフ]:[詳細テキスト]が非表示の状態 |
2. スタイルを編集する
[スタイル]タブをクリックしてデザインを変更できます。
[スタイル]画面
アコーディオン | ①[アコーディオンの初期表示] | アコーディオンの「パネルセクション」の初期表示を[開く/閉じる]で設定します。 [開く]:パネルセクションが表示された状態 [閉じる]:パネルセクションが非表示の状態 |
|
②[【矢印】ボタン] | 「パネルセクション」を閉じたり開いたりできる[【矢印】ボタン]のデザインを選択します。 | ||
③[角の丸み] |
アコーディオン全体の外枠のボタンの角の丸みを3種類の中から選択します。 |
||
タイトルセクション | ④[背景カラー] | 「タイトルセクション」の背景カラーを自由に選択できます。 | |
⑤[余白(padding)] | [タイトルテキスト]に設定したテキストと背景の間の余白を調整します。 | ||
⑥[罫線太さ] | 「タイトルセクション」の罫線の太さを1px刻みで設定できます。 | ||
⑦[罫線カラー] | 「タイトルセクション」の罫線カラーを自由に選択できます。 | ||
⑧ | 罫線を引く場所を選択します。 | ||
⑨[フォントサイズ] | [タイトルテキスト]のフォントサイズをスライダーを操作し13段階で調整できます。 | ||
⑩[フォントカラー] | [タイトルテキスト]のフォントカラーを自由に選択できます。 | ||
[フォント設定] | ⑪[ボールド] | 選択すると[タイトルテキスト]のフォントのウエイトをボールドにします。 | |
⑫[斜体] | 選択すると[タイトルテキスト]のフォントのスタイルを斜体にします。 | ||
⑬[打ち消し線] | 選択すると[タイトルテキスト]のフォントに打ち消し線を表示します。 | ||
⑭[アンダーライン] | 選択すると[タイトルテキスト]のフォントにアンダーラインを表示します。 | ||
パネルセクション |
⑮[背景カラー] | 「パネルセクション」の背景カラーを自由に選択できます。 | |
⑯[余白(padding)] | [ヘッダーテキスト]と[詳細テキスト]に設定したテキストと背景の間の余白を調整します。 | ||
⑰[罫線太さ] | 「パネルセクション」の罫線の太さを1px刻みで設定できます。 | ||
⑱[罫線カラー] | 「パネルセクション」の罫線カラーを自由に選択できます。 | ||
⑲ | 罫線を引く場所を選択します。 | ||
ヘッダーテキスト設定 | ⑳[フォントサイズ] | [ヘッダーテキスト]のフォントサイズをスライダーを操作し13段階で調整できます。 | |
㉑[フォントカラー] | [ヘッダーテキスト]のフォントカラーを自由に選択できます。 | ||
[フォント設定] | ㉒[ボールド] | 選択すると[ヘッダーテキスト]のフォントのウエイトをボールドにします。 | |
㉓[斜体] | 選択すると[ヘッダーテキスト]のフォントのスタイルを斜体にします。 | ||
㉔[打ち消し線] | 選択すると[ヘッダーテキスト]のフォントに打ち消し線を表示します。 | ||
㉕[アンダーライン] | 選択すると[ヘッダーテキスト]のフォントにアンダーラインを表示します。 | ||
詳細テキスト設定 |
㉖[フォントサイズ] | [詳細テキスト]のフォントサイズをスライダーを操作し13段階で調整できます | |
㉗[フォントカラー] | [詳細テキスト]のフォントカラーを自由に選択できます。 | ||
[フォント設定] | ㉘[ボールド] | 選択すると[詳細テキスト]のフォントのウエイトをボールドにします。 | |
㉙[斜体] | 選択すると[詳細テキスト]のフォントのスタイルを斜体にします。 | ||
㉚[打ち消し線] | 選択すると[詳細テキスト]のフォントに打ち消し線を表示します。 | ||
㉛[アンダーライン] | 選択すると[詳細テキスト]のフォントにアンダーラインを表示します。 |
3. 編集内容を保存する
💡[テンプレートから作成]で作成したウィジェットはマイウィジェットとして保存されます。 |
すべての編集が完了したら[編集内容を保存]をクリックします。
「テンプレートをマイウィジェットとして保存」のダイアログが表示されるので、ウィジェット名を入力し[マイウィジェットに保存]をクリックします。
「マイウィジェット一覧」に移動し作成したウィジェットが追加されていることを確認できます。