Marpで企業ロゴが入ったスライドを作成する
Marpで企業ロゴが入ったスライドを作成する方法を解説します。gaiaテーマとCSSの::after疑似要素を活用してヘッダーの右上にロゴを配置する実装を紹介します。
目次
ベースレイアウト
gaia テーマと yKicchan 様が作成した marp テンプレートリポジトリを使用しています。
marp-core/themes/gaia.scss at main · marp-team/marp-core
The core of Marp converter. Contribute to marp-team/marp-core development by creating an account on GitHub.
GitHub - yKicchan/awesome-marp-template: An ultimate Marp template for your awesome presentation!
An ultimate Marp template for your awesome presentation! - yKicchan/awesome-marp-template
企業ロゴの配置方法
企業ロゴをヘッダーの右上に配置するには、::after 疑似要素を活用した CSS を使用します。
実装
/* ヘッダーの右上に企業ロゴを配置 */
header::after {
content: "";
display: block;
position: absolute;
right: 25px;
top: 10px;
width: 50px;
height: 50px;
background: url("./images/icon.png") no-repeat center;
background-size: contain;
}実装イメージ
ヘッダーに文字列あり
ヘッダーを' 'にすることでロゴだけ表示できます
各要素の解説
この CSS では、header::after 疑似要素を使用して、企業ロゴを ヘッダーの右上 に適切に配置しています。
1. header::after の役割
header::after {
content: "";
display: block;
}::after疑似要素を利用し、header内に追加の要素を作成。content: "";で要素を有効化。display: block;を指定し、widthやheightを適用可能にする。
2. position: absolute; でロゴの位置を固定
position: absolute;absoluteにすることで、header内の特定の位置にロゴを配置可能。
3. ロゴを右上に配置
right: 25px;
top: 10px;
width: 50px;
height: 50px;4. background プロパティでロゴ画像を設定
background: url("./images/icon.png") no-repeat center;
background-size: contain;backgroundでロゴを適用し、中央に配置。no-repeatで繰り返しを防ぐ。background-size: contain;で適切なサイズ調整。
スライドごとの画像設定方法
index.md と同じ階層の ./images 配下に icon.png を格納します。
./hoge 配下のスライドではアイコン B、demo 配下のスライドではアイコン A ヘッダー部の画像で表示できます。
.
├── src
│ ├── demo
│ │ ├── images
│ │ │ └── icon.png ← アイコンA
│ │ └── index.md
│ ├── hoge
│ │ ├── images
│ │ │ └── icon.png ← アイコンB
│ │ └── index.md
│ └── template
│ └── images
└── themes
├── global.css
├── index.css
└── utility.cssおわりに
この実装により、Marp のスライドで統一感のあるデザインを維持しつつ、ヘッダーにロゴを固定配置できます。
| プロパティ | 役割 |
|---|---|
header::after |
疑似要素としてロゴ用のコンテナを作成 |
position: absolute; |
header 内で右上に固定配置 |
right: 25px; top: 10px; |
ヘッダーの padding に合わせて調整 |
width: 50px; height: 50px; |
ロゴの大きさを固定 |
background: url("./images/icon.png") no-repeat center; |
ロゴ画像を適用 |
background-size: contain; |
ロゴの縦横比を維持しながらフィット |