Gutenbergエディターで記事を書いてみた

Gutenbergエディターに変えてみました。

下が現在の状況です。

  • WordPress5.2.2
  • テーマ SANGO1.8.2 
  • 子テーマ PORIPU1.22
  • プラグインには GutenbergSANGO、 TinyMCE Advanced 、 AddQuicktag

最初はGutenbergのブロックという概念が馴染みがないので、なんだこれ?って思いましたが、いつかはGutenbergにしないといけない日が来ると思います。

ですので、むりやりに新しいサイトを作って慣れる事にしました。その時感じた事、気がついた事などを書いてます。

現在は少し慣れて来たので、過去記事のあるサイトでGutenbergエディターも使うようにしています。

スマホもガラケーから変えた時は慣れるまで1ヶ月ほどかかったけどそれに比べたらまだマシかなーって感じです。文字入力に慣れるのしんどかったので。

WordPress5.2.2バージョンアップ後の変化

前のClassicエディターの時は、例えばタイトルの枠をかっこよくしたいと思うと、一番上のツールバーから何階層もたどって探して持ってきてました。

それが、Gutenbergだとその場で数クリックで選べるのです。

私は同じことの繰り返しがめんどくさかったので、CSSでH2とH3は固定化してましたが、もうそんな事もしなくて良いのです。

以前のClassicエディターで出来たことが、出来ないというかやり方がわからずにそのままってのもあります。

なので全体にシンプルな感じに仕上がってます。あまり凝ったものにすると時間がかかるので、できるだけ記事を書く方に集中して、装飾にはこだわらないでやってます。

入力の癖というか、少し慣れないところもあります。

例 見出しを入力する場合

Classicでは文字を入力選択後⇒見出しを選ぶ

Gutenbergでは、ブロックで見出しを選択後⇒文字を入力する

他にやり方があるのかわかりませんが、慣れましょう。

Gutenbergで過去記事のリライトはどうなる?

新しい記事を書く時にはもちろん基本Gutenbergなんですが、ブロック単位でClassic paragraphを使う事もできます。では過去に書いたページはどうなるのでしょう。

過去の記事を一つにまとめてブロックとして扱う

過去記事はClassicで一つのブロックになるので、そのままClassicでリライトできます。

過去の記事を開いてみると一つのブロックとして扱われています。そしてエディターはClassicになっていました。

ブロックの追加をクリックすると、ページ全体がClassicになっていました。なのでクイックタグも使えます。

Classicのままでやり方は以前と同じですけど、GutenbergになれるとClassicがやりにくいんです。

新しいページもClassicを使える

Gutenbergは、まだ進化の途中なので前のClassicでやっていたことが出来ない場合もあります。

Gutenbergで記事を書いてるけど、部分的にClassicも使いたい。

新ページ内では混合もできる

新しいページはGutenbergエディターになるが、ページ内のブロックごとにClassicも使えその場合 ClassicParagraph というものになる。

過去記事は基本Classic

過去記事のリライトは何もせずともそのままClassicを使えます。

ページがまるごと一つのブロックとして、Classicエディターで編集ができるようになってますので、リライトするのは簡単です。

でも、Gutenbergで慣れて来ると、Classicが変にまどろっこしいので、過去記事のページもGutenbergに変えたいという事も出てきます。

せっかく新しいエディターになって、不要なプラグインも削除できると思ったのですが、まだ経過措置みたいな感じになっています。

いまは両方のプラグインが入って、重くなるかもしれませんね。

Gutenbergにして便利になった事

Gutenbergを使ってみてだいぶ慣れてきました。慣れてしまえば便利さに離れがたくなります。

よく使うものがすぐ出てくる

見出しや枠や吹き出しなど、たくさん使えるけどいつも同じものを使ってますので、いつもよく使うものだけがササッと出てくれれば一番やりやすいのです。

Gutenbergでは、よく使うものというブロックをクリックするとよく使うものが出てきますので、すごく時間短縮になります。

でも、使うたびに移動してるので、あれ何処に行った?って感じにもなりますが、それよりも使い勝手が格段によくなりました。

文章の移動や削除

文章の移動もコピペしなくてもいいのです。文章がひとまとまりになってるので、ドラッグでササッと移動できます。

下は移動したい文章をドラッグした状態です。一つにまとまった状態で上へ移動ができます。文章移動が楽になりました。

HTMLでずらずら~っと30行くらい長くなる場合、それをまるごと移動したいなーって思っても大変でした。切り取りと貼付けするんですけどね、長いとどこからどこまでか分かりにくくて・・・。

でもブロックと言う概念なので、それもひとかたまりになってサクッと移動できます。

アフィリエイトをやっておられる方なら、わかると思いますがカエレバを使っているとHTMLの文章がとてつもなく長くて、すごく見にくい状態でした。

それもブロックでひとかたまりになってくれるので、削除する時に間違えて他のところまで消さなくてもよくなりました。

