FAQサイトの見た目を変更する
デザイン設定で、FAQサイトの背景や文字の色を変更する方法を説明します。あらかじめ用意されたテンプレートから選択するか、デザイン設定項目ごとに任意の値を設定して、FAQサイトの見た目を自由にカスタマイズできます。
この記事でわかること
テンプレートからデザインを選択する方法
デザイン設定値を個別に変更する方法
デザイン設定を保存してFAQサイトに反映する方法
17個のデザイン設定項目と、FAQサイト内で反映される場所
ご利用条件
項目 | 内容 |
|---|---|
操作する画面 | デザイン設定ページ |
デザインを変更する手順
デザイン設定のどの項目がFAQサイト内のどの部分に反映されるかは、「デザイン設定項目と画面表示の対応」をご確認ください。
補足：テンプレートを使用しない場合
テンプレートを使用しない場合は、「2. デザイン設定値を変更する」以降をご確認ください。
1. テンプレートから選択する
選択したテンプレートのデザイン設定値を、デザイン設定画面に展開できます。
デザイン設定ページ上部の「テンプレートを選択」ボタンをクリックします。
使用するテンプレートをクリックします。
デザイン設定ページに、選択したテンプレートのデザイン設定値が反映されたことを確認します。
補足：この時点ではFAQサイトの表示は変わりません
テンプレートを選択した時点では、FAQサイトの表示は変更されません。「3. デザイン設定を保存する」を行うと、デザインがFAQサイトに反映されます。
2. デザイン設定値を変更する
テキストボックスまたはカラーピッカーを使用して、任意のデザイン設定項目のみを変更できます。
変更したいデザイン設定項目のテキストボックスに、デザイン設定値を入力します。カラーピッカーを使用する場合は、丸いカラープレビュー要素をクリックします。
補足：この時点ではFAQサイトの表示は変わりません
デザイン設定値を変更した時点では、FAQサイトの表示は変更されません。「3. デザイン設定を保存する」を行うと、デザインがFAQサイトに反映されます。
3. デザイン設定を保存する
「保存」をクリックします。
デザイン設定の保存が完了すると、FAQサイトにデザインが反映されます。
デザイン設定項目と画面表示の対応
デザイン設定項目は、ページ共通、ヘッダー、検索セクション、よく見られている記事セクション、カテゴリーから探すセクション、フッターの6つに分かれています。
番号 | 項目名 | 反映される場所 |
|---|---|---|
01 | ページ共通：背景色 | FAQサイト全体の背景色 |
02 | ページ共通：文字色 | FAQサイト全体の文字色 |
03 | ページ共通：アイコンの色 | 記事ブロックやカテゴリーブロックのアイコンの色 |
04 | ページ共通：アクセントの色 | リンクにカーソルを合わせたときに反映されます。主に目立たせるために使われます。 |
05 | ヘッダー：背景色 | ヘッダーの背景色 |
06 | ヘッダー：文字色 | ヘッダーの文字色 |
07 | ヘッダー：リンクの色 | リンクの文字色 |
08 | ヘッダー：区切り線の色 | ヘッダーと下部コンテンツを区切る線 |
09 | 検索セクション：背景色 | 検索セクションの背景色 |
10 | 検索セクション：文字色 | 検索セクションの文字色 |
11 | よく見られている記事セクション：背景色 | よく見られている記事セクションの背景色 |
12 | よく見られている記事セクション：文字色 | よく見られている記事セクションの見出しの文字色 |
13 | カテゴリーから探すセクション：背景色 | カテゴリーから探すセクションの背景色 |
14 | カテゴリーから探すセクション：文字色 | カテゴリーから探すセクションの見出しの文字色 |
15 | フッター：背景色 | フッターの背景色 |
16 | フッター：文字色 | フッターの文字色 |
17 | フッター：区切り線の色 | フッターと上部コンテンツを区切る線 |
ページ共通（01〜04）
FAQサイト全体に適用される基本的な色を変更できます。
ヘッダー（05〜08）
FAQサイトの上部に表示されるヘッダーの色を変更できます。
検索セクション（09〜10）
検索ボックスが表示されるセクションの色を変更できます。
よく見られている記事セクション（11〜12）
ホーム画面にある、よく見られている記事セクションの色を変更できます。
カテゴリーから探すセクション（13〜14）
ホーム画面にある、カテゴリーから探すセクションの色を変更できます。
フッター（15〜17）
FAQサイトの最下部に表示されるフッターの色を変更できます。
