タイトルの通りです。調べたのでメモ。
TOC, floating TOCとは
TOCとは"Table of Contents"の略称で,見出しリストです。R Markdownではこれを自動生成してくれます。またfloating TOCとは,この見出しリストをサイドバー形式で浮かせて表示させるというもので,常に表示させておくことができます。
このあたりの説明および使い方は,以下のサイトを参照してください:
TOCへのcssを用いた書式設定
TOCについては,Pandocの機能により実装されています。詳しくは生成物のhtmlもしくはPandocの情報にあたってください。
例えば文字色を変更したい場合,以下のような設定でできます:
# TOC a {
color: black;
}
要するに,TOCで自動生成された要素は,#TOC
で覆われているというだけです。あとは自由に設定できるかと。
floating TOCへのcssを用いた書式設定
floating TOCはTocifyというjsライブラリを使って実装されています。
外枠,全体設定
以下のような感じで指定します:
.tocify .tocify-header {
color: red;
border: solid 3px blue;
}
.tocify .tocify-header
で,このfloating TOCの外枠や全体領域を指定できます。color:
で文字色を,border:
で外枠の設定を指摘できます。なお,ここでbackground:
を指定しても反応しませんでした。おそらく後述する.tocify .tocify-item
の方で色の指定が入っているからだと思います。
非アクティブな項目の設定
以下のような感じで指定します:
.tocify .tocify-item {
background: lightblue;
color: blue;
border: solid 3px pink;
}
塗りつぶしを指定すると,アクティブでない項目に対して色を塗れます。また.tocify .tocify-header
で文字色を指定していて,こちらでも文字色を指定した場合,こちらの方が優先されます。また,ここのborder:
は,各項目への枠線となります。
アクティブな項目の設定
以下のような感じで指定します:
.tocify .tocify-header .active {
color: white;
background: green;
}
ここで指定した内容は,上記2つの指定を上書きして最優先されます。また特に指定しない場合,デフォルトの設定があるので青色背景,白色文字が優先されます。
style設定の読み込ませ方
一番確実なのが,Rmdファイルのyamlフロントマターの後に,cssチャンクを入れる方法です:
```{css}
#TOC a {
color: black;
}
.tocify .tocify-header {
color: red;
border: solid 3px blue;
}
.tocify .tocify-header .active {
color: white;
background: green;
}
.tocify .tocify-item {
background: lightblue;
color: blue;
border: solid 3px pink;
}
```
これならば,cssの内容を一番最後に読み込むことになるので反映されます。
また,おそらくはカスタムCSSで準備してyamlフロントマターで指定しても反映するとは思いますが,もしかしたら一部されないカモしれません。その際はcssチャンクを準備してみてください。
Enjoy!