WordPressで導入された新しいエディタ「Gutenberg(グーテンベルク)」の操作方法と使い方

2018年12月に導入されたワードプレスの新エディタ「Gutenberg(グーテンベルク)」。

従来のエディタから操作方法が変わり、ブロックを追加していく形でブログを書いていくような形式になりました。

従来のエディタ(ClassicEditor)を使っていた方は、WordPressのアップデートで操作方法が変わって慣れるのに苦労した方もいるのではないでしょうか。

私がやっている講座でも、操作方法を説明する機会が増えてきたので、今回はグーテンベルクの基本的な操作方法と使い方を解説します。

ブロック要素を追加する

Gutenbergは、文章や写真など、投稿ページを構成する要素を「ブロック」として追加しながら積み上げていくようにページを作っていきます。

見出しのブロック、テキストのブロック、画像のブロックなど、ページ内で意味を持つブロックが用意されているので、必要なものを選んで追加し、ページの内容を作ります。

Gutenbergの操作画面

まずGutenbergの操作画面です。操作画面をぱっと見ると、従来のエディタから大きく変わってるように感じますが、実はそれほど配置は変わっていません。

画面の左上が記事の内容の編集、その下詳細設定、右が記事のステータスや公開状態、そして追加したブロックの設定などを行う画面です。

段落を追加して文章を入力する

まずは基本のブロックとなる段落ブロックの使い方です。

記事の編集画面のやや左上らへんにあるアイコンにカーソルを合わせて「ブロックの追加」をクリックします。   

 

すると、ブロックの種類を選ぶ画面が表示されるので、追加したいブロックの種類を選んでクリックします。

ブロックの種類はたくさんありますが、ブログを書くときによく使うブロックとしては、このようなものがあります。

  • 段落(文章)
  • 見出し
  • リスト
  • カスタムHTML(HTMLを編集した場合に用いる)
  • 画像
  • 引用

他にも、ページをカラム分けしたいときに使うブロックや、テーブルを作りたい場合に使うブロックなどもあります。

従来のエディタであれば、HTMLを編集しなければできなかったことも、直感的な操作で実現できるようになっていたりするので、HTMLが苦手な人にとっては触りやすくなったのかなと感じています。

また、従来のエディタのように、文章を左右中央に寄せたり、太字にしたり、リンクを張ったりもすることもできますよ。

今回は試しに文章を追加するので「段落」を選びます。

これでブロックが追加されました。あとはこれまでと同様に文章を入力していけばOKです。

入力する部分の上に表示されるアイコンを選択すると、文章の寄せを設定したり、太字にしたり、リンクを貼ったりすることもできます。

本文を入力して改行するときは、エンターキーを押します。

見出しを追加する

見出しの入力も同様に、ブロックを追加するアイコンを選択してから「見出し」をクリックします。

これで見出しが入力されました。デフォルトではh2が設定されるので、投稿ページの文章構造に応じてh3、h4に変更しましょう。

見出し入力のショートカット「##」

また、見出しを入力するときに、見出しブロックを追加するのもひとつのやり方ですが、もう少し効率の良いやり方があります。

段落ブロックを追加してカーソルを合わせた状態で「##」と入力し半角キーを入力してから文章を入力すると、見出しブロックに変換されます。

本文を書いて改行した後にマウスを操作して見出しブロックを追加しなくても、このショートカットキーを使えば、キーボード操作のみで見出しを追加することができます。

h2見出しにしたい場合は##、h3見出しにしたい場合は###という具合に入力すればOKです。

画像を追加する

画像を追加するときは、先程と同様にブロックを追加するを選択し、「画像」をクリックします。

アップロードをクリックするとPCの中にある画像を選択する画面が、メディアライブラリを選択するとサーバーにアップロードされた画像を選択することができます。

カラム分けをすることもできる

テキストや画像を入れる以外にも、カラム分けをすることなどもできます。

ブロックを追加するをクリックして、表示された画面の下の方に行くと「レイアウト要素」という項目の中に「カラム」という項目がありますので、これをクリックします。

カラムブロックを追加すると、記事が左右に2分割されます。

従来のエディタでは、カラム分けをするのは手間がかかりましたが、Gutenbergではとても簡単に使うことができます。

まとめ

今回はとても簡単にではありますが、Gutenbergの使い方を説明しました。

他にも色んな種類のブロックが用意されていますので、試して使ってみると良いと思います。

従来のエディタを使っていてそちらの方が使いやすいという場合は、無理に移行する必要はありませんが、将来的にはこちらが主流になっていくことは間違いないと思われるので、どこかしらのタイミングで移行することになると思います。