山内セミナーⅠ(2021/05/26)

関連サイトと資料

Marpのサンプルファイル(2)

./marp-themes/test.css
/* @theme test */
  
@import 'default';
  
section {
    font-family: "Arial", "Hiragino Maru Gothic ProN";
    font-size: 32px;
    padding: 40px;
}
  
section.title h1 {
    color: white;
    font-family: "Arial", "Hiragino Kaku Gothic ProN";
    font-size: 60px;
    text-align: center;
}
  
section.title {
    color: white;
    font-family: "Arial", "Hiragino Maru Gothic ProN";
    font-size: 36px;
    text-align: center;
    padding: 40px;
}
  
section.slides h1 {
    background: linear-gradient( to left,  rgba(69,179,224,1) 25%, rgb(97, 109, 218) 75% );
    -webkit-background-clip: text;
    color: transparent;
    font-family: "Arial", "Hiragino Kaku Gothic ProN";
    font-size: 42px;
    position: absolute;
    left: 50px; top: 50px;
}
  
section.slides h2 {
    font-size: 32px;
    color: #4ac;
    position: absolute;
    left: 50px; top: 90px;
}
    

styles-test.md
---
marp: true
theme: test
---
<!--
class: title
-->
  
![bg brightness:0.6](photo-1592961170215-dbb7b3e5ba04.jpg)
  
# Custome Themeを適用する
  
タイトルと、本体スライドのデザインは、classを分けました
  
---
<!--
class: slides
_footer: 'Photo by Michal Vasko on Unsplash'
paginate: true
-->
  
![bg left:40%](photo-1591756985756-6e231184528b.jpg)
  
# グラデーションのタイトル文
## 直下に各スライドのリード文をh2 `##` で入れる。
  
本文の表示位置は変えていません。
  
- 箇条書きなどは
- このとおり
  
---
<!--
_backgroundColor: white
_footer: 'Photo by Chris Campbell, Dan on Unsplash'
-->
  
   
![bg right:60% contrast:1.5 brightness:1.2](christopher-campbell-rDEOVtE7vOs-unsplash.jpg)
![bg 350% contrast:1.2 brightness:1](photo-1542103749-8ef59b94f47e.jpg)
  
# 進め、新しいわたし。
## 同様に、h1 `#` でタイトル、</br> h2 `##` でリード文。
   
自分のテーマが徐々に仕上がってきました。ここからは、皆さんのアレンジ次第!