【WordPress】テキストエディタGutenbergで記事を書いてみよう

こんにちは！
今回はWordPress5.0から標準装備になったテキストエディタ、
「Gutenberg」のことについてまとめました！

※この記事もGutenbergで書いております！

ブロックを組み立てるように記事を書けるようになった

見出しのブロック、文章のブロック、画像のブロックのように、
事柄を一つ一つブロックにして組み立てて書いてゆくようになりました。

そうすることで複製や移動も簡単にでき、
よく使うブロックは保存して再度使用することもできます。
またブロックごとにはっきりと役割が決まっているので、
文章構造を捉えやすくなり、見やすく書きやすい！と良いことづくめです。

ビジュアルエディターだけで完結できるようになった

旧エディターでは「コードエディター」でコードをゴリゴリ書いていくことが多かったのですが、Gutenbergには「ビジュアルエディター」自体にコードを書けるブロックが用意されているので、直観的に書きつつコードも入れ込むことができるようになりました。

直感的に進化した！

従来のテキストエディタに比べると、かなり直感的に使えるようになりました。
今までプラグインを入れなければ使えなかった機能やレイアウトが、
Gutenbergを使うと簡単に導入することができます。

例えば「2つの画像を横に並べる」。
以前はプラグインを使ったりコードを書かないと実現できなかったのですが
Gutenbergなら超簡単にできます！

作り方

これでできあがり！
下記のように画像が横に並びます↓（スマートフォンから見ると縦一列に並びます）

実際の見え方

上記のようなレイアウトを簡単に作れる機能が標準搭載されています。
記事書きが楽しくなる機能たちを、グループごとにご紹介いたします！

一般ブロック

とてもよく使うブロックの集まりです。

文章を書きたいとき

見出し

実際の見え方（画像）

見出しH2

見出しH3

見出しH4

見出しを付けたいときはこのブロックです。
弊社のブログでは、背景色を敷いたりボーダーをつけ足して目立たせています。
H2が一番大きな見出し、H3が中、H4が小見出しです。H6まであります。
ちなみに見出しはSEO的にとても重要に扱われるので、タイトルは必ずこの見出しを使いましょう。

段落

実際の見え方

太文字
斜め文字
リンク
~~取り消し線~~

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

一般的な文章を書きたい時は全てこのブロックを使います。
ブロックは<p></p>タグで囲まれます。

ちなみに改行する際は
「enterキー」で「次の段落ブロック」へ、
「shiftキー」を押しながら「enterキー」で同じブロック内で改行します。
右寄せや真ん中寄せもできます。