Marpのテーマ屋さんのCSSを引用してカスタマイズ

前回記事の続き

全部自力で書くのはしんどいので、Marp用のCSSのテンプレートを探していたら、見つかりました。ありがとうございます。

参考記事 フォントの適用方法について参考になりました。

使用したテンプレート

CSSをコピーして一部変更

• フォント、フォントサイズを変更
• なぜかスライド1枚目のみプレビューで見たときのフォントサイズが他のスライドと明らかに違っていたので、セレクタを追加して無理やり調整

変更後のCSS

/* @theme test */

/* スライド1枚目の見出し1（h1タグ） */
section:nth-of-type(1) h2 {
  font-size: 40pt;
  font-family: "Noto Sans JP", sans-serif;
  display: flex;
  flex-direction: column;
  padding-left: 4px;
}
/* スライド1枚目のpタグ */
section:nth-of-type(1) p {
  font-size: 40pt;
  /* しろくまフォント */
  font-family: '001Shirokuma', serif;
  display: flex;
  flex-direction: column;
  padding-left: 4px;
}
section{
  display: flex;
  flex-direction: column;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20pt;
  padding: 20px;
}

header{
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
  background: linear-gradient(to right, #3498db, #8e44ad);
  color: white;
  font-size: 28pt;
  font-weight: bold;
}

footer{
  width: 100%;
  position: fixed;
  padding: 10px;
  background: linear-gradient(to right, #8e44ad, #3498db);
  color: white;
  bottom: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

/* スライド表紙 */
section.title {
  background: linear-gradient(to right, #8e44ad, #3498db);
  color: white;
  padding: 50px;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 40pt;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

/* スライド表紙pタグ */
section.title p {
  color: white;
  font-size: 40pt;
  font-family: "Noto Sans JP", sans-serif;
  display: flex;
  flex-direction: column;
  padding-left: 4px;
  align-items: center;
  justify-content: center;
}

mdファイル

---
marp: true
theme: test
header: " "
footer: " "
---
<!--
_class: title
-->

# **Marp & CSS**

CSSでMarpをカスタマイズ

---
<!-- サイズを変更 -->
## 画像添付

画像は"bg cover"で背景にする。
このスライドのみフォントとサイズを変更している。
フォントはしろくまを使用している。
フォントサイズは40pt

![bg cover](image-2.png)

---
# 見出し

- これは
- それも

---
# リスト

1. 1つ目
2. 2つ目
3. 3つ目

---
# 表

| ヘッダー1 | ヘッダー2 | ヘッダー3 |
|---|---|---|
| セル1 | セル2 | セル3 |
| セル4 | セル5 | セル6 |
| セル7 | セル8 | セル9 |

---
# VBAのループ文

![bg](image-4.png)
*``` 頭の*は表示の都合
Sub test()
  Dim i As Long
  for i = 1 to 10
    msgbox "Hello World" & i "回目"
  next i
End Sub
*```  頭の*は表示の都合

スライドの仕上がり

わかったこと

CSSを適用させるためのポイント

• CSSのコメント /* @theme 〇〇 */ と、mdの theme: 〇〇 の〇〇の部分を一致させておく必要がある。
• cssとmdのファイル名は、コード内のコメントやmdの theme: 〇〇と一致させる必要はない。

特定のスライドにのみスタイルをあてたいとき

• 疑似クラスを使う

/* スライド1枚目の見出し1（h1タグ） */
section:nth-of-type(1) h2 {
  font-size: 40pt;
  font-family: "Noto Sans JP", sans-serif;
  display: flex;
  flex-direction: column;
  padding-left: 4px;
}

/* スライド1枚目のpタグ */
section:nth-of-type(1) p {
  font-size: 40pt;
  /* しろくまフォント */
  font-family: '001Shirokuma', serif;
  display: flex;
  flex-direction: column;
  padding-left: 4px;
}