👍

Marpサイバーキャット・ドリームスケープテーマの紹介

2024/10/16に公開

概要

サイバーキャット・ドリームスケープは、Marpプレゼンテーション用に設計された独特で魅力的なテーマです。このテーマは、サイバーパンクの要素とドリームライクな雰囲気を融合させ、視聴者の注目を集める独特の視覚体験を提供します。

主な特徴

  1. 鮮やかなカラーパレット
  2. グラデーションを活用したテキストとバックグラウンド
  3. アニメーション効果
  4. レスポンシブデザイン
  5. ダークモードサポート

カラーパレット

テーマは以下の5つの主要な色を使用しています:

  • バーガンディ (#8C3545)
  • ダーク (#26020C)
  • ネイビー (#253C59)
  • ティール (#329AA6)
  • サンド (#F2DDB6)

これらの色は、スライド全体で様々な要素に使用され、視覚的な一貫性と興味を生み出しています。

タイポグラフィ

本テーマは、優雅さとレトロフューチャリズムを融合させた「Kaisei Decol」フォントを使用しています。これにより、テキストに独特の個性が与えられています。

使用方法

  1. テーマファイルをダウンロードし、Marpプロジェクトに配置します。
  2. Marpドキュメントの先頭に以下のYAMLフロントマターを追加します:
---
marp: true
theme: cybercat-dreamscape
---

スタイルの例

通常のスライド

# これはメインタイトルです

これは通常のテキストパラグラフです。**太字***イタリック*のテキストも使用できます。

- リストアイテム1
- リストアイテム2
- リストアイテム3

[これはリンクです](https://example.com)

リードスライド

特別な「リード」クラスを使用して、開始スライドや重要なセクションを強調できます:

<!-- _class: lead -->

# プレゼンテーションタイトル

## サブタイトルやキャッチフレーズ

発表者名

コードブロック

\```python
def hello_world():
    print("Welcome to Cybercat Dreamscape!")

hello_world()
\```

引用

> サイバーキャット・ドリームスケープは、あなたのプレゼンテーションを夢のような冒険に変えます。

カスタマイズ

テーマのSCSSファイルを編集することで、色、フォント、その他のスタイル要素をカスタマイズできます。主な変数は以下の通りです:

$color-burgundy: #8C3545;
$color-dark: #26020C;
$color-navy: #253C59;
$color-teal: #329AA6;
$color-sand: #F2DDB6;

まとめ

サイバーキャット・ドリームスケープテーマは、独特で魅力的なビジュアルスタイルを求めるプレゼンターに最適です。サイバーパンクとドリームライクな要素を組み合わせることで、このテーマはあなたのプレゼンテーションを忘れられない体験に変えます。

Marpとサイバーキャット・ドリームスケープを使って、聴衆を魅了するプレゼンテーションを作成しましょう!

リポジトリ

https://github.com/Sunwood-ai-labs/Theme-Vault-Marp

https://github.com/Sunwood-ai-labs/Theme-Vault-Marp/releases/tag/v1.3.0

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Discussion