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

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

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

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

![スクリーンショット 2021-03-24 13.59.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/3999b84f-5e81-fe28-8ad7-6376b6e8967c.png)


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

## 私自身もつい最近までクラシックエディタを使っていたのだが・・・

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

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

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


- **グーテンベルグとクラシックエディタの違い**
- **グーテンベルグの使い方**
- **グーテンベルグのメリット・デメリット**

## グーテンベルグとクラシックエディタの違い

### デザインが圧倒的に違う

**「クラシックエディタ」**
![スクリーンショット 2021-03-24 14.02.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/fb1cbacb-2c91-9645-af74-0949d9158d27.png)

**「グーテンベルグ」**
![スクリーンショット 2021-03-24 13.59.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/750aef4e-1661-ea89-6634-5d6e24efbc8e.png)

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

### 機能が違う

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

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

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

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

![スクリーンショット 2021-03-24 14.18.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/b8ea793b-1bd4-88ab-7235-3b34c1d42f96.png)

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


## 使い方

### 「ブロック機能の使い方」

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

![スクリーンショット 2021-03-24 14.24.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/fbe6dfc6-6d72-2f5f-9a3e-024bf9144712.png)

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

![スクリーンショット 2021-03-24 14.25.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/d1817e5b-920f-0576-648b-6b10e44a3a01.png)

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

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

|名称|アイコン|機能|
|:--|:--|:--|
|段落|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/7b434c43-f543-46da-8cca-6a6e508c5539.png" width="50">|文章を入れる|
|画像|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/16e1d54a-4056-882c-f0b0-563524fc2fc7.png" width="50">|画像を入れる|
|メディアとテキスト|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/c3453f8e-68c2-743d-b9ee-a898688854af.png" width="50">|「写真」+コンテンツを左右に並べる。テキスト以外も可。|
|スペーサー|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/394797f3-6cf9-3451-acbc-f3c03290bf3a.png" width="50">|余白を確保する|
|グループ|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/536b5819-6450-2ab8-e2dc-9db2c510aedb.png" width="50">|複数の要素をくくる親要素を設定できる|
|カラム|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/f71a5f7c-dc26-78ba-5ede-fac9b57e1790.png" width="50">|２・３・4カラムの要素を作れる|


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

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

![スクリーンショット 2021-04-08 16.08.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/3a33e8c7-41ce-0aab-0e9f-ea5beec4ba04.png)


### 「選択した親要素を確認して、幅などの詳細設定をする方法」

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

![画面収録-2021-04-08-16.13.36.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/652800e4-d7eb-502b-6f37-e0a212cc9e1d.gif)


### 「グーテンベルグでもクラシックエディタの頃のようにテキスト表示にして、ゴリゴリHTML・CSSを書くことができる。」

![スクリーンショット 2021-03-24 14.19.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/da54ea78-afd7-7655-0274-c32a9e06b4ab.png)


## まとめ

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

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

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)