Flexible Common – Table Contents

概要

メインコンテンツ内にあるH2とH3のタイトルをピックアップして目次として表示をします。サイドバーやフッターエリアのタイトルは含みません。

用途

ページの上部に表示することで、前もって自分に必要なことの把握をして、効率的にページを読み進めることができるようにする狙いがあります。「何を学ぶ必要があるのか前もってわかっていたほうが、効率的にマニュアルを読み進むことができますし、必要な情報を探しているので集中力も高まります」。また、自分が探している情報が記事にあるか？の確認にもなります。

使用方法

• 編集ページ の「Flexible Commmon」から[Add Section]から使用するテンプレートを選択して下さい。
• レイアウトの設定はローカルとグローバルでの設定になります。

テンプレート

• Table Contents
• 2col Editor | Table Contents

設定

1. 内容
   • ローカル
     1. Heading：対象とするH2/H3を選択
     2. List tab：目次のリストの開閉
     3. Visibility：モバイルのみに表示（Table Contents）
     4. Column Width：カラムの幅％（2col Editor | Table Contents）
   •  グローバル
     1. Header Icon Color：ヘッダーの目次を開け閉めをするアイコン
     2. Header Text Color：ヘッダーの目次タイトル
     3. Header Bgcolor：ヘッダーの背景色
     4. Header Text Size For PC：ヘッダーのテキストサイズ
     5. Header Text Height For PC：ヘッダーのテキスト高さ
     6. Header Text Size For Mobile：ヘッダーのテキストサイズ
     7. Header Text Height For Mobile：ヘッダーのテキスト高さ
     8. List Normal Color：目次リストのテキスト色
     9. List Hover Color：目次リストのテキスト色（マウスオーバー）
     10. List Active Color：目次リストのテキスト色
     11. Box Bgcolor：目次リストの背景色
     12. Box Border Color：目次リストの枠線色
     13. List Size For PC：目次リストのテキストサイズ
     14. List Height For PC：目次リストのテキスト高さ
     15. List Size For Mobile：目次リストのテキストサイズ
     16. List Height For Mobile：目次リストのテキスト高さ
     17. Marker Color：目次リストのイニシャルマーカー色
     18. Marker Size For Pc：目次リストのイニシャルマーカーサイズ
     19. Marker Size For Mobile：目次リストのイニシャルマーカーサイズ
   • Edit Style > Site Tool  > Table Contents

設定内容

• Header Icon Color：#FFFFFF
• Header Text Color：#FFFFFF
• Header Bgcolor：#001E62
• Header Text Size For PC：16
• Header Text Height For PC：1.6
• Header Text Size For Mobile：16
• Header Text Height For Mobile：1.6
• List Normal Color：#001E62
• List Hover Color：#001E62
• List Active Color：#FF0000
• Box Bgcolor：#FFFFFF
• Box Border Color：#001E62
• List Size For PC：16
• List Height For PC：1.6
• List Size For Mobile：16
• List Height For Mobile：1.6
• Marker Color：#001E62
• Marker Size For Pc：16
• Marker Size For Mobile：16

設定内容

• Header Icon Color：#FFFFFF
• Header Text Color：#FFFFFF
• Header Bgcolor：#001E62
• Header Text Size For PC：16
• Header Text Height For PC：1.6
• Header Text Size For Mobile：16
• Header Text Height For Mobile：1.6
• List Normal Color：#001E62
• List Hover Color：#001E62
• List Active Color：#FF0000
• Box Bgcolor：#FFFFFF
• Box Border Color：#001E62
• List Size For PC：16
• List Height For PC：1.6
• List Size For Mobile：16
• List Height For Mobile：1.6
• Marker Color：#001E62
• Marker Size For Pc：16
• Marker Size For Mobile：16
• Column Width：60, 40