このテーマの特徴
テーマの特徴:
カラフルなグラデーションのヘッダーとフッター: * ヘッダーとフッターは、青と紫のグラデーションを使用し、スタイリッシュで目立つデザインになっています。
大規模なタイトルセクション: * タイトルセクションは、青色の背景と白いフォントを使用し、プレゼンテーションのメイントピックに焦点を当てています。
列表示のコンテンツ: * 各セクションは縦に並ぶ列で表示され、プレゼンテーションの内容を整理して見やすくしています。
固定フッター: * フッターはページの下部に固定され、プレゼンテーションを通じて常に表示されます。プレゼンテーションの概要や連絡先情報を表示するのに便利です。
カスタムフォントサイズ: * テーマでは、フォントサイズがカスタマイズされています。タイトルは大きく強調表示され、他のコンテンツは読みやすいサイズになっています。
ドロップシャドウエフェクト: * ヘッダーとフッターにドロップシャドウエフェクトが追加されており、プレゼンテーションに奥行きと洗練された印象を与えています。
タイトルセクションの独自フッター: * タイトルセクションには独自のフッターがあり、他のセクションとは異なる内容を表示できます。これは、追加の情報を提供したり、作者に関する詳細を表示したりするために使用できます。
このテーマを利用する
CSS
/* @theme custom_theme */ @import default; section{ display: flex; flex-direction: column; font-size: 24pt; } header{ width: 100%; background: linear-gradient(to right, #2980b9, #8e44ad); color: white; top: 0px; height: 70px; padding: 15px; font-size: 20pt; box-shadow: 0 2px 5px #888888; } footer{ width: 100%; background: linear-gradient(to right, #8e44ad, #2980b9); color: white; position: fixed; padding: 15px; margin-top: 30px; bottom: 0px; font-size: 14pt; text-align: center; box-shadow: 0 -2px 5px #888888; } section.title{ background-color: #3498db; color: white; padding: 50px; font-size: 48pt; margin-bottom: 30px; } section.title footer{ position: relative; margin-top: auto; }
Marpのサンプル
--- marp: true theme: custom_theme header: " " footer: " " --- # タイトル --- # 見出し - これはリスト - これもリスト