Wordpress

Gutenbergエディタ実は使いやすかった!

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

クボヒロ

当時はとっても嫌だった。だって、従来どおりの慣れ親しんだエディタじゃないと記事が書きづらいんだもん・・・

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

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

そうしたら、案外使いやすい・・・?というか、結構いい・・・?

いや、めちゃくちゃ良いのでは?!

このような情報をまとめています
  • Gutenberg(新エディタ)をついに使ってみた感想
  • 「ブロック」構成の解説
  • 再利用ブロックをテンプレートとして使う方法

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

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

クボヒロ

急に新しいエディタになって戸惑った〜。一刻も早く「前のエディタに戻したい!!」って思ったよ

慣れるまで、従来のエディタか新エディタで選択ができれば良かったのですが・・・勝手に新しいものになってしまうのは焦ります。

特に、ブロガーにとってエディタは命のようなもの。その日からどうやってブログを書いて行けば良いんだろうと愕然としたものです。

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

特に嫌だったのが、エディタ内の言語が全て英語だったこと!

ある程度の英語は分かるけど、やっぱり日本人なので日本語がいいし、知らない単語もあったので、「これなんの機能だろう?」と思うこともしばしば。

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

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

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

クボヒロ

正直、Gutenbergについては忘れていましたが、JINのアップデート情報にて思い出したんだよね〜

せっかくですから、久々に使ってみようかなと思ったんです。そして、使ってみたら案外良かった。というか、結構良い・・・いや、めちゃくちゃ良くないですか?これ!

しかも、全て英語だったはずが日本語になっていました。

クボヒロ

やっぱり日本語じゃないとね!これで扱いやすくなったよ

Gutenbergの良いところ6つ

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

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

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

上の画像が新エディタ(Gutenberg)、下が従来のエディタです。

Gutenbergは白を基調としていて、スッキリしています。ミニマリストとしては、白で統一されたデザインスッキリしたUIは魅力的に感じます。

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

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

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

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

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

文章を書きながら、さっと目次が確認できるどころか、クリックするとその見出しにジャンプすることが可能です。

文字数・見出しの数・段落・ブロックの数なども確認できるようになっています。

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


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

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

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

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

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

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

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

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

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

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

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

ブロック構成の仕上がりイメージ(外部リンク)

ブロック以外にも、いろいろな装飾が追加されたのでそれらの仕上がりイメージがまとまっている記事です。とても参考になったので気になる方はチェックしてみてくださいね。

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

▲ 見出しの例

従来のエディタだと、文章を書いてからその文章を選択し、見出しボタンを押すという流れでしたが、新エディタだとまず見出しを先に作れます。

ボックスも同じように先に作ることができ、あとから文章を書き込めます。

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

クボヒロ

従来エディタだと、たまに見出しやボックス挿入でバグることもあったので(文章を選択してから装飾ボタンを押す必要がある)、こちらの方がより直感的で好きだな〜

ちなみに、好きなボックスを作ってから、「文章のブロック」をボックスのなかにドラッグドロップして簡単に入れることができますよ。

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

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

Gutenbergの使い方【応用編】

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

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

Gutenbergでは、現時点ではほとんどのプラグインが使えません。

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

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

  1. まずは「すべての再利用ブロックを管理」をクリック
  2. ブロックという一覧が出てきますので、「新規追加」をクリック
  3. ブロックに、テンプレートにしたい文章やコードを書いてください。(過去の記事からショートコードなどをコピーしてきて貼ってくださいね)
  4. ブロックを選択したまま、詳細設定から「再利用ブロックに追加」をクリック。名前をつけて保存します
▲ 詳細設定はここにあります。
テンプレートにしたいブロックを選択しておいてくださいね

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

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

クボヒロ

次のひと手間が必ず必要だから気をつけて!

▲ この一手間、必ず忘れないでね

そうしたら、「通常のブロックへ変換」します。

通常のブロックへ変換しないと、再利用ブロックの中身が書き換わってしまう

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

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

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

クボヒロ

ちょっとややこしいんですが、つまり「通常のブロックへ変換」を忘れなければ大丈夫だよ

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

お使いのWordpressテーマが、まだ少しだけしかGutenbergに対応していない場合は、クラシックエディタが使えないと困るということもありますよね。

Gutenbergでは「クラシックエディタをブロック使い」できるんです!

やり方は簡単。いつもどおり+ボタンから、フォーマットタブの「クラシック」を挿入するだけ。そのブロックでだけ、クラシックエディタを使うことができます。

Rinkerを使う方法

プラグインのRinker便利ですよね。実は、ブロックの追加で「レイアウト要素」のタブにRinkerのブロックがあるんです。

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

▲ Rinkerが使えるよ!

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

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

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

青い点をぐいっと引っ張れば、任意の長さに直感的に設定することが可能です。(ブロック設定から数値でも指定ができます)

ハムスター

たっぷりの余白を挿入したいときでも、簡単に追加できるのがブロックエディタのいいところなのだ

まとめ

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

再利用ブロックはちょっとややこしいんですが、「通常ブロックへ戻す」ことを忘れなければ、OK。

今後のアップデートでもっと便利になりそうなので、早いうちに慣れておいてはいかがでしょうか?