ヘルプセンター

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

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

このFAQでは、CSS変更によりテキストに色・太さ・下線・傾き・サイズ効果を適用し、フォントを変更する例を示します。

 

1) テキストに効果適用

 

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

 

 

本例では
①トップページのトップ題目(CSS要素名.carousel-caption.title_txt)に「下線」、「太め」、「サイズ変更」の効果を適用、
② メインページ上部の小題目(CSS要素名.carousel-caption.sub_txt)に「色の変更」、「傾き」、「サイズの変更」効果を適用してみます。

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

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

 

 

該当 css ファイルの内容をコピーしてエディターに貼り付けた後、修正しようとする部分を修正します。

この例では、前述した効果を適用するために、以下の項目を元のcssファイルから修正しました。
- .carousel-caption .title_txt : font-sizeを調整, font-weight, text-decoration, text-decoration-colorを追加
- .carousel-caption .sub_txt: font-size와 colorを調整, font-styleを追加

 

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

 

 

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

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

 

2) 書体変更

 

Online Contactヘルプセンター基本テンプレートの場合、common.cssファイルで書体関連情報を定義しています。 先ほどテキストに効果を適用した場合と同様に、common.cssファイルの経路を使用しているOnline Contactのアドレスの後ろに結合してページを移動し、cssファイルの内容をコピーしてエディタに貼り付けてください。 

 

 

css ファイルでは、書体は上記のような形式で定義されます。（最小限の項目を備えた基本形であり、css 適用ルールによって以外の要素が追加されることがあります。）

ヘルプセンターテンプレートの書体を変更するには、①書体ファイル、②ウェブフォントリンクの2つの方法が使用できます。

 

①書体ファイル

書体ファイルを利用する際は、お望みの書体をダウンロードし、[サービス管理 → ヘルプセンター → ファイルアップロード管理] タブで「ファイルアップロード」ボタンを押して、書体ファイルをアップロードしてください。 アップロードが完了したら表示される該当cssファイルのファイル経路をコピーし、書体形式の「経路」の部分にファイルの経路を貼り付けます。

 

- 形式
@font-face{
font-family: '書体名';
src:url（'経路'）;
}

 

②ウェブフォントリンク

ウェブフォントリンクの場合、フォントサイトで提供するコードをcssファイルにそのまま貼り付けてください。

 

経路またはコードを貼り付けた後、common.cssファイルの書体リストの下段にある言語別書体指定の部分から、書体を変更したい言語に該当する書体の名前を追加した書体の名前に変更してください。 

 

 

その後、css ファイルを保存してから、[サービス管理 → ヘルプセンター → ファイルアップロード管理] タブでアップロードし、ファイルの経路をコピーしてテンプレートに反映すれば、様々な効果が適用されたヘルプセンターの姿を見ることができます。