≫LINEにてブログ無料相談OKです。

WordPress GutenbergをMarkdown記法でさらに効率化!使いにくいと思っている方に朗報です。

https://24shi-web.com/wp-content/uploads/2018/06/hajime.png
はじめ
  • Gutenbergでの執筆がどうもやりずらい…。
  • 便利なMarkdown記法って何?

本記事は、Wordpress Gutenbergの作業スピードをもっと効率化させたい方のために書いています。

こんにちは!ツヨシ(@24shi_web)です。

WordPress歴は約3年で、ブログ収益のみで生計を立てている専業ブロガーです。

さて、私自身も旧エディターを使っていたため、Gutenbergは使いにくいと感じていました。でも、GutenbergのMarkdown記法を覚えてしまうと旧エディターの何倍も使いやすいし、効率的に記事を書けるということに気づかされました。

やはり、開発者の方は凄いですよ。

ということで、Wordpress Gutenbergが使いにくいと思っている方もこの記事を読めば、Gutenbergの虜になることは間違いないでしょう。

1.Wordpress GutenbergをMarkdown記法でさらに効率化させよう!

WordPress5.0以上から導入された新エディタ「Gutenberg」に変わったことにより、Markdown記法が使えるようになりました。

そして、このMarkdownと言うのがとても便利なんです。

1-1.Markdown記法とは?

Markdown記法を知らない方のために…

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。
本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。

https://ja.wikipedia.org

簡単に言うと、面倒なコードを手軽な記号を入力することでHTMLコードを生成・変換してくれる記法と言った感じです。

そして、このMarkdown記法はGutenbergにアップデートされてから標準搭載されました。※ただし、 Markdownの全てが使えるわけではないです。

なので、Gutenbergで記事を書くのであれば Markdown記法をマスターし、記事執筆の効率化を図りましょう。

1-2.Gutenbergで使えるMarkdown記法一覧

さて、Wordpress Gutenbergで使う事ができるMarkdown一覧は以下の通りです。

ブロックMarkdownHTMLコード
見出しh2## <h2>…</h2>
h3### <h3>…</h3>
h4#### <h4>…</h4>
リスト箇条書き- 又は<ul><li>…</li></ul>
番号振り1. <ol><li>…</li></ol>
引用<blockquote>…</blockquote>
ソースコード```<pre><code></code></pre>
区切り線---<hr>
※スマホ表示の場合、右にスクロールできます。

見出しブロック

#」+「半角スペース」で見出しブロックに変換することができます。

※上記の一覧表で示した通り、見出しによって「#」の数が変わります。

ちなみに、h5(##### )h6(###### )までMarkdown記法で入力可能です。

リスト

リストブロックは、箇条書きと番号振りの両方とも以下のMarkdown記法で変換が可能です。

  • 箇条書きは、「-」又は「*」+「半角スペース」
  • 番号振りは、「1.」+「半角スペース」です。

引用ブロック

>」+「半角スペース」で引用ブロックに変換可能です。

ソースコードブロック

```」のみでソースブロックに変換可能です。

ちなみに、「`」←こちらのバッククォートは「Shift」+「@」で入力できます。

区切り線

---」のみで区切り線に変換可能です。

1-3.それ以外は「 / +ブロック名」で変換可能

それ以外のブロックについては、段落ブロックに「/」+「ブロック名」を入力することで変換可能です。

例えば以下の通りです。

具体例
  1. /画像
  2. /表
  3. /スペーサー

といった感じです。

ちなみに、Gutenbergは特にこの「/」入力がとても便利だと個人的には感じています。

1-4.書式設定のショートカットキー

また文字の書式設定についてのショートカットキーは以前のエディターと同一ですが、こちらも合わせて覚えておくとさらに効率化が可能です。

書式設定のショートカットキー一覧は以下の通りです。

ショートカットキー書式設定
Ctrl(⌘)+B太字
Ctrl(⌘)+I斜体
Ctrl(⌘)+U下線
Ctrl(⌘)+Kリンク追加

ここでは、よく使うショートカットキー「太字」だと思うので、それだけ覚えておけばOKかと。

2.【便利な使い方】ユーザー辞書に見出しのMarkdownを登録

さらにMarkdownをより便利に使う方法をご紹介します。

私はブログ記事を書く時に使用頻度が高い「見出しのMarkdown」をユーザー辞書に登録しているのですがこれがとても便利でおすすめです。

やり方は簡単で以下の通りです。

Markdownの登録方法
  1. ユーザー辞書ツールを開く
  2. 「単語 (macは「変換」)」 部分にMarkdownを登録
  3. 「読み(macは「入力」)」部分はお好みに設定

2-1.ユーザー辞書ツールを開く

まずは、ユーザー辞書の「単語の登録」を開きます。

※ここでは、Windowsを例に解説しています。ちなみにmacの場合、「ユーザー辞書を編集」を選択すればOKです。

2-2.「単語 (macは「変換」)」 部分にMarkdownを登録

そして、「単語」の部分に見出しのMarkdownを入力します。

単語の登録内容
  • ## (h2見出し)
  • ### (h3見出し)
  • #### (h4見出し)

「#」だけでなく、半角スペースを入れた状態で登録します。

2-3.「読み(macは「入力」)」部分はお好みに設定

次に「読み」の部分の登録です。こちらの読みは、呼び出すための文字になるのでお好みのものでOKです。

私の場合は、以下の通りに登録しています。

読みの登録内容
  • 「2」→## (h2見出し)
  • 「3」→### (h3見出し)
  • 「4」→#### (h4見出し)

見出しに適合する数字で登録すると個人的には便利かなと感じています。

例えば、Gutenbergで見出し2を使いたいなら、「2」を入力し、変換するだけで見出し2を適用することができます。

同様に使用頻度の高い箇条書きや番号振りもユーザー辞書に登録することによって、記事執筆を効率化することができますよ。

さらに、WordPress Gutenbergの再利用ブロックの活用方法を覚えれば尚効率は上がりますよ。

再利用ブロックについての解説は以下の記事で解説していますので合わせてどうぞ。

WordPress Gutenbergで「AddQuicktag」を使わずにショートコードを挿入する再利用ブロックの使い方

まとめ

今回は、Wordpress GutenbergでのMarkdown記法についてお話してきました。

Markdown記法と「/(スラッシュ)」でのブロック呼び出しを覚えればGutenberg での作業スピードは格段に上がります。

私は旧エディターの方が使いやすいと最近まで思っていたのですが、今では完全にGutenberg信者ですw

是非、Wordpress GutenbergのMarkdown記法の便利さを実感してみてください。