Visual Studio CodeとMarkdown記法でWordPress記事の生産性をあげる

IT技術

自分は、WordPressではGutenbergというエディターを使って記事を投稿してます。

Gutenbergは、Markdown記法を使っても記載ができます。Markdownとは軽量マークアップ言語のことです。

軽量マークアップって何?ってことですが、

たとえば、見出しは

## 見出しレベル1
### 見出しレベル2
#### 見出しレベル3

というように記述できます。いちいち、WordPressで段落設定をポチポチしなくて済みますね。

普段から仕事でMarkdownエディターとしてVisual Studio Codeを使っています。

これでBlog記事を書いたら効率的になるのでは?と
実際に実践してみると、ビンゴでした。

Visual Studio CodeでBlogを書けば生産性があがったので、まとめてみました。

対象読者
  • WordPressの記事を効率的に書きたい
  • Visual Studio Codeを使うことに抵抗がない
スポンサーリンク

Visual Studio Codeのインストール方法

公式サイトよりダウンロードし、インストールします。WindowsでもMacでも同様の操作性で軽いです。

日本語化のプラグインは、次のとおりです。

  1. メニューバーから、View -> Command Paletteをクリックする
  2. Configure Display Languageと入力し、Install additional languagesをクリックする
  3. Japanese Language Pack for Visual Studio Codeをインストールする
  4. Visual Studio Codeを再起動

Markdown記法を楽にするオススメプラグイン

次のプラグインを導入するとMarkdown記述をサポートしてくれます。

Markdown All in One

シンタックスハイライトをしてくれます。ショートカットも使えるようになります。

markdownlint

Markdown文法でエラーがあれば問題抽出してくれます。

Text Tables

表作成を支援してくれます。

Prettier – Code formatter

ドキュメントを自動整形してくれます。

テキスト校正くん

おかしい日本語文章を直してくれます。

オススメ記法

見出し

基本の見出しです。

## 見出しレベル1
### 見出しレベル2
#### 見出しレベル3

##から第1レベルとなります。は記事のタイトルで使います。

リスト

箇条書きリスト、数字付きリストです。

- 箇条書きリスト1
  - 箇条書きリスト1.1
    - 箇条書きリスト1.1.1
1. 番号付きリスト
2. 番号付きリスト
3. 番号付きリスト

引用

記事の引用で使います。見栄えがあまり好きではないので下書きのあと修正してます。

> 引用文

引用元(<cite>タグ)を簡単に記述する方法は、調べても見つかりませんでした。

コードブロック

プログラムなどを記述するのに便利です。

```markdown
## 見出し
```

ちなみに、コードブロック内にコードブロックを描く場合は、外側をバックスラッシュ4つにします。

テーブル

表形式も比較検討するのに便利です。

| 項目1つ目 | 項目2つ目 | 項目3つ目 |
| ----- | :---: | ----: |
| 左寄せ   | 中央揃い  | 右寄せ   |

右寄せはうまくいきませんでした。あまり使わないかもしれませんが・・・。

表を書くのはちょっと面倒くさいです。しかし、前述のText Tablesのプラグインを使えば、エクセル感覚でコーディングできます。

記事リンク

ハイパーリンクです。

[リンク](https://www.m-totsu.com/)

この記法ですが、ハイパーリンクしたい文章を選択してURLをコピー・ペーストすると楽です。(Gutenbergでも使えますね)

記事を公開するまでの流れ

  1. Visual Studio Codeにて、Markdown文法で記事を書きファイル保存する。
  1. Gutenbergでペーストしてスタイルを合わせるでペーストする。
  1. スタイルや画像の貼り付けを調整する。
  1. アイキャッチ画像と、カテゴリ、タグをつけて公開する。

まとめ

以上、Visual Studio CodeでWordPress記事の生産性をあげる方法をまとめてみました。

最初に見出しレベルでアウトラインを決めてから、各文章を肉付けすると良い文章が書けそうですね。

仕事で、Markdownの文書はよく書きますが、Blog記事作成はまだまだ初心者です。

読者の皆様の役に立つ記事を1つでも多く残せれば幸いです。

参考ブログ

とつ

某SIer企業勤務。サーバーインフラ系でキャリアを伸ばしつつ、2020年からAWS運用にシフト。
老け顔から、「とっつあん」とあだ名で呼ばれ、それが「とつ」といつしか略されるようになったのがハンドルネームの由来。
「リベラルアーツ大学」をきっかけに、稼ぐ力を養いたいとBlogサイト運営を開始。Blogの成長とともにAWSのスキルアップももくろむ。
家族は妻と長男。3歳の長男がついこの前「しーしこ行くー!」と念願のオムツはずれを達成した!

とつをフォローする
IT技術WordPress
スポンサーリンク
とつをフォローする
とつブログ

コメント

タイトルとURLをコピーしました