おはようございます、としあきです。

今回はGutenbergエディタでどうすればいいかをまとめました。

Markdown記述方法

Gutenbergの場合、最初からMarkdown記述をサポートしています。

特に準備は要らず、とても簡単に利用できます。

別のエディタ(Notionなど)で記載しておいて、コピー貼り付けでそのままMarkdownとして貼り付けできるのでとても便利です。

見出しは1段階から5段階まで対応

Markdownでは行頭に’#’をつけて文章を書くことで見出しにできます。

WordPressではページのタイトルがH1,ページ内の章以下はH2で表現しています。

H2は##2個と覚えるとわかりやすいです。

ただし、見出し1はページタイトルに使われるH1に変換されるので、SEO的に使うべきではありません。

見出し2

見出し3

見出し4

見出し5

コード表記

Markdownではプログラミング内容を記述したい時に以下のように入力します。

コード部分をバッククォート(`)3文字で挟みます。

開始行で言語名を追加で入力します。

 ```javascript import React from 'react';
```

コード表記には対応していますが、言語指定は非対応です。

コピー貼り付けすると言語指定は表示されなくなります。コードブロックとして挿入されます。

この状態から[Highlighting Code Block]に変換可能です。

そこで言語選択すれば、言語別にハイライト表示することができます。

引用

引用も簡単に入力できます。引用ブロックに変換されます。Markdownでは引用元を記入する機能はありませんので、引用ブロックで追記します。

> 引用テキストを視覚的に強調します。「他者の引用は、我々自身への引用である」

引用テキストを視覚的に強調します。「他者の引用は、我々自身への引用である」

フリオ・コルタサル

リンク(別エディタから貼り付けのみ可能)

Markdownではリンクする文字列とリンクの組み合わせで簡単に記述できます。

[リンク文字列](http://...)

WordPressではエディタ上で入力していてもリンクに変換されないようです。

他のMarkdown対応エディタからコピーして貼り付けるとリンクで貼り付けできます。

リスト

リストは数字付きリスト、箇条書きリストどちらも可能です。

数字付きリストは行頭から数字.+スペースで記入できます。

箇条書きリストは行頭からアスタリスク(*)、ハイフン(-)、プラス(+)+スペースで記入できます。

階層を表現することも可能です。

Gutenbergエディタでは行頭でスペースを追加すると階層がさがり、バックスペースを入れると階層が上がります。

1. aa
   1. bb
2. cc

• 箇条書き
  • 箇条書き
    • 箇条書き
  • 箇条書き

別のMarkdownエディタから貼り付けするのも綺麗にできます。

太字(非対応)

Markdownでは文章中で以下のように記述すると強調構文(em)を入力できます。

**強調**したいことがあります。

WordPressでは非対応でした。

まとめ

Notionなどの他のエディタとのやりとりもしやすいです。

うまく活用して入力効率をアップしていきたいですね。

ではまた。