14
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Markdownにペーストした画像サイズを簡単に変更できるようにする

Last updated at Posted at 2020-10-25

やりたいこと

Markdownで資料作成をするとき、Pasteした画像サイズを簡単に修正できるようにしたい!
そんなときの設定方法です

(4Kディスプレイで画像キャプチャーするとムダに画像が大きくなるとかあるよね?)

使用イメージ👇
ajust_image_size.gif

使用ツール

設定方法

Markdownのimgタグはサイズ指定に対応していません
そのため画像サイズを変更する場合は、下記のようにHTMLで指定する必要があります

Markdown
![***代替テキスト***](***画像URL***)

HTML
<img src="***画像URL***" width="***サイズ***">

そこで**Paste ImageのInsert Patternを下記のようにHTML記法に変更します**

  • ユーザー設定 ⇒ 設定 ⇒ 拡張機能 ⇒ Paste Image Configuration ⇒ Paste Image: Insert Pattern

image.png

setting.json抜粋
"pasteImage.insertPattern": "<img src='${imageFileName}' width='100%'>"

デフォルトでwidth=100%が付与されるので、必要に応じて調整します
Preview画面での確認以外に、VSCodeのウィンドウ右下に表示されるサイズを確認し調整してもよいと思います

これでMarkdownへの画像ペーストが捗ります♪

14
11
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?