目次パネル設定（各設定メニューの使い方）
基本設定
表示環境を選択
目次パネルをPC・スマホ、どちらの閲覧環境で表示させるか設定する機能です。
以下の4つの項目から表示環境を選択できます。
例えば、スマホ/PCで表示を選択すれば、スマホ・PCともに「目次パネル」が表示されます。
- スマホ/PCで表示
- スマホ/PCで非表示
- スマホで非表示
- PCで非表示
枠デザインを選択
目次パネルの枠デザインを設定する機能です。
以下の項目の中からデザインを選択できます。
- 無し
- 角丸
- 角丸（強）
下記サンプル画像➀では、「角丸（強）」を選択した事例をご紹介しています。
サンプル画像➀
目次ボックスの横幅を％で指定
目次パネル全体の横幅を設定する機能です。
コンテンツ全体の横幅に対する割合（％）で設定します。
下記サンプル画像➀は、横幅「50％」を選択した事例をご紹介しています。
サンプル画像➀
目次ボックスの水平位置を選択
目次パネル全体の表示位置を水平方向で設定する機能です。
レフト・センター・ライトの中から指定できます。
目次ボックスの内側余白をpxで指定
目次パネルの上下左右の内側余白の幅を設定する機能です。
境界線設定
境界線を設定
目次パネルの境界線（外枠）のデザインを設定する機能です。
無し・ボーダー・シャドウの中からデザインを選択できます。
- 下記サンプル画像①は：「ボーダー」
- サンプル画像②は：「シャドウ」
を指定した事例をご紹介しています。
ボーダー・シャドウともに、細かなデザイン設定が可能ですので、お好みに合わせ設定してください。
サンプル画像①
サンプル画像②
背景設定
背景を選択
目次パネルの背景を設定する機能です。
以下の6つの項目から選択できます。
サンプル画像①では、「画像+単色オーバーレイ」で背景画像を設定している事例をご紹介しています。
- なし
- 単色
- 5ポイントグラデ
- 画像
- 画像+単色オーバーレイ
- 画像+5ポイントグラデオーバーレイ
サンプル画像①
見出し設定
タイトルを入力
サイト上に表示される「タイトル」を設定する機能です。
入力した文言は、サイト上に表示されます。
下記画像で、目次と表記されている箇所が「タイトル」の表示個所です。
サブタイトルを入力
サイト上に表示される「サブタイトル」を設定する機能です。
入力した文言は、サイト上に表示されます。
下記画像で、Outlineと表記されている箇所が「サブタイトル」の表示個所です。
アイコンを入力
タイトルの左に「アイコン」を表示させる機能です。
下記画像で、タイトルの左に表示されている紙と鉛筆のマークがアイコンです。
アイコンのコードの取得＆入力方法
「アイコン一覧」をクリックすると下記サンプル画像①のような「アイコン一覧」画面が表示されます。
表示したいアイコンの「Class名」に表記されているコードをコピーし、コードの入力エリアに貼り付けてください。
サンプル画像①
デザインを選択
目次パネルのタイトル周り（見出し）のデザインを設定する機能です。
下記画像は、「見出し(68)」を指定した事例をご紹介しています。
サイズを選択
目次パネルのタイトル周りのサイズを設定する機能です。
- 下記サンプル画像➀は：3L
- サンプル画像②は：XS
を選択した事例をご紹介しています。
サンプル画像①
サンプル画像②
文字位置を選択
タイトル周り（見出し）の文字位置を設定する機能です。
以下の4つの項目から選択できます。
- デフォルト
- 左
- 中央
- 右
メイン色を選択
タイトル周り（見出し）のメインとなる色を選択する機能です。
下記画像は、メイン色で指定したカラーが適用されている事例をご紹介しています。
サブ色を選択
アイコンなどの色を選択する機能です。
下記画像は、サブ色で指定したカラーが適用されている事例をご紹介しています。
テキスト色を選択
タイトルの色を選択する機能です。
下記画像は、テキスト色で指定したカラーが適用されている事例をご紹介しています。
コンテンツ設定
目次に表示する見出しレベルを選択
目次表示する見出しのレベルを設定する機能です。
例えば、「h5」を選択すると記事中の「見出し5」までが目次に表示されます。
目次を表示する見出し数を選択
目次を表示するのに最低限必要な記事中の見出し（Hタグ）の数を指定する機能です。
例えば、3を指定した場合、記事中の見出し（Hタグ）の数が1～2のときは、目次が表示されません。
展開ボタンの表示/非表示を選択
目次の右上にある「OPEN/CLOSE」のボタンを表示するか・しないか設定する機能です。
下記画像（➊赤枠内）は、「OPEN/CLOSE」のボタンを表示させた事例をご紹介しています。
デフォルトで目次を開くか選択
閲覧者が操作する前のデフォルト状態で、目次が開いているか・閉じているか設定する機能です。
- 「開く」を選択すると、目次が開いた状態がデフォルト
- 「閉じる」を選択すると、目次が閉じた状態がデフォルト（目次を開くには、閲覧者が「OPEN」ボタンを押す必要あり）
となります。
リストの先頭デザインを選択
目次のリスト左側のデザインを「ナンバー」にするか「ドット」にするか設定する機能です。
リスト先頭パーツ（ナンバー・ドット）の色を変更することもできます。
- 下記サンプル画像➀では：「ナンバー」を選択した事例
- サンプル画像②では：「ドット」を選択した事例
をご紹介しています。
サンプル画像➀
サンプル画像②
リスト文字色を指定
リストの文字色を設定する機能です。
子リストの下線デザインを選択
子リストの下線のデザインを設定する機能です。
以下の5つの項目から選択できます。
- なし
- 1本線
- 2本線
- 破線
- 点線
下記画像（➊赤枠内）は、「破線」を選択した事例をご紹介しています。
ボーダー色を指定
子リストの下線の色を設定する機能です。
ボーダーサイズを数値で指定
子リストの下線の太さを設定する機能です。
- 1
- 2