ブログランキングに登録中です。クリックしていただけると励みになります♪
スポンサーリンク

初ブロックエディタ!クラシックエディタを使わずに書く、Gutenbergで初めての記事♪

wordpressのcocoonでクラシックエディタからブロックエディタに移行する違いCocoonデザイン

2月末にブログを始めて、3ヶ月が過ぎました。

わたしはこれまで、クラシックエディタでブログを書いていました。

しかし・・・クラシックは2021年でサポートが終了する予定であるということと、新しいエディタの方がやれることが多いような気がしたことから、ブロックエディタ(Gutenberg)への移行を試みました。

スポンサーリンク
スポンサーリンク

画像挿入について

《クラシックエディタ》は、この画面です↓

wordpressのcocoonでクラシックエディタからブロックエディタに移行する

・・・というように画像を入れるためには、ブロックエディタでは《画像ブロック》というブロックを、その都度作ります。

wordpressのcocoonでクラシックエディタからブロックエディタに移行する

このボタンを押すと出てきます。

wordpressのcocoonでクラシックエディタからブロックエディタに移行する

クラシックエディタのほうが、ぱぱっと感覚的に入れられた気がします・・・。

また、クラシックだと編集画面からすぐに画像の編集画面に移動できて便利だったのですが、ブロックエディタだと一旦《メディアライブラリ》を開いてから編集画面に行くみたいです。

wordpressのcocoonでクラシックエディタからブロックエディタに移行する

大きな問題ではありませんが・・・こちらも感覚的にという意味ではクラシックの方が使いやすかった感じはあります。

一方、画像や文章の場所を途中で変えたい時には、ブロックエディタの方がすぐに移動ができていいですね。

見出しについて

わたしはこれまでも、大きな見出しであるH2だけは、本文とは別のブロックで作っていました。

しかしブロックエディタの場合は、H3やH4を入れる場合も《見出しブロック》をその都度作る必要があります。
画像挿入もそうでしたが、その都度その都度、ブロックを作るんですね。

いわゆる、普通に文章を打ちたい。この部分は《段落ブロック》です。

wordpressのcocoonでクラシックエディタからブロックエディタに移行する

これがH2

これがH3

これがH4です

段落、H2、H3、H4を書くたびに、それぞれブロックを作るんですね。

ブログカードについて

shift+enterの場合、文字の羅列になる

Cocoonのブロックエディタへの対応については、こちらの記事に詳しくまとめてくださっています。
https://wp-cocoon.com/category/theme/making-article/gutenberg/
このようにshift+enterだと・・・同じ《段落ブロック》のまま、改行だけされます。
その影響からか、自動でブログカードにはなりませんでした。
URLがリンクされておらず、文字の羅列になっていると思います。

enterの場合、リンクされる

Cocoonのブロックエディタへの対応については、こちらの記事に詳しくまとめてくださっています。

Cocoonのブロックエディター(Gutenberg)対応について
「Cocoon-Blocks」プラグイン情報等。

enterでブロックを区切ってからURLを入れると《埋め込みURL》という別ブロックが出来ました。

wordpressのcocoonでクラシックエディタからブロックエディタに移行する

「このコンテンツを埋め込めませんでした」と出ますが、ブログカードとしてはどうやらこれで機能してるようです。

でもなんとなく気になるので・・・「リンクへ変換」するとこんな表示になりました。

wordpressのcocoonでクラシックエディタからブロックエディタに移行する

どちらの入れ方でも、ブログカードとして表示されました。

また、《ブログカード》のブロックを作ると、「あわせて読みたい」「参考記事」などのラベルをつけることが出来ます。

wordpressのcocoonでクラシックエディタからブロックエディタに移行する
wordpressのcocoonでクラシックエディタからブロックエディタに移行する

ブロックを作る、という手間の数は同じなので、今後はこのラベル付きで書いた方が読みやすさにつながるかな?と思いました。

Twitterのリンクについて

