テーマ対応後のGutenbergエディタは使いやすい?!ブロックを使いこなそう

2019 2/26

2018年12月7日に、Wordpressがバージョン5.0に更新されました。その際に、投稿画面(エディタ)もGutenberg(グーテンベルク)というものに変わってしまいました。

いつも使っているものがいきなりデザイン一新してしまうと戸惑いますよね。従来のものか、新しいものかで選択できれば良いのですが、プラグインを導入しないと従来のエディタに戻すことはできません。

私もしばらくは従来のエディタに戻して使っていましたが、昨日からふと新エディタ(Gutenberg)を使ってみると案外良いことに気が付きました。

2022年以降からは旧エディタが使えなくなるとの情報が。少しずつGutenberg(ブロック)エディタに慣れることをおすすめします。

目次

実装当時のGutenbergここが嫌だった

2018年12月7日に実装されたGutenbergですが、Wordpress5.0にバージョンアップしただけで勝手にこの新エディタになってしまいました。

特に嫌だったのが、エディタ内の言語が全て英語だったことです。ある程度の英語は分かるけど、やっぱり日本人なので日本語がいいし、知らない単語もあったので「これなんの機能だろう?」と思うこともしばしば。

ということでしばらくは、プラグインを入れて従来のクラシックエディタに戻して使っていました。

従来のエディタに戻したい場合は、下記を参考にどうぞ。

久々にGutenbergを使ってみることにした

なぜ久々にGutenbergを使おうと思ったのかというと、私が使っているWordPressテーマ「JIN」で、Gutenbergに一部対応とのアップデート情報があったからです。

久々に使用してみるとほとんどが日本語に対応し、JINテーマでも少しずつGutenberg(ブロック)に対応しているようでした。

Gutenbergの良いところ6つ

具体的にどのあたりが良かったのか、お話していきます。まずはざっと6つほど。

見た目が現代的でカッコイイ

Gutenbergエディタ
WordPress従来エディタ

Gutenbergは白を基調としていてスッキリしています。白で統一されたデザインとシンプルなUIは魅力的に感じます。

2カラム表示で編集しやすい

赤く囲ったメニュー欄は、エディタ内をスクロールしても流れていかないようになっています。

従来のエディタだと、記事の下の方を編集していると公開や下書き保存などのボタンがどんどん上にいってしまうため、急に下書き保存したくなったりしたときに不便でした。

エディタ内でも目次が見られる

Gutenbergでは、プラグインを入れなくてもエディタ内で目次の確認ができるようになりました。

文章を書きながら、さっと目次が確認できるどころか、クリックするとその見出しにジャンプすることが可能です。文字数・見出しの数・段落・ブロックの数なども確認できるようになっています。

ブロック構成は覚えたら超便利

Gutenbergはブロック構成というのがカギになっています。

初めての方には「なんだろうこれ」と思うかもしれませんが、すぐに慣れますし、慣れたらとっても使いやすく便利な構成です。

ブロック構成を軽く説明します

ブロック構成とは、ひとつのブロックの中にテキストや画像などを作っていくやり方です。

文章のブロック、画像のブロック、見出しのブロックなどのように、今まで段落で作っていたものが「ブロック」というかたまりになります。

ブロックの利点は、そのブロックをまるごと削除したり、移動したりできること。

イメージとしては・・・、大きいボードに付箋を貼っていく感じ。1枚の付箋に、ひとまとまりの文章(段落)や、画像を入れることができます。付箋なら剥がして、好きな位置に張り替えたり、捨てたりできますよね。

ブロックの移動が簡単。まとめてごっそり移動もできる

ブロックは、ブロック左にある矢印カーソルを上下にクリックすることで、移動させることができます。

今までなら、ひとまとまりの文章や画像を「選択→カット」して、任意の場所に「ペースト」していましたよね。カットした部分の空白もわざわざ消していましたが、ブロック移動ならそんな煩わしさは無くなりました。

また、シフトキーを押して複数選択すれば、文章をまとめてごっそり移動させることもできます。

