More than 3 years have passed since last update.

MarpのCSSをカスタマイズした（gaia.scssをいじってコンパイル）

Last updated at 2021-08-17Posted at 2021-02-04

はじめに

パワポじゃなくて、Markdownからスライドをつくりたいと思っていた。reveal.jsをふくめていろいろ調べたり使ってみた。いまのところ、Marpがいい感じ。アウトプットのデザインも悪くない！すばらしい！！！

Qiitaをはじめ、解説ページもけっこうある。

【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスライドを作る - Qiita
https://qiita.com/tomo_makes/items/aafae4021986553ae1d8
　→　かなり詳しく書いてくださっている！！！

　Marp Basic Example
https://speakerdeck.com/yhatt/marp-basic-example
　→　作者の服部さんによるスライド

Marpを使ってmarkdownでスライド資料を作成する
https://dev.classmethod.jp/articles/make-slides-from-markdown-with-marp/

vscode上でマークダウンを使ってスライドを作る。（Marp, Reveal.js）
https://ossyaritoori.hatenablog.com/entry/2020/05/20/vscode上でマークダウンを使ってスライドを作る。（M

Marp(Markdown Presentaiton)の文法まとめ（147LGMT）
https://qiita.com/pocket8137/items/27ede821e59c12a1b222

なんといっても公式マニュアル。Image Syntaxはここがいちばん詳しい
https://marpit.marp.app
マークダウンはこちらを
https://marpit.marp.app/markdown

標準で入っているテンプレート`gaia`も素晴らしい。

gaiaというテーマがあって、その下のクラスに下記がある

カテゴリ	クラス	起きること
色変更	`invert`	スライドの文字色と背景色が反転
	`gaia`	アクセントカラースライド
揃え変更	`lead`	中央揃え（タイトル用）

ということがわかれば、すごく使いやすくて感謝感激。

ただ、色をすこーし変えたかったのだけれど、どうすればよいかわからずめっちゃ悩んだ。

できなくて困ったこと

オフィシャルのドキュメントには
https://marpit.marp.app/theme-css

$bg-color: #f80;
$text-color: #fff;

@import-theme 'base';

section {
  background: $bg-color;
  color: $text-color;
}

というように、@import-themeして、変数$を変えればいい感じに書いてあるのだけれど、これがうまく行かない。（何か勘違いしているのかもしれないけど）

後日談：作者の服部さんから「scss variablesは使えない」と返事をいただいた。わたしのドキュメントの誤読。ということでこの記事で書いているように、scssをコンパイルして使うのがよさげ。
How can I use @import-theme？ #73
https://github.com/marp-team/marp/discussions/73

/* @theme customized */

@import 'base';

section {
  background-color: #f80;
  color: #fff;
}

というのもあるけど、変更範囲が多すぎて、ちょっと手がつけられない感じ。

あまり、CSSのカスタムのしかたが詳しいページがなくて、困った……。

そういえば公式ディスカッションページがあって、ここは作者の服部さんも
コメントを下さる様子。英語だけど。
過去のQ&Aが見られてとても助かる。
htps://github.com/marp-team/marp/discussions
ここを読んでも解決できなかったんだなあ。

やったこと（概要）

gaia.scssを入手
sassをインストール（scssをコンパイルしてcssにする）
gaia.scssを変更し、gaia_custom.cssを生成
VS Codeで設定

やったこと（もう少し詳しく）

前準備

gaia.scssの入手　→　
https://github.com/marp-team/marp-core/blob/26f2402d443d26af387adb0ee86cafa1149beb34/themes/gaia.scss

sassのインストール　→
sass・scssとは？導入方法や使い方を解説する【Win/Mac対応】
https://miya-system-works.com/blog/detail/112

macOSの場合は、下記でうまくいった。

$ sudo gem install sass -n /usr/local/bin/

gaia.scssの変更

差分だけ表示すると下記の通り。

4c4
<  * @theme gaia
---
>  * @theme gaia_custom
11,14c11,14
< $color-light: #fff8e1;
< $color-dark: #455a64;
< $color-primary: #0288d1;
< $color-secondary: #81d4fa;
---
> $color-light: #FDF7E2;
> $color-dark: #274761;
> $color-primary: #205160;
> $color-secondary: #A3C6E5;
217,219c217,221
<   font-size: 35px;
<   font-family: 'Lato', 'Avenir Next', 'Avenir', 'Trebuchet MS', 'Segoe UI',
<     sans-serif;
---
>   // font-size: 35px;
>   // font-family: 'Lato', 'Avenir Next', 'Avenir', 'Trebuchet MS', 'Segoe UI',
>     // sans-serif;
>   font-family: "Hiragino Kaku Gothic ProN", sans-serif;
>   font-size: 32px;

見てのとおりだが、theme名称をgaia_customに変え、色（４色）を変え、フォントを変えた。

コンパイルは

$ sass gaia_custom.scss:gaia_custom.css

補足

めっちゃ細かいことで、省略したけれど、下記の行はsassが通らないので、scssのときにはコメントアウトしておいて、コンパイル後のcssでコメントアウトを戻した。

/* @import '~highlight.js/styles/sunburst'; */

VS Codeでの設定

【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスライドを作る
https://qiita.com/tomo_makes/items/aafae4021986553ae1d8
にもあるとおりだが、VS Codeの設定をする。

今回の場合だとVS Codeの設定Marp: Themesに「gaia_custom.css」を追加した。そして、該当フォルダにgaia_custom.cssをコピー。

mdのサンプル

---
marp: true
theme: gaia_custom
size: 4:3
paginate: true

---
<!-- _class: lead invert -->
<!-- _paginate: false -->

# marp custom css<br>テスト用スライド

<br>

2021-02-04版

---

### もくじ

1. 背景（再掲）
2. 残検討事項
3. やりたいこと（再掲）
4. できている／これから
    - フォーム生成
    - メールで案内
    - 集計と共有
5. マニュアル（仮骨子）

---

<!-- _class: gaia -->

### 残検討事項

- クイズの回答後、どういうFBがあると、回答者のためになるか？
    - → FB頻度や方法と密接に関係する

- スクリプトで<mark>自動化を実現</mark>しているが、よいか？

---

### 進捗概要

| 項目               | 進捗率 | 前回比 |
| :----------------- | :----: | :----: |
| フォーム作成       | 75%    | +05%   |
| メールで案内       | 50%    | +50%   |
| （回答／結果記録） | -      |        |
| 集計し共有         | 20%    | +20%   |

→集計と共有の方法は要検討（FBの目的と関連）

---

<!-- _class: lead invert -->
<!-- _paginate: false -->

END