カスタムグラデーションで際立つMarpテーマ

image0 image1

このテーマの特徴

カスタムグラデーションテーマの特徴:

ヘッダーとフッター:

  • 線形グラデーション(左から右へ)を使用した、鮮やかなピンクとオレンジの背景で視覚的に際立ちます。
  • 白いテキストと太字を使用し、タイトルが目立ちます。

コンテンツセクション:

  • カラムレイアウトで、タイトルセクションとコンテンツセクションを区別します。
  • タイトルセクションは、別の線形グラデーションの背景を持ち、円形のラジアルグラデーションで強調されています。
  • コンテンツセクションは縦方向に配置され、24ptのフォントサイズで読みやすくなっています。

全体的な効果:

  • このテーマは、グラデーションカラーを使用して視覚的にインパクトのあるプレゼンテーションを作成します。
  • 色調の組み合わせは暖かく歓迎的な雰囲気を醸し出し、タイトルとコンテンツを効果的に区別します。
  • タイトルセクションのラジアルグラデーションは、さらに視覚的な興味を加えます。

このテーマを利用する

CSS

/* @theme custom_gradient_theme */
@import default;

section{
  display: flex;
  flex-direction: column;
  font-size: 24pt;
}

header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: linear-gradient(to right, #ff71ce, #ffb3a7);
  color: #ffffff;
  font-size: 24pt;
  font-weight: bold;
}

footer{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: linear-gradient(to right, #ffb3a7, #ff71ce);
  color: #ffffff;
  position: fixed;
  bottom: 0px;
}

section.title{
  background: linear-gradient(to right, #ffb3a7, #ff71ce);
  color: #ffffff;
  padding: 50px;
  text-align: center;
  font-size: 36pt;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  background-image: radial-gradient(circle at center, #ff71ce 0%, #ffb3a7 100%);
}

Marpのサンプル

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

# クラシックなテーマのMarp

---

## セクション 1

- クラシックなテーマの特徴
- 色、フォント、レイアウト、スタイル

---

### サブセクション 1

- 色:ネイビー、グレー、ベージュ、ゴールド
- フォント:Times New Roman、Georgia
- レイアウト:明確な階層、十分な余白、伝統的なグリッド線

---

### サブセクション 2

- スタイル:洗練された、時代を超えた、プロフェッショナル、控えめ
- イメージ:古い手書きの原稿、ビンテージのカメラ、アンティークの時計、大理石の質感
- アイコン:羽ペン、インク瓶、革表紙の本、古典的な彫刻

---

## セクション 2

- クラシックなテーマの活用方法
- プレゼンテーション、ドキュメント、その他のコンテンツの作成

---

### サブセクション 1

- プレゼンテーション:フォーマルなイベント、歴史的なトピック、伝統的なビジネス設定
- ドキュメント:報告書、論文、契約書
- その他のコンテンツ:ブログ記事、ソーシャルメディア投稿、マーケティング資料

---

### サブセクション 2

- ヒント:適切なフォントの選択、十分な余白の使用、イメージやアイコンの慎重な取り扱い
- 注意:クラシックなテーマは、一部のオーディエンスには古くさく見える可能

---

## 結論

- クラシックなテーマは、エレガントでプロフェッショナルな雰囲気を与える
- 多用途で、さまざまなコンテンツの作成に使用できる
- 効果的に使用するには、上記のヒントと注意点を考慮する必要がある