コンテンツにスキップ

MkDocsの見た目をCSSでカスタマイズする

Material for MkDocsで作成したサイトの見た目をカスタマイズしたい。

テンプレートを直すほどでもないデザインだけであればCSSで簡単にできる。

ここではMkDocsのサイトをCSSでカスタマイズする方法を説明します。

独自のCSSの格納先

独自のCSSを格納するディレクトリは、Markdown一式を入れているdocsの下。docs以外に変更している場合は読み替えて。

今回は「css/crz33.css」という独自のCSSを用意するとして説明する。

ディレクトリ構成を図にすると下記。

crz33.com <- サイトのトップ
├── docs
│   ├── 2020 <- Markdown格納先
│   ├── css
│   │   └── crz33.css <- ここ
│   └── index.md
└── mkdocs.yml

CSSを読み込むように設定

mkdocs.ymlに先ほど作ったCSSを読み込むように設定。これだけ。

extra_css:
    - css/crz33.css

CSSの例

CSS全体を紹介し、それぞれの説明をしていく。

.md-content h2 {
    border-bottom: solid 3px black;
}

.md-content strong {
    background: linear-gradient(transparent 40%, #fff799 40%);
}

h2に下線を引く

.md-content h2 {
    border-bottom: solid 3px black;
}

強調(strong)を蛍光ペン風にする

.md-content strong {
    background: linear-gradient(transparent 40%, #fff799 40%);
}

最終更新日: 2020年4月25日