TwitterのURLを貼ると、こんな感じ。

TwitterとかYouTubeとか、それぞれに対応した《埋め込みブロック》が自動で作られるようです。

wordpressのcocoonでクラシックエディタからブロックエディタに移行するTwitterカード
wordpressのcocoonでクラシックエディタからブロックエディタに移行するTwitterカード

ブロックを複数選んで移動

shiftを押しながらブロックを選ぶことで、複数のブロックを同時に選ぶことが出来ました。

wordpressのcocoonでクラシックエディタからブロックエディタに移行する

「この見出しの内容を、丸ごと動かしたいなぁ」という時に便利ですね。
移動に関しては、クラシックだとやりづらかったので、ブロックエディタの方が楽です。

改行幅について

これまでクラシックだと・・・enterだと改行が表示に反映されていなかったり、shift+enterでも再編集すると消えてしまったりしていました。

少しだけ書き足したい、なんてときに、すべての改行にshift+enterを入れ直す必要がありこれがかなり手間だったんですよね。ブロックエディタへの移行を考えた大きな理由でもあります。

こちらの記事で詳しくまとめてくださっているのですが、いわゆる捨てブロックを作ってもなんだかわたしはうまく出来なくて・・・。

再編集する時にうまくいかないっていうのが、身動きを取りづらくしていたんですよね。

今回は、cocoon設定から改行の数字もいじってみました。

これまでの設定がこちら

wordpressのcocoonでクラシックエディタからブロックエディタに移行する
wordpressのcocoonでクラシックエディタからブロックエディタに移行する
同じ段落で、改行のみした部分
wordpressのcocoonでクラシックエディタからブロックエディタに移行する
段落を分けた部分(ブロックがそれぞれ異なる)

shift+enterは改行(いわゆる<br>)で《行の高さ》に関わります。

enterは段落変更(いわゆる<p>)で《行の余白》に関わります。

設定変更後がこちら

cocoonでクラシックエディタからブロックエディタに移行する
cocoonでクラシックエディタからブロックエディタに移行する
同じ段落で、改行のみした部分
cocoonでクラシックエディタからブロックエディタに移行する
段落を分けた部分(ブロックがそれぞれ異なる)

広げてみました。
スマホだとこんな感じです。

cocoonでクラシックエディタからブロックエディタに移行する

これまでわたしが書いていた文章は、段落変更が多くて読みづらかったんじゃないかな?と思うのですが・・・
今回の調整で改行段落変更使い分けができるようになりそうです。

たくさん開けたい時

<br>を3回入れる(shift+enterを3回押す)感じにすると↓のようになります。



これまでのクラシックでは、shift+enterを3回押しても再編集するとすべて消えてしまっていました。
しかしブロックエディタであれば、保持されていました♪

たくさん開けたい場所は、これでいいのかな?と思ったのですが、SEO的にあまり良くないそうです。
Googleに見つけてもらいにくくなってしまうのだとか。

ここで「自動整形機能の停止をするといいのでは?」と気づきました。

もしやわざわざクラシックからブロックに移行しなくても、この機能の停止だけでいいのでは・・・?という気がしてきましたが・・・(笑

そんなことを思いつつ・・・TinyMCE Advancedを見てみたのですが、正直Cocoonであればこれを入れなくても十分すぎるほど機能が整ってるので、段落のためだけに入れる感じになってしまうなぁっていう印象です。

おわりに

使ってみると、段落の入れ替えはスムーズだし、ブログカードもスムーズに貼れるし、ブロックエディタでも書けそうだなと思いました。

現在残っている、わたしなりに解消したい点は次の2点です。

①オレンジの蛍光ペンを使いたい
②TinyMCE AdvancedなしでWPの自動整形機能をオフにしたい

もう少し調べてみる余地はありますが、なんだか新しい技を覚えたような楽しい気分です♪

続きの記事はこちら

コメント

タイトルとURLをコピーしました