削除する時も、ブロック単位でまとまってるので、ブロックの左端にカーソルをおいてBSかDeleteキーを押すだけでそのブロックは全部消えます。

画像の挿入が簡単

今までは、いったんメディアライブラリに保存してから挿入してましたので、書いてる作業を中断する感じでした。

それが、書いてる場所から画面を変更することなくサクッと挿入ができるようになりました。(予め画像は編集が終わった状態の場合)

ブロックの中の画像をクリックして、PCのファイルから選んだらいいだけなので、クリック数が少なくていいのは、ストレスがなくてホント気持ちがいいです。

画像をたくさん使う場合はすごく便利です。何度もメディアライブラリへ行ったりきたりしなくて済みます。

プラグイン( TinyMCE Advanced )を使う

Gutenbergの前のバージョンでは、マーカーを使う事ができなかったようですが、 プラグインを使えば、マーカーもこのように使えます

前はブロックの概念で、バックの色を変えると文章全部の色が変わってましたが部分だけ色を付けることができます。

下の図はTinyMCEのエディター設定の画面です。

  • 左の矢印はGutenbergの編集画面
  • 右の矢印はClassicの編集画面

それぞれツールバーの設定ができます。

プラグイン エディターの設定
プラグイン エディターの設定

ブロックの使い方

今までのClassicエディターの時は、画面の上部にツールバーがあってそこから引っ張ってましたが、Gutenbergエディターになってからは、ブロックごとにその場所でツールバーが必要な時に出現すると行った感じになってます。

ブロック内のツールバー

ブロックの上下真ん中あたりにプラスのアイコンがあります。上のプラスをクリックすると上に挿入、下をクリックすると下に新たなブロックを挿入できます。

ブロックの表示
ブロックの表示

ブロックのプラスをクリックすると、下のようなアイコンが出ます。私はテーマがSANGO仕様なので、そのアイコンも出てきました。( SANGO Gutenberg 使用)

ブロック画像001
ブロック001

また、いちいちクリックしなくても、下にはEnterを押すだけでブロックが出現します。

ちなみにSANGOの場合は、上のような背景水色の点線の見出しが、右横に出ます。

この場合は、見出しのスタイルでステッチ、見出しタグでH2,アイコンもつけることができます。以前はCSSで設定してましたので、同じタイトルの絵になってましたが、これからは色もアイコンも別々にすることができます。

その下にもテキストカラーや背景カラー、フォントの大きさなどを選ぶ事ができます。

ブロック 見出し
ブロック 見出し

これはすごく書きやすくなりました。

画像の挿入方法

例えば、さっきも書きましたが、画像の挿入が楽になりましたので説明します。

上のブロック内のプラス⇒画像⇒アッロードで挿入できます。Classicは一度メディアライブラリに挿入してからでしたので、その分クリック数が減りました。

また、Classicでは画像の編集画面を開いてから操作していたことが、一緒に画面右側に一面に出るので、サクッと Alt テキスト (代替テキスト) を入力したり、SANGO仕様では枠線もつけれました。

ブロック002画像
ブロック002 画像

でもまだ、慣れていないところもあって手探り状態でやっています。

過去記事をリライトする場合

一番心配だったのが、過去記事がどうなるかでした。私は、過去記事にあたらしく追加したり、内容を書き換える事も多いです。

サイト自体をWordPress5.2.2にバージョンアップしたら、過去記事のエディターは、Classic Paragraphというエディターになってました。

Classicというのは以前のエディターの事です。

ClassicにParagraphという文字がくっついてきました。

https://mitukete.info/wp-content/uploads/2018/09/illustrain01-tori03.png

え?どこが違うって思いますよね?

思うにはClassicParagraphというのは、Gutenbergエディター内でも使える、Classicエディターという意味ではないでしょうか?

このブロックはGutenbergで、このブロックはClassicParagraphでと、まぜこぜになると思います。

でも、過去記事は前のままでリライトする事ができます。新しい記事をGutenbergで書いていると、つい過去記事をリライトしている時、新しいエディターのくせがついてしまうので当分めんどくさいかもしれませんね。

出来ないこと

出来ないことの一つに、内部リンクを貼ってたのですがIDを入力するとサムネイル入のリンクが出来なくなったことです。

テーマSANGO仕様だったのですが、そんな場合にClassicParagraphを使えというんでしょうけどね。

混合したら、あとでプラグインを削除できなくなるので、使いたくないのですが・・・いつか、Gutenberg一本でやると思うのです。

両方使えると、それでなくても新しいエディターになってやりにくい人がいるのに、ますますわからなくなりそうですね。

ちなみに、Gutenberg内のClassicParagraphってこんな感じになります。

https://mitukete.info/wp-content/uploads/2018/09/illustrain01-tori03.png

わけわかりませんよね

また、わかったことがあれば自分の為に頭の整理に書いて置こうと思います。何かのお役に立てればうれしいです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です