ObsidanでMarpプラグインを使う記事はいくつかあり、五番煎じぐらいではありますが記事にしてみました。
いわゆる「やってみた記事」なのでそこまで詳しくまとまってはいないです。
使い方のメモをちょっとだけ見やすくした程度なのでご了承ください。
そもそもGoogleスライドやパワポのようなGUIと比べると、Marpは一からテキストで作成する必要があるので面倒です。
しかし、テンプレートさえ用意しておけば、かなり楽にスライドが作れます。
短時間でちょっとしたスライドを作りたい人はいいかもしれませんね。
それでは使い方を紹介します。
インストールと設定
まずはコミュニティプラグインでMarp Slidesを検索してからインストールしましょう。
インストールしたら、設定画面でEnable HTMLをONにしましょう。
ONにしないと流石に不便です。
使い方
Marpでは---がスライドのページ区切りになります。
以下のようなYAMLヘッダーでスライド全体の設定と見た目を記述します。
---
marp: true
theme: default
paginate: true
size: 16:9
style: |
/* シンプルな全体スタイル */
section { font-family: "Helvetica Neue", Arial, sans-serif; color:#222; padding:28px; }
h1 { font-size:40px; margin:0 0 8px 0; }
.subtitle { color:#666; margin:0 0 18px 0; }
.center { display:flex; justify-content:center; align-items:center; }
.rounded { border-radius:8px; box-shadow:0 8px 18px rgba(0,0,0,0.08); }
.caption { font-size:0.88em; color:#666; margin-top:8px; text-align:center; }
.two-col { display:flex; gap:20px; align-items:flex-start; }
.col { flex:1; min-width:0; }
---
- marp: true
Marpモードを有効にします。これがないと Marp 固有の機能(スライド区切り、style の適用など)が動かないことがあります。 - theme: default
Marp のテーマ指定です。 - paginate: true
ページ番号(スライド番号)を表示します。 - size: 16:9
スライドのアスペクト比(サイズ)。"16:9" や "4:3"、または具体的なピクセル指定を使える場合があります(Marp のバージョン依存)。 - style: |
ここから後のインデントされたブロックがそのまま CSSになります。front-matter 内に書くことで、スライド全体に適用されます。
CSSについての詳細は割愛します。CSS解説してもって感じがある()
続いてスライド本体の書き方です。先ほどのYAMLヘッダーも合わせたサンプルを用意しました。
---
marp: true
theme: default
paginate: true
size: 16:9
style: |
/* シンプルな全体スタイル */
section { font-family: "Helvetica Neue", Arial, sans-serif; color:#222; padding:28px; }
h1 { font-size:40px; margin:0 0 8px 0; }
.subtitle { color:#666; margin:0 0 18px 0; }
.center { display:flex; justify-content:center; align-items:center; }
.rounded { border-radius:8px; box-shadow:0 8px 18px rgba(0,0,0,0.08); }
.caption { font-size:0.88em; color:#666; margin-top:8px; text-align:center; }
.two-col { display:flex; gap:20px; align-items:flex-start; }
.col { flex:1; min-width:0; }
---
<!-- タイトル -->
<section>
<div>
<h1>シンプルなHTML + <img> サンプル</h1>
<p class="subtitle">Obsidian + Marp で使う最小限のテンプレート</p>
<p>発表者: <strong>Kei Adachi</strong></p>
</div>
<!-- 画像は vault 内の ./assets/photo.jpg を参照してください -->
<div class="center" style="margin-top:18px;">
<img src="./assets/チェリー4.jpg" alt="タイトル画像" width="250" class="rounded">
</div>
</section>
---
<!-- シンプル画像スライド -->
## 画像(HTMLのimgタグを使用)
<div class="center" style="flex-direction:column;">
<img src="./assets/チェリー2.jpg" alt="ヒーロー画像" width="400" class="rounded">
<div class="caption">キャプション: 画像の説明（./assets/柴犬_ひまわりエリザベスカラー.jpg）</div>
</div>
<!-- Presenter notes:
- 画像は相対パスで指定してください
- エクスポート時は --allow-local-files が必要なことがあります
-->
---
## 2カラム（画像 + 要点）
<div class="two-col">
<div class="col">
<h3>ポイント</h3>
<ul>
<li>HTMLタグ（<img>）は問題なく使えます</li>
<li>クラスや style を付けて見た目を調整できます</li>
<li>エクスポート時はローカル画像の扱いに注意</li>
</ul>
</div>
<div class="col">
<img src="./assets/AWS.png" alt="ダイアグラム" width="70%" class="rounded">
<div class="caption">図: AWSの構成図（./assets/AWS.png）</div>
</div>
</div>
---
## コードを少し見せる
以下は短いコードの例です（Markdown のコードブロックを使用）。
```javascript
function greet(name) {
return `こんにちは、${name}さん`;
}
console.log(greet('Kei'));
```
---
# 最後に
ご清聴ありがとうございました。
- Email: you@example.com
出力について
インストールして有効化すると以下のようなボタンがサイドバーに出てきます。
これを押すとプレビューが出てきて、出力のボタンが出てきます。
以下がプレビューや出力ボタンが出てきた画面です。
ボタンを押すと、編集しているマークダウンと同じ階層のフォルダに出力されます。
出力先のフォルダはプラグインの設定画面から指定できます。
先程示したサンプルをマークダウンに貼り付けてHTML出力しました。
いい感じでスライドになっていますね。CSSもしっかり適用されています。
まぁ予想通りすぎて面白味に欠けますが。
ただ、コードブロックや##などのマークダウン記法もしっかりと反映されているのが嬉しいです。
画期的で超便利ツールという感じではないかもしれませんが、それなりに便利です。
注意点
imgタグで画像を指定する場合は、編集しているマークダウンと同じ階層にassetsフォルダを作成してください。
そのassetsフォルダの中に画像を入れておいて相対パスで指定してください。絶対パスだと表示されませんでした。
Windowsの\は大丈夫でした(相対パスの場合)。
プロジェクトルート/
├─ assets/
│ ├─ image1.png
│ ├─ image2.jpg
│ └─ ...（画像ファイル）
└─ Marpサンプル.md
余談
ここまで書いたものの、なんかPDF出力がうまくいかない！
昼間はうまくいってたのに！
パワポ出力は予想通りポンコツ。うまく出力する方法一応探ってみます。
これらの原因わかり次第また記事を更新しますので少々お待ちを。