WordPress5.0からエディタが新しくなります。
新しいエディタは「Gutenberg（グーテンベルク）」という名称で、現在はベータ版として公開されています。
新エディタの特徴はMailChimpの編集画面のように、見出しや本文、画像、引用文等の各要素をひとまとまりのブロック単位でレイアウトを組みながら記事を作成します。
また、グーテンベルクには画像のギャラリー表示やカバー画像（画像の上にテキストを表示させる機能）、リンクボタンの作成機能など、旧エディタにない機能が新機能が搭載されています。
この記事では、新エディタ「Gutenberg（グーテンベルク）」の使い方について解説します。
好きなところから読めます
Gutenbergのインストール
新エディタ、グーテンベルクをインストールする方法は２通りあります。
ダッシュボードからインストールする
最近、WordPressをインストールした方や、システムのバージョンアップをすると、ダッシュボードに以下のような案内が表示されていると思います。
ここで、グーテンベルクをインストールする事ができます。
インストールが完了するとグーテンベルクエディタのデモ画面が開きます。
左側メニューを見ると「Gutenberg」が追加されたことが確認できます。
プラグインからインストールする
ダッシュボードの表示を削除した方や、一度インストールしてすぐに削除してしまったという方は、プラグインの追加でインストールする事ができます。
ダッシュボード＞プラグイン＞新規追加 を選択します。
プラグイン検索窓に「Gutenberg」と入力するとプラグインが表示されますので、「今すぐインストール」をクリックします。インストール終了後「有効化」をクリックして、プラグインを有効化します。
プラグインの新規追加からインストールすると、デモ画面に切り替わりませんが、左側メニューの「Gutenberg」の項目にマウスカーソルを合わせ、「デモ」を選択するとデモ画面を表示させる事ができます。
Gutenbergの使い方
グーテンベルクはブロック単位で記事を作成します。
タイトルの入力（投稿・固定ページ共通）
それでは早速、新規に記事を書きながら解説していきます。まず最初に、記事のタイトルを入力します。
タイトルを追加と表示されているところに記事のタイトルを入力します。
パーマリンクの設定（投稿・固定ページ共通）
タイトルを入力後、若しくはタイトル入力後に「下書き保存」をクリックするとタイトルの上にパーマリンクが表示されますので、「編集」をクリックしてパーマリンクを変更します。
①ページ内容に合致した英数字を入力し、②保存ボタンをクリックします。
パーマリンクを日本語のままにしておくと様々なエラーを引き起こす原因となりますので、英数字に変更するようにしましょう。
詳しい解説は以下の記事を参考にして下さい。
本文の入力（投稿・固定ページ共通）
本文を入力します。以下の赤枠内に直接本文を入力する事ができます。
テキスト入力部分に薄いグレーで「テキストを追加するか”/”を押してコンテンツを追加」という説明があるので、「/（スラッシュ）」を入力すると、コンテンツに追加するメニューが表示されます。
とりあえず本文を入力します。
旧エディタと新エディタの相違点（改行方法）
旧エディタで文章を改行する時は「Enterキー」を押して改行していましたが、新エディタで文章を改行する時は、「Shiftキー＋Enterキー」で改行します。
Shiftキーを押さずにEnterキーだけ押すと、下図のように新しいブロックが出現し、新たなブロックに文章を入力する事になります。
この点、旧エディタと使い方が異なりますので注意が必要です。
改行しようと思って、今まで通り「Enterキー」を押してしまい、新たなブロックに文章が移動してしまっても、「Returnキー」を押せば改行前の文章に戻せます。
文字装飾（投稿・固定ページ共通）
文字装飾はブロック上部に、左寄せ・真ん中寄せ・右寄せ、ショートコードの挿入（ショートコードプラグインを入れてない方はありません）、太字・斜体・リンク・打消し線等があります。
右側にあるサイドバーに、文字の大きさ、文字色、ブロックの背景色を変更する設定があります。
ブロックの追加方法（投稿・固定ページ共通）
ブロックを追加するには、編集画面左上にある「⊕」ボタンをクリックするか、
文章の最後で「Enterキー」を押して、ブロックを追加するという２通りの方法があります。
新しいブロックを追加したら、新たにテキストや見出し、写真等の挿入ができます。
本文以外のブロックを追加するには
本文以外のブロックを挿入したい時は、左側にある「⊕」をクリックすると本文以外のブロックが表示されます。
下にスクロールすると、埋め込みという項目がありますが、SNSや動画、音楽等を埋め込んだりする事もできます。
見出しの追加（投稿・固定ページ共通）
記事の見出しを追加します。以下いずれかをクリックすると見出しを追加する事ができます。
このように、見出しを追加できます。見出しのレベルも簡単に変更できます。
見出しから本文に変更することもできる
ブロックタイプを変更という項目を選択し、「段落」をクリックすると、見出しから本文に変更する事ができます。逆もまた可能です。
引用文に変更する事も可能です。
見出しの使い方については以下の記事で解説していますので、参考にして下さい。
画像の追加（投稿・固定ページ共通）
画像を追加するには２通りあり、
1つ目はブロックの左にある⊕ボタンをクリックし、ブロックのメニューを開いて画像を選択する方法。
２つ目はブロックの右側にある画像アイコンを選択する方法。
どちらも同じなので、使いやすい方法で画像を追加します
画像をアップロードする時は、アップロードボタンを押すか、赤枠内に画像をドラッグするとアップロードできます。
また、すでにアップロードされている画像を使用する際は、メディアライブラリから選択して画像を追加します。
このように、画像を追加する事ができます。
画像で設定できる項目は以下の通りです。
- 画像の位置（左寄せ、真ん中寄せ、右寄せ）
- キャプションを入力する場合はここにテキストを入力します。
- Altテキスト（代替テキスト）を入力します
- 画像の大きさを選択します（７段階）。
- 画像の寸法を設定できます。
- 画像のリンク先を設定できます。
ギャラリーの追加（投稿・固定ページ共通）
グーテンベルクでは、複数の画像を一覧表示する「ギャラリー」を追加する事ができます。
追加方法は画像と同じで、以下いずれかの赤枠内をクリックするとギャラリーを追加する事ができます。
メディアライブラリをクリックします。
メディアライブラリが開きますので、ギャラリーに追加したい画像を選択します。選択後、「ギャラリーを作成」をクリックします。
キャプションをまとめて設定できる画面が表示されます。キャプションを入れる時はここで入力し（編集画面からでも追加できます）、何も入れなければ「ギャラリーを挿入」をクリックします。
以下のようにギャラリーが追加されました。
右側のサイドバーにある「カラム」を変更すると、画像を並べる枚数を設定できます。
ギャラリーで設定できる項目は以下の通りです。
- 画像の位置（左寄せ、真ん中寄せ、右寄せ）※画像が縦一列に並んで表示されてしまいます。
- カラムを調整できます。
- 画像のリンク先を設定できます。
カバー画像の追加（投稿・固定ページ共通）
カバー画像とは、画像の上にテキストを表示させる事ができる機能です。
カバー画像の追加方法は、「⊕」ボタンをクリックしてブロックメニューを開き、「カバー」をクリックします。
「メディアライブラリ」をクリックし、画像を選択します。ここまでは画像の追加と同じですが、次からが違います。
なんと、画像の上にテキストを挿入する事ができるのです。
以下のように、テキストを挿入する事ができます。
カバー画像で設定できる項目は以下の通りです。
- テキストの位置（左寄せ、真ん中寄せ、右寄せ）
- 固定背景（ONに切り替えると画像がパララックス効果で表示されます。素晴らしい！）
- 画像のオーバーレイを設定できます
- 画像の透過率を設定できます。
ブロックの移動（投稿・固定ページ共通）
ブロックの左側にカーソルを載せると、「上下移動のアイコン」と上下移動の印の間にある６つの点のアイコンが表示されます。
例えば、下記のように見出しと本文を入れ替えたい場合、ブロックの左側の上下移動のアイコンをクリックすると、ブロックを移動できます。
また、上下移動の印の間にある６つの点のアイコンをドラッグし、青線（下線）が表示させたところで右クリックを離すとブロックを移動する事ができます。
文字数の少ないコンテンツであれば、この機能はあまり使わないと思いますが、ランディングページの作成等、長文を編集するような時は、すごく重宝する機能だと思います。
ボタンの追加（投稿・固定ページ共通）
グーテンベルクは標準でボタンが用意されています。
通常、ボタンを使う場合、あらかじめボタンデザインが用意されているテーマを使用しなければ使えませんでしたが、グーテンベルクではボタンが使えますので、リンク付きのボタンを挿入する事ができます。
ボタンの追加方法は、「⊕」ボタンをクリックしてブロックメニューを開き、レイアウト要素の「ボタン」をクリックします。
以下のようにボタンが表示されます。
テキストを追加し、右側にあるサイドバーからボタンカラーを選択します。
ボタンで設定できる項目は以下の通りです。
- テキストの位置（左寄せ、真ん中寄せ、右寄せ）
- ボタンテキストの装飾（太字、斜体、打消し線）
- ボタンテキストの編集
- リンク先の設定
- ボタンカラーの設定
- ボタンテキストカラーの設定
- ボタンとテキストの色の組み合わせが悪いと（視認性が悪いと）警告が表示されます。
ボタンのスタイルも変更できます（おせじにもデザインが良いとは言えませんが…）。
まとめ
以上、WordPressの新エディタ、「Gutenberg（グーテンベルク）」の使い方について解説しました。
旧エディタに慣れ親しんでいる方からしたら、慣れるまでは使い難く感じるかもしれませんが、これからWordPressを使われる方は、直感的に操作できますので使いやすいと思います。
特に、長文を書かれるような方は旧エディタよりもグーテンベルクの方が編集しやすいと思います。
また、縦長のランディングページを編集をするような際、見出しやコンテンツをドラッグで移動できるグーテンベルクは編集が楽だと思います。
ランディングページの詳しい解説は以下の記事を参考にして下さい。
