このテーマの特徴
電子書籍用marpテーマ「book-blue」
このテーマは、書籍のような外観で、読みやすく整理された電子書籍を作成するためのものです。その主な特徴を以下に示します。
- ページサイズ：ページは1600px * 2560pxと大きく、書籍のような読みやすいサイズです。
- ヘッダー：各セクションのヘッダーは右揃えで、タイトルと、上部にページ番号の表示があります。
- フッター：フッターにはナビゲーション用のページ番号が表示されます。
- タイトルページ：タイトルページには、タイトルとサブタイトルが大きく表示され、中央揃えになっています。
- コンテンツ：コンテンツは「メイン」と「サイドバー」の2つの列で構成されています。「メイン」列には本文が含まれ、「サイドバー」列には目次が表示されます。
- 目次：サイドバーの目次には、リスト形式で各セクションへのリンクが含まれます。リスト項目にカーソルを合わせると、背景色が変わります。
- 配色：テーマの配色には、青と黒の組み合わせが使用され、落ち着いたで読みやすい雰囲気を作り出しています。
このテーマを利用する
CSS
/* @theme book-blue */ @import gaia; section{ width: 1600px; height: 2560px; padding: 100px 60px 60px; font-size: 36pt; box-sizing: border-box; } header{ margin-bottom: 32pt; font-size: 24pt; text-align: right; background-color: #27424a; color: #fff; padding: 16px; text-transform: uppercase; } footer{ position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background-color: #243d44; font-size: 18pt; padding: 16px; display: flex; justify-content: space-between; align-items: center; } section.title{ background-color: #243d44; color: #fff; text-align: center; padding-top: 100px; h1{ font-size: 72pt; margin-bottom: 32pt; } h2{ font-size: 48pt; } } .content{ display: flex; flex-direction: column; justify-content: space-between; } .main{ flex: 1; margin-top: 20px; } .sidebar{ width: 300px; background-color: #243d44; color: #fff; padding: 16px; margin-left: 32px; border-radius: 10px; } .sidebar ul{ list-style-position: inside; list-style-type: none; padding: 0; } .sidebar li{ font-size: 24pt; margin-bottom: 16px; cursor: pointer; transition: all .3s ease-in-out; } .sidebar li:hover{ background-color: #345a64; } .pagination{ position: absolute; bottom: 16px; right: 16px; font-size: 24pt; color: #fff; } .pagination span{ cursor: pointer; margin: 0 12px; } .pagination span.active{ background-color: #243d44; padding: 4px; }
Marpのサンプル
--- marp: true theme: book-blue header: " " footer: " " --- <!-- _class: title --> # オーディオブック --- ## レイアウト **オーディオプレーヤー** - 画面の上部に配置する - 再生/一時停止、巻き戻し/早送り、ボリュームコントロールが含まれる **テキスト** - プレーヤーの下にある --- ## デザイン **オーディオプレーヤー** - 目立ちやすく、使いやすいようにする。モダンでミニマルなデザインにする。 **テキスト** - 読みやすく、音声と補完するようにする。背景とのコントラストを考慮する。 **視覚的な区別** - オーディオコンテンツとテキストコンテンツを視覚的に区別するために、色やその他のデザイン要素を使用する。 --- ## インタラクション **ユーザーコントロール** - ユーザーは音声の再生を制御し、テキストと同期させることができる。 **強化されたインタラクション** - ユーザーは、ハイライト、メモ、ブックマークを追加して、オーディオブックとテキストとのインタラクションを強化できる。
