More than 3 years have passed since last update.

クラシックエディタ卒業からのはじめてのGutenberg（グーテンベルグ）の使い方

Posted at 2021-04-10

どうも7noteです。Wordpress5.0がリリースされてもまだクラシックエディタを卒業できない方へ

2018年12月6日にwordpressの5.0がリリースされ、webのフロント界隈ではちょっとした盛り上がりがありました。
ところがいざフタを開けてみると

「なんじゃこの使いにくいエディタは・・・」

とほとんどの人が思ったのではないでしょうか。今もクラシックエディタのプラグインを入れていますみたいな人も多いはず。まぁ新しい機能は最初戸惑うことが多いのでなかなか受け入れられないのは業界に関わらずよくあることですね。

私自身もつい最近までクラシックエディタを使っていたのですが、ちょうどグーテンベルグが使うそうな機会をいただいたのでそれを期にグーテンベルグ使ってみようと思い、使ってみることに。

いざ使ってみるとグーテンベルグの得意不得意がなんとなくわかってきました。
結論だけ先にかくと、グーテンベルグを使いこなせることで、「高品質なサイト設計＆効率的な開発」を行うことができます。

長くなりましたがこの記事では、以下のようなことについて体験談や感想を伝えていきたいと思います。

「クラシックエディタ」

「グーテンベルグ」

デザインが一新され、どこにどんな機能がついているのかわからなくなった方も多いのではないでしょうか。
使い方は次の大見出しで解説しているのでそちらへ。

エディタがグーテンベルグに変わったことによって最も違う機能が「ブロック機能」です。
コンテンツのブロックを1クリックで簡単に追加できる機能がつきました。

これまでのクラシックエディタでは、HTMLを知らない人からすれば文章（テキスト）を書くので精一杯でした。しかしグーテンベルグではHTMLを全く知らなくてもブロック構造で要素の配置や写真の配置ができるようになりました。

クラシックエディタでは、たとえば文章と写真を横並びにしつつ、スマホ表示では縦並びに変えるなんてことをしようものならHTML・CSSの知識がなければできませんでした。

しかしこだわったデザインを求めないのであればグーテンベルグで簡単に実装できます。

これがもっとも違うといえる機能の一つでしょう。

画面上に青い[+]マークがでるとそこに要素を追加することができます。

追加したいブロックを選択します。ほしいものがなければ「すべて表示」から要素を選択することができます。

あとは写真を選択したり、文章を記載していくだけです。

WEB制作で使いやすいブロックを紹介しておきます。

他にもデザインに合わせて使える多くのツールがありますが、主要どころは上記なので上にあるアイコンを使いこなせれば、グーテンベルグを使いこなしたも同然です。

そして、重要なのはこれらの詳細設定を設定画面から変更できることです。右上にある歯車マークをクリックすることで、選択中のブロックの詳細設定ができます。フォントサイズや配色、大きさなどCSSで調整できるようなものがここで設定することができます

グーテンベルグの使いにくいところが、触りたいブロックを選択しにくいところ。です。
しかし実は下部をよく見ると選択中のブロックの親子構造がすべてパンくず的に並んでいます。これを選択すれば、触りたい要素を間違いなく選択することができます。

他にも様々な機能が多くあります。
初めてのことはなかなか手が付かないしなれないのはどんなサービスでもあるものです。
ですが現状クラシックエディタに戻ることはなさそうですし、いつか対応しなくなる可能性も考えるのであれば、早いうちに新しいものになれておくのも必要なのかなとか考えたり。

ただ現状不具合もあるので必ずグーテンベルグがいいかと聞かれると首は縦に振りにくいのが正直なところですね。。。
今後の改良に期待しながらもっとグーテンベルグについても調査していきたいとおもいます！