こんにちわ！Web 系フリーランスの泉原遥輝です。今回はWordPressの記事をvscodeの便利なプラグインを使って効率良く記事を書く方法を紹介したいと思います！

WordPressの投稿画面はクラシックエディタもブロックエディタも使いにくいです。普段はvscodeでコーディンをしているので、vscodeでマークダウンを使って記事を書きたいと思ったのが動機です。

その際に便利なプラグインを見つけたので、そちらを紹介したいと思います。

どんな人におすすめ？

• 日常でvscodeを使っていて、vscode に慣れている方
• マークダウンでブログを書きたい方
• WordPress の投稿画面に使いにくさを感じている方
• 効率良くブログを書きたい方！

設定なども、簡単なので導入してブログ運営に役立てると思います！それでは解説していきたいと思います。

vscodeにプラグインをインストールして、設定する

インストールするプラグインはPaste Imageです。このプラグインを使って、クリップボードに保存したスクリーンショットをコピペで貼り付けて、保存出来るようにするプラグインです。

このプラグインはブログを執筆する中で非常に強力です。設定を変更してファイル名を変更できるようにも出来るので、そちらの設定も行います。

Paste Imageをインストールする

vscodeを開いて拡張タブを開く

Paste Imageで検索し、インストール

Extension Settingsを開く

検索窓にsettingと入力して、Edit in settings.jsonをクリック

vscodeの設定ファイルを開くので、以下のコードを追加する

{
  // ペーストするパスを設定
  "pasteImage.path": "${currentFileDir}/img",
  // ペースト時にファイル名を変更する
  "pasteImage.showFilePathConfirmInputBox":true,
  "pasteImage.filePathConfirmInputBoxMode": "onlyName",
}

コードを追記したら、settings.jsonを閉じる

Paste Imageを使用する

markdownファイルを作成する

test.mdを作成する

.mdとすることで、マークダウンファイルを作成出来ます。

スクリーンショットをクリップボードに保存する

mac

• 全画面: cmd + shift + control + 3
• 一部を選択: cmd + shift + control + 4

win

• 全画面: Windowキーを押しながら、PrintScreen
• 一部分を選択:Windowsキー+shift+s

.mdファイルに貼り付ける

• mac: cmd + option + v
• win: win + alt + v

ファイルの保存名を聞かれるので、任意の名前を付けて保存

画像がimgフォルダーに中に保存される、かつ、markdownファイルに画像が挿入されます

便利すぎじゃないですか？！

ちなみにMacではクリップボードに保存された画像はjpg形式に出来ません。なので、jpg形式にしたい方はfinderなどを使って、一括でpngからjpgに変換して下さい。

快適ブログ環境を構築しましょう！