※当サイトはリンクに広告ページが含まれている場合があります
Markdownからそのままセミナー資料を作ることができる「Marp」の使い方・設定を試行錯誤しています。
Markdown + CSSによる魅力は、何といっても、一度、デザイン・構図を設定してしまえば、すべての資料に一元的に適用できる点です。
Marpに最初から用意されているテーマ
Marpには最初から用意されているテーマとして、default、gaia、uncoverがあります。
テーマを適用する場合は、以下のように「theme: XXX」と追加するだけです。
ちなみに、何も設定をしなければ、defaultが適用されます。
---
marp: true
theme: gaia
---
default（何も設定しない場合）
gaia
uncover
Marpで独自CSSを使う方法
3つのテーマでも十分ですが、独自のデザインにしたいときもあります。
CSSを自作し、適用するだけで良いので、デザインの自由度が上がりますし。
自作したCSSを適用するためには、VSCodeの「settings.json」に追記が必要です。
具体的な方法は以下のとおりです。
- VS Codeの「Code -> Preferences -> Settings」、Macの場合は「⌘（Command） + ,（コンマ）」で、設定画面（Settings）を開きます。
- 以下のように検索窓に「markdown.marp.themes」と入力します。
- 「Add Item」ボタンを押し、適用するCSSファイルの場所（今回は「./marp-themes/test.css」）を指定すれば完了です。
Marpで独自CSSが適用されているか確認
作成した自作テーマ「test.css」を適用するために、以下のように「theme: test」と記載します。
---
marp: true
theme: test
---
defaultのテーマをベースに、
- 見出しの部分を緑
- フッターを中央揃え
にしただけですが、以下のようにちゃんと自作テーマ（test.css）が適用されていることがわかります。簡単ですね。
追記
原因はわかりませんが、Marp for VSCodeでいくら設定しても独自CSSが効かない場合があり、その場合の対応方法を記事にしました。
あなたのご質問・ご相談に、月1回、無料・本音で回答します。
ご質問・ご相談は、登録後に届くメールから送っていただけます。費用は一切かかりません。「お悩み相談室」というクローズドな場だからこそ、踏み込んだ内容の質問にも回答できます。
これまでに、こんなご質問・ご相談に回答してきました。
- コンサル(3号業務)を主力業務にするには、どうすれば良いか？
- どのようにして顧問料を上げれば良いか？
- 営業が苦手で、新規の顧客獲得ができない
- 業務をどう絞り込めば良いか？
- 一人社労士のままで良いのか、人を雇うべきか？
- 苦手・相性の悪い顧問先と、どう付き合うか？
- 生成AIの時代、社労士は今後どう生き残るか？
なぜ、無料で同業の社労士からの相談に乗るのか？
それは「本当に顧客のために活動できる社労士仲間を増やしたい」からです。
私自身、社労士という資格に誇りを持っています。企業からの社労士に対する不満をよく聞きますし、「社労士なんて役に立たない」と思われることは、正直悔しいです。
- 信頼される・信頼できる社労士の仲間を増やしていきたい
そんな想いから、少しでも社労士業界全体のレベルアップに貢献できればと考えています。
登録は無料・月1回配信・配信解除いつでも可能
※ 登録後、本人確認のメールをお送りします。届かない場合は迷惑メールフォルダもご確認ください。