はじめに
コードは勢いで書けるけど、デザイン・プロモーション画像は面倒な方（私です）
マークダウンのスライド作成ツール「vscode-reveal」を使ってみませんか？
一貫性のあるデザインで、画像を作成できます。
今回は、過去に公開したChrome拡張機能のストアページを更新していきます。
◇ Before After
| Before | After |
|---|---|
 |
 |
 |
 |
◆ ツール「vscode-reveal」について
導入方法・基本操作：これからのプレゼン資料は reveal.js を使おう
使用例：The HTML presentation framework | reveal.js
実践的な手法：マークダウンで簡単スライド作成【vscode-reveal】
ストア画像作成
- vscode-revealで画像を作成する ← 記事で触れる内容
- スクリーンショットを撮る
◇ テーマ選び
今回はbeigeを使用します。
---
theme: 'beige'
---
◆ アプリのスクリーンショット（アプリ説明）
今回のアプリは画面に相当するものがないので、使用方法をスクリーンショットとします。
今回作成したのは以下の画像です。
| 英語 | 日本語 |
|---|---|
 |
 |
<style type="text/css">
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
text-transform: none;
}
li {
list-style: none;
}
</style>
<!-- 使い方 -->
### Add Keyboard Shortcuts
- **Alt + →**: Switch to the next tab
- **Alt + ←**: Switch to the previous window
- **Alt + ↓**: Move the current tab to a new window
- **Alt + ↑**: Move the current tab to another window
**For Mac users**: Use **Option** instead of **Alt**.
---
### キーボードショートカット
- **Alt + →**: タブのフォーカスを切り替えます
- **Alt + ←**: ウィンドウのフォーカスを切り替えます
- **Alt + ↓**: タブを新しいウィンドウに移動します
- **Alt + ↑**: タブを別ウィンドウに移動します
**Mac ユーザー**: **Option** が **Alt** を代替します
◇ プロモーションタイル（小）
プロモーションタイル（小）は、検索結果などリスト表示時に使用します。
今回作成したのは以下の画像です。
---
<!-- プロモーション タイル 小 -->
Window Switcher
◆ マーキープロモーションタイル
マーキープロモーションタイルは、ストアトップページ紹介に選ばれた際使用されます。
使用されることはないとは思いますが、作成してみました。
＜マーキープロモーションタイルについて＞
今回作成したのは以下の画像です。
---
<!-- マーキー プロモーション タイル -->
##  Window Switcher {style="display: flex; align-items: center; gap: 40px"}
display: flex：横並び
align-items: center：縦の中央寄せ
gap: 40px：画像ー文字間
コード全体はこちら
折りたたみ
---
theme: 'beige'
---
<style type="text/css">
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
text-transform: none;
}
li {
list-style: none;
}
</style>
<!-- 使い方 -->
### Add Keyboard Shortcuts
- **Alt + →**: Switch to the next tab
- **Alt + ←**: Switch to the previous window
- **Alt + ↓**: Move the current tab to a new window
- **Alt + ↑**: Move the current tab to another window
**For Mac users**: Use **Option** instead of **Alt**.
---
### キーボードショートカット
- **Alt + →**: タブのフォーカスを切り替えます
- **Alt + ←**: ウィンドウのフォーカスを切り替えます
- **Alt + ↓**: タブを新しいウィンドウに移動します
- **Alt + ↑**: タブを別ウィンドウに移動します
**Mac ユーザー**: **Option** が **Alt** を代替します
---
<!-- プロモーション タイル 小 -->
Window Switcher
---
<!-- マーキー プロモーション タイル -->
##  Window Switcher {style="display: flex; justify-content: center; align-items: center; gap: 40px"}
完成！
以上、簡素ではありますが、vscode-revealを使ったストア画像作成方法でした。
Chrome拡張機能もご覧いただけると嬉しいです。
◇ ストアページはこちら