【RMarkdown】htmlアウトプットにカスタマイズのCSSスタイルを適応

RMarkdownを英語だけで使っていた時は規定のスタイルで気にならなかったのだけれど、

先日、日本語を使ってみたら、英語と日本語のフォントで明らかな差があったり、大きさのバランスが悪くて気になったので、CSSをカスタマイズした。

RMarkdownのhtmlアウトプットにカスタマイズのCSSスタイルを適応

CSSを作る

CSSはブログ等で使っている形式と同じ。

今回は変更したかった部分はフォントの種類や大きさetc.だったので、下記のような感じでざっくりと作成。

h1 {
margin: 3em -1em 1.5em;
padding: 20px 15px 10px;
font-size: 24px;
font-family: "Meiryo";
}

h2 {
/*文字の上下 左右の余白*/
border-bottom: solid 4px #d7d7d7;
/*下線*/
border-left: 4px solid #d7d7d7;
border-radius: 200px 0px 0px 200px;
/*左側の角を丸く*/
margin: 3em -1em 1.5em;
padding: 20px 15px 10px;
font-size: 20px;
font-family: "Meiryo";
}

h3 {
border-bottom: solid 3px #5f7987;
/*下線*/
border-left: 10px solid #5f7987;
border-radius: 30px 0px 0px 30px;
/*左側の角を丸く*/
padding-left: 10px;
margin: 3em -1em 1.5em;
background-color: #f5f5f5;
font-size: 18px;
font-family: "Meiryo";
}

h4 {
font-size: 16px;
font-family: "Meiryo";
}

p {
font-size: 12px;
font-family: "Meiryo";
}

ul, ol {
margin: .5em 0 0.6em 1.2em;
font-weight: 600;
}

li {
line-height: 1.5em;
}

これを適当な名前で保存（今回は "style.css"）。

YAMLヘッダのアウトプットに追加

YAMLヘッダ (YAML metadata section) のoutputのところに、

css: 名前.css

を追加。

---
title: "RMarkdown"
author: "Me"
date: "`r format(Sys.Date(),"%B %d,%Y")`"
output:
  html_document:
    theme: readable
    toc: yes
    toc_depth: 4
    toc_float: yes
    df_print: paged
    self_contained: false
    css: style.css           # style.cssを参照してもらう。
  word_document:
    toc: yes
    toc_depth: '4'
---

 

スタイルがいい感じに変更された ▼