Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Marpでロゴ挿入
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
KIYO
May 16, 2025
0
1.6k
Marpでロゴ挿入
Note用記事として、Marpを使用してロゴを挿入
KIYO
May 16, 2025
Tweet
Share
More Decks by KIYO
See All by KIYO
251109_GASでのスライド(Note記事用)
kiyo_speakerdeck
0
130
まじんv3×note記事
kiyo_speakerdeck
0
130
Slidevのデフォルトslides.md
kiyo_speakerdeck
0
190
note記事:Markdownのスライド作成:Slidev その1
kiyo_speakerdeck
0
180
Pythonでやってみた19-README.md
kiyo_speakerdeck
0
530
Marpでロゴ挿入2
kiyo_speakerdeck
0
1.5k
テスト@2025年5月10日
kiyo_speakerdeck
0
17
250511_note_test(marp)
kiyo_speakerdeck
0
2.6k
Featured
See All Featured
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
330
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.2k
Building a A Zero-Code AI SEO Workflow
portentint
PRO
0
310
Tell your own story through comics
letsgokoyo
1
810
Fireside Chat
paigeccino
41
3.8k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
240
Fashionably flexible responsive web design (full day workshop)
malarkey
408
66k
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
180
The Cost Of JavaScript in 2023
addyosmani
55
9.5k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2k
Code Review Best Practice
trishagee
74
20k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Transcript
Marp スライドのロゴ表示 ロゴ配置方法 ヘッダー右上にロゴを配置するには、 ::after 疑似要素とCSS を利用 します。
実装コードとイメージ 実装イメージ: ヘッダーにロゴが表示されます。 (通常、ヘッダーにテキストがある場合はそれと共に表示されます) /* ヘッダー右上にロゴを配置 */ header::after { content:
""; display: block; position: absolute; right: 25px; top: 10px; width: 250px; height: 80px; background: url("https://raw.githubusercontent.com/marp-team/marp/master/marp.png") no-repeat center; background-size: contain; }
CSS 解説とまとめ header::after : ロゴ表示用のコンテナを生成。 position: absolute; right: 25px; top:
10px; : 右上に配置。 width: 250px; height: 80px; : ロゴサイズを指定。 background : ロゴ画像を指定し、表示方法を調整。 url(...) : 画像パス(今回はMarp チームのロゴURL ) 。 no-repeat center : 画像を中央に1 つだけ表示。 background-size: contain; : アスペクト比を保ちつつフィット。