全記事を読みたい場合はこちら → ブログ執筆環境改善プロジェクト
僕は文章を書くのはたぶん好きですが、
記事を書く以外が色々面倒くさくて嫌になります。
今回はブログの執筆環境を整えていくことにします。
背景と目的
僕はWordPressを使ってブログを公開しています。
元々、直接WordPressの標準の投稿機能に書き込んでUPしていました。
しかし以下が僕のやる気を削ぎます。
- ブログ書いている最中に落ちると絶望する問題
- WordPressのビジュアルエディタが使いづらい問題
- コードエディタでHTMLを打ち込むのが面倒くさい問題
- プレビューをみるのにひと手間いる問題
WordPressに直接記事を書くのはやめて、
一度ローカル環境で記事を書いてそれをWordPressに投稿するようにしました。
いくつかエディタを試したんですけどね。一番VSCodeがしっくりきました。
ご説明していきます。
解決策
VSCodeを使用してマークダウンで記事を書く
VSCodeを使う嬉しさについて
- ブログ書いている最中に落ちてもデータが残っている
- 基本キーボード操作のみで完結する（マウスがほぼ不要）
- マークダウンで書くとリアルタイムにプレビューを見る事ができる
- マークダウンで書くとHTMLタグより簡単
- 記事中に埋め込む画像の貼り付けが楽
- ワークスペースが便利
では手順についてご説明します。
大まかな手順
- VSCodeのインストール
- VSCode拡張機能vscode-iconsのインストール
- VSCodeワークスペースの設定
- 記事をマークダウンで書く(VSCode側)
- VSCode拡張機能PasteImageのインストールと設定
- 記事をマークダウンで書く(WordPress側)
詳細手順
VSCodeのインストール + VSCode拡張機能vscode-iconsのインストール
インストールおよびブログに必要な拡張機能のインストールは簡単です。
こちらを参考にしてください。
1点注意点です。
ファイル操作やフォルダ操作をVSCode上で使用とすると
以下のメッセージが画面右下に出て困りました。
"’ファイル コピー’ 参加者を実行しています…",
"’ファイルの作成’ の参加者を実行しています…",
"’ファイルの削除’ の参加者を実行しています…",
"’ファイル名の変更’ の参加者を実行しています…",
vscode-iconsを一度削除してVSCodeの再起動で治りました。
もう一度vscode-iconsを入れなおしたのですが再発しなくなりました。
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
コメントを残す