Mystic Tome: 魅力的で伝統的な美学を備えたMarpテーマ

image0 image1

このテーマの特徴

Mystic Tome テーマの特徴

ダークで荘厳な美しさ

  • 暗い背景色(#001321)と温かみのあるテキスト色(#b2a08a)が、深い雰囲気と落ち着いた印象を与えます。

階層的な構造

  • セクションごとにまとまっており、見やすいレイアウトになっています。
  • タイトルセクションは対照的な背景色と大きなフォントサイズで強調されています。

装飾的な要素

  • ページヘッダーとフッターは、対角線状のラインとグラデーションによって装飾されています。
  • 見出しマーカーは、デフォルト、プライマリ、セカンダリの 3 種類のカラーが用意されており、視覚的なメリハリが付けられます。

視覚的な強調

  • 強調したいテキストは太字(強調)で表示されます。
  • 引用文は、境界線の装飾と大きなフォントサイズで視覚的に際立っています。

全体として、「Mystic Tome」テーマは、魅力的でありながらも実用的な、プレゼンテーションやドキュメントに伝統的な美学を取り入れています。

このテーマを利用する

CSS

/* @theme Mystic Tome */
@import default;

section {
  display: flex;
  flex-direction: column;
  padding: 48px 32px;
  font-size: 24pt;
  background: #001321;
  color: #b2a08a;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px 0;
  background: #142a4a;
  border-bottom: 4px solid #825835;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 10px;
  background: #142a4a;
  color: #825835;
  position: fixed;
  bottom: 0;
}

section.title {
  background: #142a4a;
  color: #ffde9d;
  padding: 64px 48px;
  text-align: center;
  font-size: 36pt;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

section.title h1 {
  font-size: 48pt;
  font-weight: bold;
  margin-bottom: 8px;
}

section.title p {
  font-size: 24pt;
}

.marker {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}

.marker--default {
  background: #3f516d;
}

.marker--primary {
  background: #825835;
}

.marker--secondary {
  background: #ffde9d;
}

.emphasis {
  font-weight: bold;
  color: #825835;
}

blockquote {
  border-left: 4px solid #825835;
  padding-left: 12px;
  margin-left: 40px;
  font-size: 28pt;
}

code {
  background: #273b4f;
  padding: 4px 8px;
  font-family: monospace;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 20px;
}

table td,
table th {
  border: 1px solid #b2a08a;
  padding: 4px 8px;
  text-align: center;
}

table th {
  background: #273b4f;
  color: #ffde9d;
}

.diagram {
  width: 50%;
  margin: auto;
}

.diagram--default {
  border: 1px solid #b2a08a;
}

.diagram--primary {
  border: 1px solid #825835;
}

.diagram--secondary {
  border: 1px solid #ffde9d;
}

Marpのサンプル

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

# 書籍に関する調査

---
<!--
_class: section
-->

## 目次

- はじめに
- 方法論
- 結果
- 考察
- まとめ

---
<!--
_class: section
-->

## はじめに

この研究の目的は、書籍の読み方が人々の知識や態度に与える影響を調査することである。私たちは、異なる方法で本を読んだ被験者グループ間で知識と態度の変化を比較しました。

---
<!--
_class: section
-->

## 方法論

私たちは、ランダムに対照群と実験群に割り当てられた 100 人の被験者を募集しました。対照群には、通常どおり本を読むように指示されました。実験群には、本を音読するように指示しました。

---
<!--
_class: section
-->

## 結果

実験群は、対照群と比較して、書籍の知識テストで有意に高いスコアを獲得しました。また、実験群は、本の内容に対してより肯定的な態度を示しました。

---
<!--
_class: section
-->

## 考察

これらの結果は、本を音読することで、人々の理解力と態度が向上することを示唆しています。これは、音読が情報を処理し、記憶に定着させるのに役立つためと考えられます。

---
<!--
_class: section
-->

## まとめ

この研究では、本を音読することで人々の知識と態度が向上することがわかりました。これらの結果は、読書教育における音読の役割の重要性を示しています。