編集画面の右端に「テンプレートの編集」画面が表示されます。
「テンプレートの編集」画面では以下の編集ができます。
①配置
②文字
③背景
④ボタン
⑤リンク
1. 配置を設定する
通知バーをスクロールしても常に表示する場合は「スクロールしても常に表示」の[オン/オフ]を「オン」にします。
スクロールしたときに常に表示しない場合は「スクロールしても常に表示」の[オン/オフ]を「オフ」にします。
通知バーを表示する位置を画面の一番上にするか一番下するかを選択します。
2. 文字を編集する
通知バーに表示する以下のテキストを編集します。
①太文字で強調するキャッチコピー
②通知バーで通知する内容の説明文
[文字]タブから通知バーに表示するテキストを編集します。
[文字]画面
①[テキスト1] | 太文字で強調するキャッチコピー入力します。 | |
②[フォントサイズ] | [テキスト1]のフォントサイズをスライダーを操作し13段階で調整できます。 | |
③[フォントカラー] | [テキスト1]のフォントカラーを自由に選択できます。 | |
フォント設定 |
④[ボールド] | 選択すると[テキスト1]のフォントのウエイトをボールドにします。 |
⑤[斜体] | 選択すると[テキスト1]のフォントのスタイルを斜体にします。 | |
⑥[打ち消し線] | 選択すると[テキスト1]のフォントに打ち消し線を表示します。 | |
⑦[アンダーライン] |
選択すると[テキスト1]のフォントにアンダーラインを表示します。 |
|
⑧[テキスト2] |
通知バーで通知する内容の説明文を入力します。 |
|
⑨[オン/オフ] |
[テキスト2]の表示の[オン/オフ]を設定します。 [オン]:[テキスト2]が表示された状態 |
|
⑩[フォントサイズ] |
[テキスト2]のフォントサイズをスライダーを操作し13段階で調整できます。 | |
⑪[フォントカラー] | [テキスト2]のフォントカラーを自由に選択できます。 | |
フォント設定 | ⑫[ボールド] | 選択すると[テキスト2]のフォントのウエイトをボールドにします。 |
⑬[斜体] | 選択すると[テキスト2]のフォントのスタイルを斜体にします。 | |
⑭[打ち消し線] | 選択すると[テキスト2]のフォントに打ち消し線を表示します。 | |
⑮[アンダーライン] |
選択すると[テキスト2]のフォントにアンダーラインを表示します。 |
3. 背景を編集する
通知バーの色、不透明度、テキストとの余白を調整します。
[背景]タブをクリックして通知バーの背景を編集します。
[背景]画面
①[背景カラー] | 通知バーの背景カラーを自由に選択できます。 |
②[不透明度] | 背景カラーの透明さの度合いを0%(透ける)から100%(透けない)の間で、スライダーを操作もしくは数字を入力して1%きざみで調整できます。 |
③[余白] |
通知バーに設定したテキストと背景の間の余白を調整できます。 |
4. ボタンを編集する
ボタンの表示設定やデザインを編集します。
[ボタン]タブをクリックして通知バーに表示するボタンを編集します。
[ボタン]画面
ボタンを表示 | ①[オン/オフ] |
通知バーにボタン表示するかしないかを[オン/オフ]をで設定します。 [オン]:ボタンが表示された状態 |
コンテンツ | ②[ボタンテキスト] | ボタンに表示するテキストを入力します。 |
デザイン | ③[フォントサイズ] | [ボタンテキスト]のフォントサイズをスライダーを操作し13段階で調整できます。 |
④[フォントカラー] |
[ボタンテキスト]のフォントカラーを自由に選択できます。 | |
フォント設定 |
⑤[ボールド] | 選択すると[ボタンテキスト]のフォントのウエイトをボールドにします。 |
⑥[斜体] |
選択すると[ボタンテキスト]のフォントのスタイルを斜体にします。 | |
⑦[打ち消し線] | 選択すると[ボタンテキスト]のフォントに打ち消し線を表示します。 | |
⑧[アンダーライン] |
選択すると[ボタンテキスト]のフォントにアンダーラインを表示します。 |
|
⑨[角の丸み] |
ボタンの角の丸みを3種類の中から選択できます。 | |
⑩[背景カラー] |
ボタンの背景カラーを自由に選択できます。 | |
矢印アイコン | ⑪[オン/オフ] | [ボタンテキスト]最後に矢印アイコン表示するかしないかを[オン/オフ]で設定します。 |
5. リンクを編集する
[リンク]タブをクリックして通知バーをリンクにする場合の設定を行います。
[リンク]画面
リンクを作成 | ①[オン/オフ] |
通知バーをリンクに設定し、クリックすると別のページに移動するかしないかを[オン/オフ]をで設定します。 [オン]:通知バーがリンクの状態 |
②[リンク先のURL] |
「リンクを作成」を「オン」にした場合は、通知バーもしくは通知バー内のボタンをクリックしてページを移動する際の移動先のURLを入力します。 |
|
③[リンクの設置場所] | クリックできるエリアを[通知バー全体]または[ボタンのみ]のどちらにするかを選択します。 | |
移動後の表示 |
④[新しいタブで開く] |
クリックしてページを移動後に新しく別タブでページを開きたい場合は[新しいタブに開く]にチェックをいれた状態にしておきます。 同じタブでページを移動したい場合はチェックを外してください。 |
5. 編集内容を保存する
💡[テンプレートから作成]で作成したウィジェットはマイウィジェットとして保存されます。 |
すべての編集が完了したら[編集内容を保存]をクリックします。
「テンプレートをマイウィジェットとして保存」のダイアログが表示されるので、ウィジェット名を入力し[マイウィジェットに保存]をクリックします。
「マイウィジェット一覧」に移動し作成したウィジェットが追加されていることを確認できます。