ブログ執筆環境を整える(WordPress, VSCode, マークダウン, PasteImage)

全記事を読みたい場合はこちら → ブログ執筆環境改善プロジェクト

僕は文章を書くのはたぶん好きですが、
記事を書く以外が色々面倒くさくて嫌になります。
今回はブログの執筆環境を整えていくことにします。

背景と目的

僕はWordPressを使ってブログを公開しています。
元々、直接WordPressの標準の投稿機能に書き込んでUPしていました。
しかし以下が僕のやる気を削ぎます。

  • ブログ書いている最中に落ちると絶望する問題
  • WordPressのビジュアルエディタが使いづらい問題
  • コードエディタでHTMLを打ち込むのが面倒くさい問題
  • プレビューをみるのにひと手間いる問題

WordPressに直接記事を書くのはやめて、
一度ローカル環境で記事を書いてそれをWordPressに投稿するようにしました。
いくつかエディタを試したんですけどね。一番VSCodeがしっくりきました。

ご説明していきます。

解決策

VSCodeを使用してマークダウンで記事を書く

VSCodeを使う嬉しさについて

  • ブログ書いている最中に落ちてもデータが残っている
  • 基本キーボード操作のみで完結する(マウスがほぼ不要)
  • マークダウンで書くとリアルタイムにプレビューを見る事ができる
  • マークダウンで書くとHTMLタグより簡単
  • 記事中に埋め込む画像の貼り付けが楽
  • ワークスペースが便利

では手順についてご説明します。

大まかな手順

  • VSCodeのインストール
  • VSCode拡張機能vscode-iconsのインストール
  • VSCodeワークスペースの設定
  • 記事をマークダウンで書く(VSCode側)
  • VSCode拡張機能PasteImageのインストールと設定
  • 記事をマークダウンで書く(WordPress側)

詳細手順

VSCodeのインストール + VSCode拡張機能vscode-iconsのインストール

インストールおよびブログに必要な拡張機能のインストールは簡単です。
こちらを参考にしてください。

VSCodeの使い方-インストールと日本語化編-

1点注意点です。
ファイル操作やフォルダ操作をVSCode上で使用とすると
以下のメッセージが画面右下に出て困りました。

"'ファイル コピー' 参加者を実行しています...",
"'ファイルの作成' の参加者を実行しています...",
"'ファイルの削除' の参加者を実行しています...",
"'ファイル名の変更' の参加者を実行しています...",

vscode-iconsを一度削除してVSCodeの再起動で治りました。
もう一度vscode-iconsを入れなおしたのですが再発しなくなりました。

VSCodeワークスペースの設定

僕はフォルダ構成とかちゃんとできない子です。
いつも作業フォルダがぐちゃぐちゃ。

最近こんな感じで安定しているのでご説明します。

実際の階層はこんな感じです。
過去を振り返る用(年単位)と当月用をワークスペースに登録しています。

ワークスペースの基本的な使い方は以下をご参照ください。

VSCodeの使い方-ワークスペース編-

記事をマークダウンで書く(VSCode側)

嬉しさ

記事はマークダウンで書くのがおススメです。
嬉しさは以下の通り。

  • HTMLタグが簡略化されている。特に見出しが楽。
  • 通常のテキストエディタとは異なり表も書ける。
  • 通常のテキストエディタとは異なり画像を差し込める。
  • リアルタイムにプレビューが見れる

マークダウンで書く方法

マークダウンで書くのは簡単です。
.mdの拡張子でファイルを作成するだけです。

プレビューを見る方法

プレビューも同時に見たいので
Ctrl + K + Vでプレビューを表示します。

エクセルの表を楽に貼り付ける方法

マークダウンで書けるとは言え若干表を打ち込むのは面倒。
そんな時は、VSCodeの拡張機能 Markdown Extendedをインストールする。

右クリック → Paste as TableでExcelでコピーした表を貼り付けられます。

画像を楽に貼る方法

VSCode拡張機能Paste Imageを使用します。
Ctrl + Alt + Vで画像を貼り付けられます。
何気にテキストエディタに画像を貼り付ける感覚は革命でした。

インストール方法および使い方はこちらを参考にしてください。

マークダウンで画像のコピペ – VSCode + Paste Image

記事をマークダウンで書く(WordPress側)

僕はプラグインのWP Githuber MDを使用しています。
ビジュアルエディタやコードエディタだとマークダウンを受け付けません。
最近WordPressにもマークダウンでの入力が登場したのですが
ビジュアルエディタをベースにしているのでイマイチでした。

以下、プラグインWP Githuber MD使用中のイメージ。

ブログ執筆環境を整える(WordPress, VSCode, マークダウン, PasteImage)

おわり


VSCodeの使い方はこの辺にまとめています。
よろしければどうぞ。→ Visual Studio Code

コメントする

メールアドレスが公開されることはありません。