ヘルプセンター

[サービス管理 → ヘルプセンター → PC・モバイルテンプレート管理] メニューで基本デザインのテーマを提供し、お客様のサービスに合わせてテーマを修正して使用することもできます。

「テンプレート追加」ボタンを押すと、テンプレートを新たに登録できる画面が表示されます。 テンプレートのタイプを選択すると、作成できるスクリプトの種類が選択できます。 (CSS, HTML, JS)  

 

 

ヘルプセンターの基本メイン画面でHTML修正を通じて①背景イメージを変更し、CSS修正で上段、②メインバナーのテキストの色を変更する例をお見せします。

 

1) CSS

Online Contactサービスガイドのうち、[サービス管理 → ヘルプセンター → テンプレート管理] の目次でCSS修正時に活用できる主な要素を整理·提供しています。 Webエンジンの開発者ツールでヘルプセンターページのhtml要素を直接検査して、ご希望の要素の名前を探したりサービスガイドの整理された表をご参考いただけます。

上段のメインバナーのテキストの場合、「main.css」の「.carousel-caption.title_txt」（題目）、「.carousel-caption.sub_txt」（小題目）と要素名が命名されています。 

 

 

スクリプトでCSSを選択すると、importされているcssファイルのリストがご覧いただけます。 変更したい要素が含まれたcssのファイルの経路を使用しているOnline Contactのアドレスの後ろに結合してページを移動すると、cssファイルの内容を閲覧することができます。

- アドレス形式 : https://ドメイン名.oc.toast.com/cssファイル経路 

 

 

該当 css ファイルの内容をそのままコピーしてエディタに貼り付けた後、修正しようとする部分を修正します。 例では .carousel-caption .title_txt, .carousel-caption .sub_txtの colorを修正しました。 

 

 

修正が完了したcssファイルを保存し、［サービス管理 → ヘルプセンター → ファイルアップロード管理］タブで①ファイルアップロードボタンを押して、cssファイルをアップロードします。 アップロードが完了すると表示される該当cssファイルの②ファイル経路をコピーします。 

 

 

再びテンプレート登録に戻り、CSS スクリプト選択時に表示されるインポートされた css リストにコピーしたファイルのパスを貼り付けます。

- 形式 : @import"ファイル経路"; 

 

 

「プレビュー」 ボタンを押すと、色の変化がご確認いただけます。

2. HTML

HTML スクリプトを通じて背景イメージを変更してみます。 

 

 

テンプレート登録画面で HTML スクリプトを選択してから、変更しようとするヘルプ センター メニューを選択すると、該当画面で変更可能な HTML コードが表示されます。 

 

ヘルプセンターのメイン画面に表示するイメージを [サービス管理 → ヘルプセンター→ ファイルアップロード管理] タブで「ファイルアップロード」ボタンを押してアップロードします。 アップロードが完了すると表示されるその画像のファイル経路をコピーします。 

 

 

再びテンプレート登録・修正ページに戻ります。 ヘルプセンターのホーム画面のメインバナーイメージを変更しようとするものですので、HTML → メイン → ホームを順に選択し、main_banner divの下のイメージ経路にコピーしたファイル経路を貼り付けます。 

 

 

「プレビュー」ボタンを押すと、背景画像が変更されたことが確認できます。 要素変更後、「保存」ボタンをクリックすると、該当テンプレートが登録され、有効化や修正、削除が可能です。