Wordpress

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

こんにちは、クボヒロです。(Kubohiro7

2018年12月7日に、Wordpressバージョン5.0に更新されましたよね。

その際に、投稿画面(エディタ)もGutenberg(グーテンベルク)というものに変わってしまいました。

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

どんなものでもそうですが、いつも使っているものがいきなりデザイン一新してしまうと、戸惑いますよね。

従来のものか、新しいものかで選択できれば良いのですが、プラグインを導入しないと従来のエディタに戻すことはできません。

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

クボヒロ
クボヒロ
そうしたら思ったより使いやすいんですよこれが・・・!
今回の記事では・・・
  • Gutenberg(新エディタ)をついに使ってみた感想
  • 「ブロック」構成の解説
  • 再利用ブロックをテンプレートとして使う方法

・・・等々のお話です!

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

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

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

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

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

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

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

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

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

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

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

クボヒロ
クボヒロ
正直Gutenbergについては忘れていましたが、JINのアップデート情報にて思い出しましたw
https://jin-theme.com/update/

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

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

じょちゅ(助手)
じょちゅ(助手)
やっぱり日本語じゃないとね!これで扱いやすくなったよ

具体的にどのあたりが良かったのか、お話していきます。

Gutenbergの良いところ6つ

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

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

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

Gutenbergは白を基調としていて、スッキリしています。

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

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

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

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

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

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

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

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

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


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

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

ブロック構成を軽く説明

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

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

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

イメージとしては・・・、大きいボードに付箋を貼っていく感じ。1枚の付箋に、ひとまとまりの文章(段落)や、画像を入れることができます。

付箋なら剥がして、好きな位置に張り替えたり、捨てたりできますよね。

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

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

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

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

シフトキーでまとめて選択し移動が可能。(青く光れば選択できている)

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

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

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

見出しの例

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

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

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

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

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

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

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

Gutenbergの使い方【応用編】

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

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

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

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

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

詳細設定はここにあります。テンプレートにしたいブロックを選択しておいてくださいね

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

+ボタンから、再利用可能のタブを開き、呼び出します。

じょちゅ (助手)
じょちゅ (助手)
プレビューも出るのでわかりやすいね
クボヒロ
クボヒロ
次のひと手間が必ず必要だから気をつけてね!!

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

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

再利用ブロックは、あくまで決まった文章を再利用するもの。

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

じょちゅ (助手)
じょちゅ (助手)
えっ?!他の記事で使っていたブロックも置き換わっちゃうの?

例えば記事1、記事2、記事3で「再利用ブロックA」を使っていたとします。(内容は「トンカツです。」とします)

記事4を作成し、そこに再利用ブロックAを置きます。

その再利用ブロックの中身を、「トンカツです。」から「ハンバーグです。」に変えたとします。

そうすると、記事1、2,3で「トンカツです。」になっていた部分も「ハンバーグです。」に変わってしまうんです!

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

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

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

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

やり方は簡単。いつもどおり+ボタンから、フォーマットタブの「クラシック」を挿入するだけ。

そのブロックでだけ、クラシックエディタを使うことができます。

Rinkerを使う方法

プラグインのRinker便利ですよね。

実はブロックの追加で、「レイアウト要素」のタブにRinkerのブロックがあるんです。

クボヒロ
クボヒロ
ただしこれ、クボヒロはなぜかグレーアウトしてしまい使うことができません

今のところは、Wordpressのメニュー「商品リンク」から商品を追加し、コードをコピーするしかないでしょう。

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

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

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

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

じょちゅ (助手)
じょちゅ (助手)
たっぷりの余白を挿入したいときでも、簡単に追加できるのがブロックエディタのいいところだよ!

まとめ

今ではすっかりGutenbergエディタのとりことなってしまったクボヒロです。

ブロック構成は慣れればとっても使いやすいうえに、便利なんです。

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

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