見出しやボックスの挿入がスムーズ

見出しの例

従来のエディタだと、文章を書いてからその文章を選択し、見出しボタンを押すという流れでしたが、新エディタだと見出しを先に作れます。ボックスも同じように先に作ることができ、あとから文章を書き込めます。

これにより、「この位置にボックスを入れよう」「ここに見出しを作ろう」といった記事全体の構成がしやすくなりました。

画像の挿入や編集がカンタン

画像はドラックドロップで挿入できる上、キャプションなども画面切り替え不要で編集できるようになっています。

Gutenbergの使い方【応用編】

Gutenbergを少しいじってみて、これなら使っていけそう!と思った方向けに、さらに便利な機能満載です。

テンプレート機能になる「再利用ブロック」を使いこなそう

Gutenbergでは、現時点(2019/2月現在)ではほとんどのプラグインが使えません。

今まで使っていたテンプレートを挿入できるプラグイン「Add Quick Tag」も使えなくなり、どうやってテンプレートを作成しようか困っていましたが、ブロックを「再利用ブロック」として登録することで、テンプレートとして使えることが分かりました。

再利用ブロックをテンプレートとして使う方法

  1. 「すべての再利用ブロックを管理」をクリック
  2. ブロックという一覧が出てくるので「新規追加」をクリック
  3. ブロックにテンプレートにしたい文章やコードを書く
  4. ブロックを選択したまま、詳細設定から「再利用ブロックに追加」をクリック
  5. 名前をつけて保存
詳細設定はここにあります。
テンプレートにしたいブロックを選択しておいてください

再利用ブロックを使ってみよう

STEP

+ボタンから、再利用可能のタブを開き、呼び出します。プレビューも出るので分かりやすいです。

STEP

通常のブロックへ変換」し、必要によって内容を書き加えたりして完成。

この一手間が必須です

再利用ブロックは、あくまで決まった文章を再利用するもの。全く同じ文章を使うには、この「通常のブロックへ変換」という作業はしなくてOKです。

ですが、「ふきだしなどのある程度のかたちは決まっているけどふきだしの内容を変えたい」という場合は、この一手間が必ず必要です。

再利用ブロックの中身を書き換えると、今までそのブロックを使っていた記事のブロックも全て内容が書き換わります。

 のアイコン画像 

再利用ブロックはそもそも「決まったかたち」を再利用して使うもの。
「通常のブロックへ変換」すれば内容が書き換えられるので、これを逆手にとって「テンプレート」として使うこともできるんです。

クラシックエディタを挿入してみよう

使っているWordpressテーマがまだ少しだけしかGutenbergに対応していない場合は、部分的にクラシック(旧)エディタを使うこともできるので安心です!

+ボタンから、フォーマットタブの「クラシック」を挿入するだけ。そのブロックでだけ、クラシックエディタを使うことができます。

Rinkerを使う方法

「レイアウト要素」のタブにRinkerのブロックがあります。

文字を入れるボックスの隣に「商品リンク追加」というボタンがあるので、何も文字を入れずにそのボタンを押します。するといつもどおりのRinkerとして使えます!

GutenbergでもRinkerが使える!

スペーサーが便利(余白を作れる)3/10追記

スペーサーを入れた図
(青い点のうえのグレー部分がスペーサー)
スペーサーの設定

「スペーサー」というブロック(レイアウト要素に入ってます)を追加すれば、任意の長さの余白を挿入することが可能になります。

青い点をぐいっと引っ張れば、任意の長さに直感的に設定することが可能です。(ブロック設定から数値でも指定ができます)旧エディタだと改行をたくさん打っていましたが、そんなことする必要もなくなりますね。

まとめ

ブロック構成は慣れればとっても使いやすいうえに、便利だということが分かりました。今ではすっかりブロックエディタばかり使っています。

2022年以降からは旧エディタが使えなくなるとの情報が。少しずつGutenberg(ブロック)エディタに慣れることをおすすめします。

この記事が気に入ったら
フォローしてね!

目次
閉じる