WordPressのエディタ「Gutenberg」について機能や特徴をご紹介

どうも！

WordPressのバージョンが5になるにつれ、エディタが「Gutenberg」という新しいブロック型エディタへと変わりました。

今までのビジュアルエディタとは全く違ったタイプのエディターとなり、長年、クラシックエディター(これまで使われてきたエディター)に慣れ親しんできたユーザーからは戸惑う方もいらっしゃるのではないでしょうか？

ですが、このブロック型エディターも慣れてしまえば、とても便利で使いやすいエディタとなっています。

この新しいエディタの最大の特徴である「ブロック型」というところが、見出しやテキスト、画像などをブロックとしてレイアウト出来るので、従来のエディターよりも表現(見せ方)の幅が広がるので、とても見やすいブログを投稿する事ができ、もっとブログを読んでもらえる可能性も期待ができます。

今回は、このブロック型エディター「Gutenberg」について、主な機能や特徴などを、ご紹介していきたいと思います。

旧エディタとの違いについて

旧来のエディターでは、どちらかというと「ワード」のような使用感でレイアウトを自在に変更したりするのには、ちょっと工夫が必要でした。

あたしいエディターでは、最大の特徴でもある「ブロック」といったところにあり、画像や文章といったものを、2つのブロック(箱)として捉えます。

そして、その箱を横・縦とサイズと共に自在に並べていく事が可能です。

つまりは、レイアウト機能が強化された事によって、より見やすいコンテンツの作成が可能となりました。

旧来のエディターで投稿した記事はどうなるの？

旧来のエディターで作成した記事は、「クラシック」というブロックにひとまとめになっています。

ですので、記事が消えるといった事はなさそうですが、エディタを新しく切り変える際は、やはりバックアップは念の為にとっておきましょう。

まずは管理画面からご紹介

今までの編集画面とは少し違いますが、画像の中央らへんにある「タイトルを追加」というところが、記事のタイトルを入力する場所にあたります。

また、その下からは記事の本文や見出し、画像といったように入力できるところになります。

コンテンツの追加について

例えば、テキストを入力したい場合は「段落」というブロックを追加する事でテキストの入力が可能となります。

また、編集中に見出しに変更したり、リストに変更したりする事も可能です。

いずれも、ブロックの名称を「段落」「見出し」「リスト」などといったブロックに切り替える事で変更出来ます。

画像の追加についても同様に「画像」をブロックを選び、追加していきます。

画像+本文の横並び表示

例えば上記の画像のように、画像の左右どちらかにテキストを横並びに表示させたい場合は、「メディアと文章」というブロックを選びます。

このメディアと文章というブロックを選ぶと、画像の横に見出しや本文といった文章を入れる事ができます。

分かりやすく説明すると、箱を用意して、中に物を入れると横並びに表示してくれるブロックになります。

画像ギャラリーの追加

画像をギャラリーのように一覧表示をさせたい場合は、「ギャラリー」ブロックを追加します。

メディアにある画像を複数選択し追加すると、以下のように画像ギャラリーが作成されます。

2列の場合

3列の場合

※3列の場合、4枚目の画像は大きくなります。

画像ギャラリーのカラムの変更

一覧表示する画像のカラム(横並びの枚数)は自在に変更が可能です。

設定は以下の画像のように、画面右側のカラムの数字を変更する事によって変更可能です。

カバー画像の作り方

画像の上に見出しや本文といったテキストを載せて表示する事も、グーテンベルグでは可能です。

ブログのアイキャッチ画像の変わりに設定する事はもちろん、少し凝った画像編集もワードプレスの管理画面上で出来てしまうので、この機能には個人的にはとても驚きました。

※以下の画像のように、細かい調整も可能です。

背景に敷いた画像の開始位置の設定や、画像に色をオーバーレイができ、かつ色の不透明度を変更が出来ます。

ブロックの移動

本文に追加されたブロックは、コンテンツ上下を自由に移動させる事が可能です。

最初に本文や見出しを書いて後で画像を追加しても、楽に移動ができてしまいます。

再利用ブロックに追加

記事を投稿していると、見出しの本文をよく使用すると思うのですが、この見出しと本文のブロックを毎回追加するのが面倒になってきます。

そこで、最初に追加した見出しと本文のブロックをセットにして、「再利用ブロック」に登録する事で、繰り返し見出し+本文のセットになったブロックが使用可能となります。

上記の画像では、ブロック名を「testblock」と付けて、再利用ブロックに登録しています。

見出しと本文が必要になれば、このブロック名を追加する事で、次回以降のブログ投稿もより効率的に行なえます。

ボタンの追加

リンクボタンの設置なんかでも、このエディタで簡単に行えます。

よく見るリンクボタンも、中身のテキストから、ボタンの色、ボタンの丸みをお好みの色・形に変更出来ます。

また、以下のようにアウトライン版も作成可能です。

まとめ

ワードプレスの新しいエディタ「Gutenberg」の機能や特徴についてご紹介をしていきましたが、いかがだったでしょうか？

ここで紹介した機能はほんの一部にしか過ぎないので、まだまだ便利な機能はたくさんあるのですが、またの機会にじっくりご紹介ができればと思います。

使ってみた個人的な感想は、慣れてしまえば圧倒的に便利かつキレイなページの作成が可能なので、投稿ページだけでなく、固定ページでも使用してあげる事によって、本当の意味でのCMSとして、機能するのではないでしょうか。