テーマの使い方
AutoSlideIdeaでプレゼンテーションのデザインをカスタマイズする方法を説明します。
組み込みテーマ
利用可能なテーマ
- default - シンプルでクリーンなデザイン
- gaia - よりカラフルで現代的
- uncover - エレガントでミニマル
テーマの設定方法
---
marp: true
theme: gaia
---
# プレゼンテーションタイトル
カスタムCSSテーマ
基本的なカスタムテーマ
/* theme/custom.css */
@import 'default';
section {
background-color: #f8f9fa;
color: #333;
}
h1 {
color: #2e86ab;
border-bottom: 3px solid #2e86ab;
padding-bottom: 10px;
}
h2 {
color: #666;
}
code {
background-color: #e9ecef;
padding: 2px 4px;
border-radius: 3px;
}
カスタムテーマの適用
# SlideFlowでの使用
./slideflow/slideflow.sh build --theme custom
# npm scriptsでの使用
npm run pdf -- presentations/my-presentation/slides.md \
--theme theme/custom.css
テーマのカスタマイズ要素
色とフォント
section {
/* 背景色 */
background-color: #ffffff;
/* テキスト色 */
color: #333333;
/* フォント設定 */
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 28px;
line-height: 1.5;
}
見出しのスタイル
h1 {
font-size: 2.5em;
font-weight: bold;
margin-bottom: 0.5em;
text-align: center;
}
h2 {
font-size: 1.8em;
color: #555;
margin-top: 1em;
}
リストのスタイル
ul {
list-style-type: disc;
padding-left: 1.5em;
}
ul li {
margin-bottom: 0.5em;
}
/* カスタムマーカー */
ul li::marker {
color: #2e86ab;
}
コードブロックのスタイル
pre {
background-color: #f4f4f4;
border: 1px solid #ddd;
border-radius: 5px;
padding: 1em;
overflow-x: auto;
}
pre code {
background-color: transparent;
padding: 0;
}
高度なカスタマイズ
スライドクラスの定義
/* リードスライド用 */
section.lead {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
section.lead h1 {
font-size: 3em;
margin-bottom: 0.3em;
}
/* 反転色スライド */
section.invert {
background-color: #333;
color: #fff;
}
使用方法：
<!-- _class: lead -->
# 大きなタイトル
サブタイトル
---
<!-- _class: invert -->
# ダークテーマのスライド
レスポンシブデザイン
/* プロジェクター用（4:3） */
@media (aspect-ratio: 4/3) {
section {
padding: 40px;
}
}
/* ワイドスクリーン（16:9） */
@media (aspect-ratio: 16/9) {
section {
padding: 60px 80px;
}
}
アニメーション
/* フェードイン効果 */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
section {
animation: fadeIn 0.5s ease-in;
}
/* スライドイン効果 */
h1 {
animation: slideInFromLeft 0.5s ease-out;
}
@keyframes slideInFromLeft {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
テーマテンプレート
ビジネス向けテーマ
/* theme/business.css */
@import 'default';
:root {
--primary-color: #003366;
--accent-color: #ff6600;
--bg-color: #f5f5f5;
}
section {
background: var(--bg-color);
padding: 60px;
}
h1 {
color: var(--primary-color);
font-size: 2.2em;
margin-bottom: 0.5em;
}
strong {
color: var(--accent-color);
}
/* グラフや図表のスタイル */
img {
border: 1px solid #ddd;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
アカデミック向けテーマ
/* theme/academic.css */
@import 'default';
section {
font-family: 'Times New Roman', serif;
font-size: 24px;
line-height: 1.6;
}
/* 数式のスタイル */
.katex {
font-size: 1.1em;
}
/* 引用のスタイル */
blockquote {
border-left: 4px solid #666;
padding-left: 1em;
font-style: italic;
color: #666;
}
ベストプラクティス
1. 一貫性の維持
- 同じプレゼンテーション内で統一感を保つ
- 色数は3-4色程度に抑える
- フォントは2-3種類まで
2. 可読性の確保
/* 良い例 */
section {
font-size: 28px;
line-height: 1.5;
color: #333;
background: #fff;
}
/* 避けるべき例 */
section {
font-size: 16px; /* 小さすぎる */
line-height: 1; /* 狭すぎる */
color: #ccc; /* コントラスト不足 */
}
3. プロジェクター対応
- 高コントラストを維持
- 細い線は避ける
- 明るい背景を使用
トラブルシューティング
テーマが適用されない
- CSSファイルのパスを確認
@import文の構文を確認- Marpの設定を確認
スタイルの競合
/* 詳細度を上げて優先順位を確保 */
section.custom h1 {
color: #2e86ab !important;
}