MarkdownライティングでWordPressの記事作成時間を短縮する

WordPress記事作成にかかる時間を短縮するためには、Markdown記法を活用してキーボード主体の作業にする必要があります。ブロックエディタ、テキストエディタでのMarkdown記法の利用方法を解説します。

記事作成効率化の基本は、キーボード主体の操作

ブログ等の記事作成を効率化するには、キーボードから手を離さないことが大切です。ウェブサイト上の記事は、主に文章と画像と各種修飾(見出しやリンク等も含む)で成り立っていますが、文章はキーボードで、画像や各種修飾はマウスで行っている方が多いかと思います。しかし、そのような状況では、せっかくブラインドタッチに慣れて文章入力が速くなっても、非効率なマウス操作で記事作成自体の速度が制限されてしまいます。この状況を改善するには、マウス操作で対応している画像や各種修飾についても、キーボード操作に置き換える必要があります。

この記事では、WordPressにおいて、基本となるMarkdown記法を紹介します。これらを活用することで、マウス使用頻度が減り、記事作成を効率化できます。

Markdown記法とWordPressとの関係

Markdown記法とは

Markdown(マークダウン)は、テキスト形式で書いた文書からHTMLを生成するために開発されたマークアップ言語です。HTMLタグなしで、簡単な記法でHTMLを生成できます。

より詳しく知りたい方は、下記の書籍がお勧めです。Amazon Kindleまたは楽天Koboで詳細を確認ください。Markdownの生い立ちも含めて深く学べます。

WordPressのMarkdown記法への対応

WordPress(Ver.5.0以降)では、ブロックエディタであるGutenberg上でいくつかのMarkdown記法に対応しました。限定されているものの、Markdownライティングが可能になったのです。

例えば、WordPressのブロックに、## 見出し2と入力すれば、<h2>見出し2</h2>を入力したことになり、見出し2の修飾が可能になります。

WordPressで、見出し2の修飾は、マウス操作で対応する方が多いかと思いますが、## 入力の方が圧倒的に速いです。このように、Markdownライティングを活用することでマウス操作を減らせます。

WordPressブロックエディタで有用なMarkdown記法

以下、知恵郎が重要と思っている順に、WordPressのブロックエディタで利用可能なMarkdown記法を紹介します。なお、Markdown記法で用いられる記号は、半角入力が前提です。

見出し

ブロックの先頭に、見出しの階層と同じ数の#(番号記号)を入力してSpace(半角スペース)を入れれば自動で見出しブロックに 変換されます。Markdown記法化は、見出し文字入力の先でも後でもどちらでも問題ありません。

ブロック入力ブロックへの変換
## H2(見出し2)ブロック
### H3(見出し3)ブロック
#### H4(見出し4)ブロック
##### H5(見出し5)ブロック
####### H6(見出し6)ブロック

段落と改行

Enterで段落追加、Shift+Enterで改行です。あまり意識されないかもしれませんが、段落<p></p>と改行</br>は異なるものです。なお、改行はリストにも適用されます。

ブロック入力ブロックへの変換
Enter新しい段落追加
Shift + Enter改行

ブロックエディタでの反映例

段落1

段落2
段落2の改行

リスト、番号付きリスト

ブロックの先頭に、*(アスタリスク)または、(ハイフン)を入力してSpace(半角スペース)を入れればリストブロック化されます。また、1.を入力して、Space(半角スペース)を入れれば番号付きリスト化されます。子リスト関係の入力もできます。なお、先に説明した改行もリストに適用できます。

ブロック入力ブロックへの変換
またはリストブロック
1. 番号付きリストブロック
リスト内で
Enter
同階層のリスト追加
親リスト内で
Enter + Space
子リスト追加
子リスト内で
Enter + Backspace
親リストに戻る

ブロックエディタでの反映例

  • リスト1
    リスト1の改行
  • リスト2
    • リスト2の子リスト
  1. 番号付きリスト1
  2. 番号付きリスト2

引用

ブロックの先頭に、>(グレーターザン)を入力してSpace(半角スペース)を入れれば引用ブロック化されます。

ブロック入力ブロックへの変換
引用ブロック

ブロックエディタでの反映例

引用ブロック

引用元

インラインソースコード、ソースコード

コードを`(バッククオート)で挟み込むと、コード文字列がインラインソースコードになります。

また、ブロックの先頭に、`(バッククオート)を3回入力してEnterでソースコードブロック化されます。

