見出しが適切に設定された目次は、ページの概要をささっと把握できるので便利ですよね。

ところで、目次は本来「好きなタイミングで確認できる状態」が理想だと思います。少し視野を広げて Amazon の Kindle アプリなどの電子書籍アプリを使ってみると、目次をいつでも確認できるような仕組みがずいぶん前から導入されています。

例えば、下の画像は「現代訳論語」の目次です。「論語」がより現代風の日本語でわかりやすく訳されているので、読みやすいと思います。Amazon で無料で読める（本ページ公開時点）のでぜひぜひ。

ウェブサイトをスマートフォンやタブレットのアプリのように閲覧・操作ができる PWA（Progressive Web Apps）への関心も少しずつ高まってきていますし、巷のアプリで「これはいいな！」と思った機能は、ウェブサイトに積極的に取り入れてもいいのではないかと思います。

というわけで Nishiki Pro テーマ では目次をさらに活用してもらうため、ページ本文中のどこからでも目次を確認できる「固定（追尾）目次」機能が利用できます。

固定目次を設置することで、情報への「アクセスしやすさ」の向上にもつながります。ぜひお試しください。

目次

• 固定目次サンプル
  • デモサイトで動作確認できます
  • 固定目次の仕組み
• 固定目次の設定方法
  • カスタマイザー画面
• カスタマイズ項目一覧

固定目次サンプル

デモサイトで動作確認できます

このサポトピアのウェブサイトや Nishiki Pro テーマのデモサイト で実際の動作を確認できますので、ご参考ください。

固定目次の仕組み

ページをスクロールしていくと、冒頭の目次以降の見出しから固定目次が表示されます。

固定目次はヘッダーに固定され、現在読んでいる箇所の見出しを表示します。固定目次内のアイコンを選択すると、目次が表示されます（もちろん見出しを選択すると、該当する箇所へスクロールします）

固定目次の設定方法

WordPress の管理画面から「外観」→「カスタマイズ」を選択し「[Nishiki Pro] オプション」のパネルを選択して「目次」パネルを選択します。

カスタマイザー画面

目次の設定一覧の中に、固定目次の項目があります。

カスタマイズ項目一覧

項目	概要	デフォルト値
表示する	チェックすると表示	チェック
背景カラー（固定目次）		#222222
テキストカラー（固定目次）		#ffffff
背景カラー（固定目次：オープン）		#222222
テキストカラー（固定目次：オープン）		#ffffff
背景の不透明度（固定目次：オープン）		90
背景をぼかす（固定目次：オープン）		未設定
オープンタイプ（固定目次：オープン）	スライド/フェード	スライド

固定目次はデフォルトでは ON（チェックがついた状態）になっていますが、非表示にもできますので、お好みで設定ください。

この機能について気が付いたことや要望などがありましたら ユーザーコミュニティ までお寄せくださいますよう、お願いいたします。必要に応じて今後のアップデートなどで対応いたします。