テンプレートを編集する-通知バー – SiTest｜ヘルプセンター

編集画面の右端に「テンプレートの編集」パネルが表示されます。

「テンプレートの編集」パネルでは以下の編集ができます。

①配置

②文字

③背景

④ボタン

⑤リンク

1. 配置を設定する

通知バーをスクロールしても常に表示する場合は「スクロールしても常に表示」の［オン／オフ］を「オン」にします。

スクロールしたときに常に表示しない場合は「スクロールしても常に表示」の［オン／オフ］を「オフ」にします。

通知バー_常に表示.png

通知バーを表示する位置を画面の一番上にするか一番下するかを選択します。

通知バー_表示位置.png

2. 文字を編集する

通知バーに表示する以下のテキストを編集します。

①太文字で強調するキャッチコピー

②通知バーで通知する内容の説明文

通知バー_文字編集該当箇所png.png

［文字］タブをクリックし、通知バーに表示するテキストを編集します。

通知バー_文字.png

「通知バーを編集」パネル：［文字］タブを選択

通知バー［文字］画面.png

①［テキスト1］		太文字で強調するキャッチコピー入力します。
②［フォントサイズ］		［テキスト1］のフォントサイズをスライダーを操作し13段階で調整できます。
③［フォントカラー］		［テキスト1］のフォントカラーを自由に選択できます。
フォント設定	④［ボールド］	選択すると［テキスト1］のフォントのウエイトをボールドにします。
	⑤［斜体］	選択すると［テキスト1］のフォントのスタイルを斜体にします。
	⑥［打ち消し線］	選択すると［テキスト1］のフォントに打ち消し線を表示します。
	⑦［アンダーライン］	選択すると［テキスト1］のフォントにアンダーラインを表示します。
テキスト２	⑧［オン／オフ］	［テキスト２］の表示の［オン／オフ］を設定します。［オン］：［テキスト２］が表示された状態［オフ］：［テキスト２］が非表示の状態
テキスト２	⑨［テキスト２］	通知バーで通知する内容の説明文を入力します。
⑩［フォントサイズ］		［テキスト２］のフォントサイズをスライダーを操作し13段階で調整できます。
⑪［フォントカラー］		［テキスト２］のフォントカラーを自由に選択できます。
フォント設定	⑫［ボールド］	選択すると［テキスト２］のフォントのウエイトをボールドにします。
	⑬［斜体］	選択すると［テキスト２］のフォントのスタイルを斜体にします。
	⑭［打ち消し線］	選択すると［テキスト２］のフォントに打ち消し線を表示します。
	⑮［アンダーライン］	選択すると［テキスト２］のフォントにアンダーラインを表示します。

3. 背景を編集する

通知バーの色、不透明度、テキストとの余白を調整します。

通知バー_背景該当箇所.png

［背景］タブをクリックし、通知バーの背景を編集します。

通知バー_背景.png

「通知バーを編集」パネル：［背景］タブを選択

通知バー_背景編集画面.png

①［背景カラー］	通知バーの背景カラーを自由に選択できます。
②［不透明度］	背景カラーの透明さの度合いを0%（透ける）から100%（透けない）の間で、スライダーを操作もしくは数字を入力して1%きざみで調整できます。
③［余白］	通知バーに設定したテキストと背景の間の余白を調整できます。

4. ボタンを編集する

ボタンの表示設定やデザインを編集します。

通知バー_リンク該当箇所.png

［ボタン］タブをクリックし、通知バーに表示するボタンを編集します。

通知バー_ボタン.png

「通知バーを編集」パネル：［ボタン］タブを選択

通知バー_ボタン編集画面.png

①ボタンを表示			通知バーにボタン表示するかしないかを［オン／オフ］をで設定します。［オン］：ボタンが表示された状態［オフ］：ボタンが非表示の状態
コンテンツ	②［ボタンテキスト］		ボタンに表示するテキストを入力します。
デザイン	③［フォントサイズ］		［ボタンテキスト］のフォントサイズをスライダーを操作し13段階で調整できます。
	④［フォントカラー］		［ボタンテキスト］のフォントカラーを自由に選択できます。
	フォント設定	⑤［ボールド］	選択すると［ボタンテキスト］のフォントのウエイトをボールドにします。
		⑥［斜体］	選択すると［ボタンテキスト］のフォントのスタイルを斜体にします。
		⑦［打ち消し線］	選択すると［ボタンテキスト］のフォントに打ち消し線を表示します。
		⑧［アンダーライン］	選択すると［ボタンテキスト］のフォントにアンダーラインを表示します。
	⑨［角の丸み］		ボタンの角の丸みを3種類の中から選択できます。
	⑩［背景カラー］		ボタンの背景カラーを自由に選択できます。
	⑪矢印アイコン		［ボタンテキスト］最後に矢印アイコン表示するかしないかを［オン／オフ］で設定します。［オン］：矢印アイコンを表示する状態［オフ］：矢印アイコンを表示しない状態

5. リンクを編集する

［リンク］タブをクリックし、通知バーをリンクにする場合の設定を行います。

「通知バーを編集」パネル：［リンク］タブを選択

widget-template-notification-bar-link-settings-screen.jpg

① リンクを作成	通知バーをリンクに設定し、クリックすると別のページに移動するかしないかを［オン／オフ］をで設定します。［オン］：通知バーがリンクの状態［オフ］：通知バーがリンクでない状態
②［リンク先のURL］	「リンクを作成」を「オン」にした場合は、通知バーもしくは通知バー内のボタンをクリックしてページを移動する際の移動先のURLを入力します。
③［新しいタブで開く］	チェックボックスを［オン］にすると、新しいタブで移動先のページを開きます。
④［URLパラメータをリンク先へ引き継ぐ］	移動後に別タブでページを開く場合はチェックを入れます。移動後も同じタブで表示する場合はチェックを外します。
⑤［リンクの設置場所］	クリックできるエリアを「通知バー全体／ボタンのみ」から選択します。

6. 編集内容を保存する

💡［テンプレートから作成］で作成したウィジェットはマイウィジェットとして保存されます。

すべての編集が完了したら［編集内容を保存］をクリックします。

通知バー_変更内容を保存.png

「テンプレートをマイウィジェットとして保存」のダイアログが表示されるので、ウィジェット名を入力し［マイウィジェットに保存］をクリックします。

通知バー_マイウィジェットに保存.png

「マイウィジェット一覧」に移動し作成したウィジェットが追加されていることを確認できます。