3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

R MarkdownのTOCおよびfloating_TOCをcssで書式設定

Posted at

タイトルの通りです。調べたのでメモ。

TOC, floating TOCとは

TOCとは"Table of Contents"の略称で,見出しリストです。R Markdownではこれを自動生成してくれます。またfloating TOCとは,この見出しリストをサイドバー形式で浮かせて表示させるというもので,常に表示させておくことができます。

このあたりの説明および使い方は,以下のサイトを参照してください:

TOCへのcssを用いた書式設定

TOCについては,Pandocの機能により実装されています。詳しくは生成物のhtmlもしくはPandocの情報にあたってください。

例えば文字色を変更したい場合,以下のような設定でできます:

toc.css
# 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!

3
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?