言葉の使い方を中心にブログ運営・フリーランスに関することなど、ライティングの仕事に関わる情報を広く紹介するブログです。

Kotoログ

アプリケーションソフト

「Visual Studio Code」で書いたマークダウンの文章をWordPressに投稿するまでの流れ

投稿日:2018年10月29日 更新日:

<この記事を読むのに必要な時間は約 6 分です>

私は使い方を覚えるのが面倒で今まで使ったことがありませんでしたが、マークダウン記法を使ってブログの下書きをしているという人も多いのではないでしょうか。

「Visual Studio Code」というテキストエディタを使い始めたことをきっかけに、オフライン環境でも記事を効率的に作成できるようにマークダウン記法を覚えることにしました。

マークダウン記法を使えるようになると、HTMLのタグを入力しなくても簡単に体裁の整った文章を作成することができます。

そこで、ここでは「Visual Studio Code」を使ってマークダウン記法で文章を作成する方法をまとめたいと思います。

 

「Visual Studio Code」で書いたマークダウンの文章をブログに投稿する流れ

それでは、以下に「Visual Studio Code」でマークダウンのテキストをプレビュー表示する方法を説明します。

 

「Visual Studio Code」を使ってマークダウンの文章を作成する方法

では次に、「Visual Studio Code」を使ってマークダウンの文章を作成する方法を説明します。

マークダウン記法についての詳細な説明はここでは省略します。

まずは「Visual Studio Code」を起動してマークダウンファイル(拡張子が「.md」のファイル)を開きます。

そしてそのエディタにカーソルを置くと、ファイル名が書かれたタブの右側に以下の「プレビューを横に表示(Ctrl+K V)」というアイコンが表示されているので、アイコンをクリックします。

アイコンをクリックすると、以下のようにエディタの右側にプレビューが表示されます。

このプレビューはエディタを編集すると、リアルタイムで更新されていくので、内容がどのように表示されるかを確認しながら文章を作成することが可能です。

ちなみに「Visual Studio Code」の拡張機能を使うと、マークダウンで記載した内容をHTMLに変換して出力することもできます。

「Visual Studio Code」の導入方法はこちらの記事を参照ください

「Visual Studio Code」のインストールと日本語表示に設定する方法

<この記事を読むのに必要な時間は約 7 分です> 文章の作成やコーディングの練習などに使いやすいテキストエディタを探していて、高機能で使い勝手が良いと評判の「Visual Studio Code」をイ ...

続きを見る

 

マークダウン記法で書いた文章をWordPressに投稿する

上記のように、「Visual Studio Code」を使うと、リアルタイムでプレビューを表示しながら文章を書くことが可能です。

そして、マークダウンで記載した下書きの文章をWordPressの投稿画面(テキストエディタ)にコピーペーストして、一部の体裁を手直しすればそのまま記事を投稿することができます。

WordPressでは、標準の状態ではマークダウン記法に対応していませんが、Jetpackなどのプラグインをインストールして有効化するとマークダウン記法で記事を投稿することが可能です。

なお、Jetpackを使っている場合には、「設定」画面の「執筆」タブにある「プレーンテキストのMarkdown構文で投稿やページに書き込み」を有効にすると、マークダウン記法で記事を作成することができます。

「Visual Studio Code」から文章をコピーペーストする場合には、先にJetpackのようなマークダウンに対応したプラグインをインストールしておくとスムーズです。

メモ

ちなみに、最近のバージョンであれば、WordPress標準の機能でも、投稿の作成時に以下のような記号をショートカットとして使用できるようになっています。

  • 見出し(「##」で見出し2以下見出し6まで)⇒「h2~h6」
  • 引用「>」⇒「blockquote」
  • 水平線「---」⇒「hr」

投稿画面のビジュアルエディタで上記の記号を入力してEnterを押下すると、HTMLに変換され、簡単に見出しや引用を入れることが可能です。

 

まとめ

以上、「Visual Studio Code」を使ってマークダウン記法で記事を書き、WordPressに投稿するまでの流れを説明しました。

「Visual Studio Code」は標準でマークダウンのプレビューをリアルタイムで表示する機能があるため、記載した文章がどのように表示されるかを確認しながら文章を書くことができます。

そして、WordPressにマークダウンのプラグインに対応したプラグインがインストールされていれば、文章をコピーペーストして一部体裁を整えるだけで投稿することが可能です。

オフライン環境でも効率よくブログを書きたいという場合にはぜひ試してみてください。

-アプリケーションソフト

Copyright© Kotoログ , 2019 All Rights Reserved.