エレガントで読みやすいプレゼンテーションのための「precious_moments」Marpテーマ

image0 image1

このテーマの特徴

precious_moments テーマの特徴

この CSS テーマは、「precious_moments」という名前の通り、洗練されたエレガントな雰囲気を醸し出しています。以下はその主な特徴です。

ヘッダーとフッター: * 薄いピンク色の背景とコントラストの効いたフォントが印象的です。 * ヘッダーはスライドのタイトルとナビゲーションを表示し、フッターは著作権情報や追加情報を表示します。

セクション: * 各セクションは縦方向に列になっています。 * 背景色は淡いピンクからベージュのグラデーションで、柔らかな雰囲気を演出しています。 * フォントサイズは 24pt で、読みやすい視認性を確保しています。

タイトルセクション: * スライドのタイトルを強調する濃いピンク色の背景が特徴です。 * タイトルは目を引く 48pt のフォントで表示され、コピーは 24pt のフォントサイズで補足されています。

全体的な印象: このテーマは、プレゼンテーションをエレガントで読みやすく、洗練された印象を与えるのに適しています。淡いピンク色の色合いとコントラストの効いたフォントが、記憶に残る視覚体験を生み出します。

このテーマを利用する

CSS

/* @theme precious_moments */
@import default;

section{
  display: flex;
  flex-direction: column;
  font-size: 24pt;
  padding: 20px;
  gap: 30px;
}

header{
  width: 100%;
  height: 60px;
  padding: 10px;
  background-color: #f9E3e7;
  color: #343a40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-size: 28pt;
  font-weight: bold;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 8px #131420;
}

footer{
  width: 100%;
  position: fixed;
  padding: 10px;
  background-color: #f9E3e7;
  color: #343a40;
  bottom: 0px;
  text-align: center;
  font-size: 14pt;
  font-weight: bold;
  border-top: 8px solid #8795A1;
}

section.title{
  background: linear-gradient(to bottom, #f9E3e7 0%, #d6dbc2 100%);
  color: #343a40;
  padding: 60px 40px;
  text-align: center;
  font-size: 36pt;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

section.title h1{
  font-size: 48pt;
  font-weight: bold;
}

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

.button{
  background-color: #8795A1;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16pt;
  font-weight: bold;
  text-decoration: none;
}

.button:hover{
  background-color: #343a40;
  color: white;
}

::selection {
  background-color: #8795A1;
  color: white;
}

::-moz-selection {
  background-color: #8795A1;
  color: white;
}

Marpのサンプル

---
marp: true
theme: precious_moments
header: "募金活動プレゼンテーション"
footer: "あなたの支援で、世界を変えましょう!"
---

<!--
_class: title
-->

# 募金活動プレゼンテーション

---
## 募金活動の重要性

### 募金活動がもたらす影響
- 問題を解決し、生活を向上させる
- コミュニティを構築し、人々をつなぐ
- 希望と変化を生み出す

---
## 私たちの募金活動

### 目標とミッション
- [募金活動の目標を記載]
- [募金活動のミッションを記載]

---
## 寄付方法

### 寄付する理由
- [寄付する理由を記載]

### 寄付の方法
- オンラインで寄付する: [Web サイトまたは寄付プラットフォームのリンク]
- チェックでお送りください: [住所を記載]
- その他の方法: [その他の寄付方法を記載]

---
## 募金活動への参加

### ボランティアをする
- [ボランティアができる方法を記載]

### イベントに参加する
- [予定されているイベントを記載]

### ソーシャルメディアで共有する
- [ソーシャルメディアのハンドルやハッシュタグを記載]

---
## 寄付への感謝

### 寄付者の認識
- 寄付者への感謝の気持ちを表現する
- 寄付金がどのような使われ方をするかを示す

### 募金活動の成功
- 募金活動のこれまでの進捗状況を報告する
- 寄付金がもたらした具体的な影響を共有する

---
## 募金活動へのご支援をありがとうございます!