このテーマの特徴
カスタム Marp テーマの特徴:
この CSS は、洗練されたモダンな Marp テーマを作成します。その特徴は以下のとおりです。
1. セクション: * 背景色は濃い青色 (#0088D9) で、白いテキストを使用しています。 * フォントサイズは 24 ポイントです。
2. ヘッダー: * 背景色はグラデーション (#3367d6 から #5c7cfa へ) で、白いテキストを使用しています。 * 上下に 10ピクセルのパディングがあり、ディスプレイの幅にわたります。 * ヘッダーの高さと幅は固定されています (高さ: 60ピクセル、幅: 100%)。
3. フッター: * ヘッダーと同様に、グラデーションの背景色 (#5c7cfa から #3367d6 へ) で、白いテキストを使用しています。 * 下部に固定されており、ディスプレイの幅にわたります。 * 高さ: 60ピクセル、パディング: 10ピクセル。 * 中央揃えで、テキストが含まれています。
4. タイトルセクション: * 背景色は黄色 (#FCC400) で、白いテキストを使用しています。 * パディング: 40ピクセル、中央揃え、フォントサイズは 36 ポイントです。 * セクションの上下に 20 ピクセルのギャップがあります。 * タイトルセクション内のフッターは、自動的に下部に移動します。
全体的な効果: このテーマは、コントラストのある大胆な色と洗練されたグラデーションを使用して、注目を集めるプレゼンテーションを作成します。ヘッダーとフッターの固定により、ナビゲーションが簡単になり、タイトルセクションの視覚的な強調により、スライドのトピックが際立ちます。
このテーマを利用する
CSS
/* @theme custom_theme */ @import default; section{ display: flex; flex-direction: column; font-size: 24pt; background-color: #0088D9; color: white; } header{ display: flex; justify-content: space-between; align-items: center; width: 100%; height: 60px; padding: 10px; background-image: linear-gradient(to right, #3367d6, #5c7cfa); color: white; } footer{ width: 100%; height: 60px; padding: 10px; background-image: linear-gradient(to right, #5c7cfa, #3367d6); color: white; position: fixed; bottom: 0px; text-align: center; } section.title{ background-color: #FCC400; color: white; padding: 40px; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 20px; font-size: 36pt; } section.title footer{ position: relative; margin-top: auto; }
Marpのサンプル
--- marp: true theme: custom_theme header: " " footer: " " --- <!-- _class: title --> # ソーシャルメディア画像テンプレートのビジョン --- <!-- _class: section --> ## 目的: ソーシャルメディアプラットフォーム上でブランドの一貫したビジュアルアイデンティティを構築する。 --- <!-- _class: section --> ## ターゲットオーディエンス: ソーシャルメディアマーケター、コンテンツクリエイター --- <!-- _class: section --> ## デザイン原則: - **インパクト:** 視覚的にインパクトがあり、注目を集める - **統一:** ブランドのカラーパレット、フォント、スタイルに沿う - **柔軟性:** さまざまなソーシャルメディアプラットフォームやコンテンツタイプに適応できる --- <!-- _class: section --> ## イメージ: - **大胆で鮮やかな:** 暖かさとエネルギーを伝える - **魅力的で関連性のある:** ターゲットオーディエンスに響く画像を使用する - **ブランド化:** ロゴまたはブランディング要素を目立たせる --- <!-- _class: section --> ## タイポグラフィ: - **読みやすくインパクトのある:** サンセリフまたはモダンセリフフォントを使用する - **階層的:** ヘッドライン、ボディコピー、ソーシャルメディアハンドルを明確に区別する - **ブランドカラー:** フォントカラーはブランドのカラーパレットに合わせる --- <!-- _class: section --> ## レイアウト: - **モバイルファースト:** モバイルデバイスで最適に表示される - **グリッドベース:** 一貫した構造とビジュアルバランスを提供する - **カスタマイズ可能:** テキスト、画像、レイアウトを簡単に編集できる --- <!-- _class: section --> ## ファイル形式: - **推奨:** JPG、PNG - **解像度:** 2048 x 2048ピクセル以上（ソーシャルメディアプラットフォームによって異なる） - **カラーモード:** RGB --- <!-- _class: section --> ## 追加の機能: - **オーバーレイ:** 透明度または色付きのオーバーレイを使用して、画像に視覚的な興味を付加する - **フリップまたは反転:** 左右反転可能なテンプレートを作成する - **インタラクティブ要素:** ユーザーがクリックまたはスワイプして追加のコンテンツを表示できるようにする
