使い勝手がかなり違うように見える新エディタだが使い方はシンプル。

新エディタはブロックを積み上げていくような感じになるので。
旧エディタと比べると見かけがかなり違っています。
なので旧エディタに慣れている方には使い勝手が悪いと感じられると思います。
私もしばらくは旧エディタが使える「Classic Editor」のプラグインを使っていましたが・・・・

だからといって今までのエディタを使っていても結局は「Gutenberg」が旧エディタに取って代わりますから。
もし「Gutenberg」を使わないとするとWordPressを使わないという選択肢しかなくなります。

どうせ使わなくてはならないのなら一刻も早く「Gutenberg」を使いこなせるようになりたい。

ということで私も「Gutenberg」を触り始めましたが。
かなり便利だということがわかりました。
今までにはない便利な機能もたくさん追加されていて非常に魅力的です。

インライン系アプリでは使えなくなったものも

ただ、この「Gutenberg」はブロック特化型のエディタです。
そのためインライン装飾で使えるプラグインが使えなくなっています。
これが使っていて一番問題だと感じられる点です。

例えば「Add Quick tag 」は全く使えなくなってしまいました。
これは一度登録しておいてショートコードやタグ、文章を簡単に文章中に挿入する事ができるというプラグインですが。

見栄えに関するものとしては他にShortcodes by Angie Makes も新エディタでは反映されなくなっています。

これは予め様々なデザインの装飾がショートコードで紐付けられていて。
更にそれが対応する表示項目をクリックするだけで記述されるというすぐれものなんですが。
「Gutenberg」ではそれを呼び出すボタンが「Classic Paragraph」にも見当たりません。

でも以前旧エディタで使用したコードは生きていました。
「Add Quick tag 」で行った装飾も同様にちゃんと表示されました。

私としてはかなり便利に使っていたので。
ぜひとも使えるようになってほしいものです。

旧エディタと「Gutenberg」の切り替え

もしこのプラグインを使おうと思えばプラグイン「Classic Editor」をインストールした上で。 「Gutenberg」を旧エディタに変更します。

「Gutenberg」一番右上をクリックして。
プルダウンメニューから「クラシックエディタに切り替え」を選ぶと旧エディタに切り替わります。

旧エディタから 「Gutenberg」 に戻す場合には旧エディタの右一番下のエディターという項目があり。
そこにある「ブロックエディターに切り替える」をクリックします。

これで切り替えができますので、旧エディタでしか使えないのプラグインをどうしても使いたいという場合はこのようにします。

ただ使ってみた感じでは 旧エディタと新エディタを行き来するぐらいであれば「Gutenberg」を使いこなすべきだと思います。
というのも先程のプラグインを補完するような機能が新エディタにもブロックとしてついているからです。

「Gutenberg」 の基本的な使い方

基本的な使い方は

• タイトルをつける
• ブロックを追加し、文章などの入力
• ブロックごとに装飾をかける
  

ということの繰り返しだけなんですが。
ブロックがたくさんありすぎで・・・・^^;
とりあえずすぐに必要なものを見ていきたいと思います。

その他のブロックの解説は以下の記事で。

ブロックは左上の丸十字をクリックし。出てきたメニューから選んでいきます。

WordPressエディタ「Gutenberg」で用意されている各ブロックの解説　

見出しの使い方

最初に新規追加でエディターを開くと。
タイトルを書く欄にスポットが当たります。
それでタイトルを付けて下書き保存をするとその後その部分にフォーカスをするとパーマリンクが表示され、変更することができるようになります。

見出しはブロック一覧からをクリックし。
以下から設定を行います。

ブロックの追加

見出しを書き終わったら文章を書いたり画像を貼り付けたりしていきます。

文章を書くためのブロック

文章を書く場合はを選択しますが。
このブロックはこんな感じで

「TinyMECacvernced」プラグインを入れて装飾項目を加えても装飾のバリエーションが少ないため。
取り消し線などが必要な場合にはかブロックを使います。
Classic Paragraphやクラシックだと ブロックエディター用の「TinyMECacvernced」 で装飾項目を加えると
ほぼ旧エディタと同じ仕様になります。

また全体の文字の大きさが調整できますし。最初の文字をこのように大きくすることもできます。
段落ブロックにした上で右端のテキスト設定のドロップキャップのボタンを有効にすることで切り替えができます。

画像や動画の挿入

画像の挿入

画像に関しては段楽ブロックにてインライン画像が使えます。
文章と文章の間に画像を入れるもので先程の

取り消し線などが必要な場合には

かブロックを使います。

のように文章内に画像をはめ込むことができます。
これは旧エディタになかったものなので大変に便利です。
ただし段楽ブロックでのみ使用できます。

画像をブロックで埋め込むにはブロックを使います。
画像をアップロードするとその画像の下に「キャプションを入力」とあってそこにコメントを入れられるようになっています。
これも旧エディタにはなかったものです。

また画像を並べることもできます。
これはブロックを使えばできます。

GIFなんかでも様々できます。
これも新しい機能です。
キャプションを入れられますので便利です。

• 

• 

• 

• 

• 

なおこのギャラリーに入っている画像はクリックすると拡大されます。
なので小さめで説明付きの画像などを並べておくには便利です。

動画の挿入

動画を挿入する場合にはブロックを使います。
これは動画をそのままアップすることができますので大変便利なんですが。
動画はファイルが大きすぎる場合はアプロードができません。

なのでリサイズをしてからアップロードをします。
動画のリサイズは本サイトで詳しく説明しているAviUtlなどでもできるんですが。

AviUtil全体の仕組みを概観　最低限使えるようになるための基礎知識

わざわざソフトを立ちあげるのも面倒なので。
オンライン上でリサイズできるものを使うと画像と同じ感覚で貼り付けができてとても便利です。
動画をオンライン上でリサイズするものとしておすすめなのは例えばこれ。
VideoSmaller

• 

• 

• 

（なお上の画像はクリックすると拡大されますので拡大した上でご覧ください。）

こうして圧縮した上で動画を貼り付けていきます。

今までですとサーバーに動画を保存し。
それをvideoタグなどを使って貼り付けていました。
細かい設定をするんだったらそれもいいと思いますが。
とりあえず出来合いでいいと思えばパソコンに保存した動画をそのままアップすることができますので作業が激減！大変便利です。

背景をつける

ただ背景の色を変える

背景についてはただ背景に色を付けたい場合には段落ブロックを呼び出し。
右端の「色設定」から背景色を選ぶだけです。
背景だけでなく文字の色も変えられます。

試しにここの段落ブロックを文字色は赤色、背景色はライトグレイにしてみます。
するとこのようになります。

動画や画像を背景にする

カバーブロックを使えば背景に重ねて記事を書いたりボタンを付けたりできます。
動画のカバー設定で背景の透過率も調整することができます。
普通に文章を書くこともできますし、リンクを貼ることもできます。
見出しもつけることができます。
またオーバーレイ（薄く色で覆うこと）もできます。

以下に一例を示します。

まだ画像を背景にすることもできまして結構使いみちがあると思われます。
画像も上記の動画のやり方と基本的には同じです。

右側にあるカバー設定で画像を動かすこともできますし。
オーバーレイで色を重ねることもできます。
もちろん透過率を調整もでき。
様々テキストを加えたりリンクを貼ることもできますが動画でできたボタンを追加することはできません。

まとめ

ここまでは実際作業をする上での最低限の使い方について見てきましたが。
実際には様々なブロックがありますので。
使えるようになっておくと便利です。
それは次に詳しく見ていくつもりです。

今回はここまで