ブロック入力変換
`inline code`インラインソースコード
``` + Enterソースコードブロック

ブロックエディタでの反映例

inline code

ソースコード

水平線

ブロックの先頭に、(ハイフン)を3回入力してEnterで水平線ブロックが挿入されます。

ブロック入力ブロックへの変換
--- + Enter水平線ブロック

ブロックエディタでの反映


Mardown記法で記事アイディアをメモ

Markdown記法の本領はテキストエディタで発揮されます。特に、オフライン環境などのWordPressに接続できない状況で、テキストエディタでアイディアをメモしておくときに便利です。ブロックエディタではないので、Markdown記法をフル活用できます。

そして、テキストエディタで作成したテキスト全てをコピーして、WordPressのブロックエディタにペーストすれば、うまくブロックが形成されます。

ここでは、そのようなテキストエディタベースで利用可能なMarkdown記法を紹介します。

見出し

ブロックエディタの時と変わりありません。利用しないと思いますが、見出し1の利用も可能になっています。

テキスト入力ブロックへの変換
H1(見出し1)ブロック
## H2(見出し2)ブロック
### H3(見出し3)ブロック
#### H4(見出し4)ブロック
##### H5(見出し5)ブロック
####### H6(見出し6)ブロック

段落と改行

テキストで空行を挿入すること(ただの改行2回)で、ブロックでは段落分けされます。また、テキストでの改行はそのままブロック内の改行になります。

テキスト入力ブロックへの変換
1行間新しい段落追加
改行改行

テキストエディタでコピーするテキスト例

文字列
空行後の文字列
改行後の文字列

ブロックエディタでの反映

文字列

空行後の文字列
改行後の文字列

リスト、番号付きリスト

*(アスタリスク)または、(ハイフン)を入力してSpace(半角スペース)を入れることでリストに変換されるところまではブロックエディタと同じですが、2つ目以降のリストについてもそれらの記号が必要です。また、番号付きリストについては、その番号を変えて入力する必要があります。

なお、子リスト化するには、Tabを用いてインデントします。2回インデントすれば、孫リストになります。

テキスト入力ブロックへの変換
* リスト1
* リスト2
または
- リスト1
- リスト2
リストブロック
1. リスト1
2. リスト2
番号付きリストブロック
リスト改行後に
Tabインデントを追加してリスト記法
子リスト

テキストエディタでコピーするテキスト例

* リスト1
* リスト2
	* リスト2の子リスト
		* リスト2の孫リスト
		リスト2の孫リストの改行
1. 番号付きリスト1
1. 番号付きリスト2

ブロックエディタでの反映

  • リスト1
  • リスト2
    • リスト2の子リスト
      • リスト2の孫リスト
        リスト2の孫リストの改行
  1. 番号付きリスト1
  2. 番号付きリスト2

引用

>(グレーターザン)を入力してSpace(半角スペース)を入れれば引用ブロック化されます。改行しても引用が続きます。空行で引用が終わります。

ブロック入力ブロックへの変換
引用ブロック

テキストエディタでコピーするテキスト例

> 引用行1
引用行2
段落1

ブロックエディタでの反映

引用行1
引用行2

段落1

インラインソースコード、ソースコード

文字を`(バッククォート)で挟み込めば、インラインコード化します。挟む記号が3つになれば、複数行にも対応したコード化されます。

テキスト入力変換
`inline code`インラインソースコード
```コード```ソースコードブロック(複数行にも対応)

テキストエディタでコピーするテキスト例

これが`インラインコード`です。

ブロックエディタでの反映

これがインラインコードです。

テキストエディタでコピーするテキスト例

```
コード1
コード2
コード3
```

ブロックエディタでの反映

コード1
コード2
コード3

水平線

(ハイフン)または*(アスタリスク)または_アンダーバーを3個以上並べれば水平線ブロックが挿入されます。

ブロック入力ブロックへの変換
---
または
***
または
___
水平線ブロック

テキストエディタでコピーするテキスト例

-------

ブロックエディタでの反映


リンク

[](大括弧)内にリンク文字を書き、続けて()(小括弧)内にリンク先URLを書きます。

テキスト入力変換
[リンク文字](リンク先URL)リンク

テキストエディタでコピーするテキスト例

このブログは、[知恵郎.com](https://chierou.com)です。

ブロックエディタでの反映

このブログは、知恵郎.comです。

強調、太字

文字を*(アスタリスク)または_(アンダーバー)で挟み込めば、文字が強調されます。挟む記号が2つになれば、太字になります。

テキスト入力変換
*文字*または_文字_強調
**文字**または__文字__太字

テキストエディタでコピーするテキスト例

*強調*です。**太字**です。

ブロックエディタでの反映

強調です。太字です。

画像

画像のURLが分かっている前提なので、あまり使わないと思います。

テキスト入力ブロックへの変換
![alt文字列](画像URL)画像ブロック

テキストエディタでコピーするテキスト例

![知恵郎profile画像](https://chierou.com/wp-content/uploads/images/system_image/profile.jpg)

ブロックエディタでの反映

知恵郎profile画像

表も可能です。説明が難しいので、例で確認ください。

テキストエディタでコピーするテキスト例

| タイトル1 | タイトル2        | タイトル3 |
|----------|------------------|----------|
| 要素1    | 要素2<br>要素2改行| 要素3    |
| 要素4    | 要素5            | 要素6     |

ブロックエディタでの反映

タイトル1タイトル2タイトル3
要素1要素2
要素2改行
要素3
要素4要素5要素6

WordPressの記事作成にMarkdownライティングを活用しよう

WordPressでブログを作成される方は、記事作成にかける時間をできるだけ短くしましょう。基本は、キーボードから手を離さないことです。その時の助けとなるのが、ここで紹介したMarkdown記法です。

ブロックエディタでは、使える記法が少ないですが、見出しやリストの記法は必ず覚えておきたいですね。

また、Markdownライティングの本領は、オフライン時にテキストエディタでメモ書きするときに発揮されます。テキストエディタで記事原稿をMarkdown記法で書いておき、全コピーしてWordPressにペーストすれば、ほぼ完成した投稿記事が出来上がります。

なお、Markdown記法と合わせてキーボードショートカットも覚えておけば鬼に金棒です。詳しくは以下を確認ください。

ショートカットキーを駆使してWordPress記事作成時間を短縮する
WordPress記事作成にかかる時間を短縮するためには、ショートカットキーの活用が欠かせません。マウス操作をできるだけ減らして、作業時間を短縮しましょう。

他にもブログ運営に役立つ記事を書いています。興味のある方は下記からどうぞ。

ブログ構築・運営で抑えておくべきポイントまとめ
アフィリエイトサイトにはなかなか書いていない、主に初心者が心得ておくべきブログ構築・運営のポイントを紹介します。

コメント