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

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

wordpressのcocoonでクラシックエディタからブロックエディタに移行するシルバニアショコラうさぎブログPCお道具箱
スポンサーリンク
スポンサーリンク

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


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

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

画像挿入について

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

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

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

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

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

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

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

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

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


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

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

見出しについて

わたしはこれまでも、
H2だけは別のブロックで作っていました。

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

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

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

これが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の自動整形機能をオフにしたい

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



ブログランキングに登録しました。
1日1クリックしていただけると順位が上がります☆彡




ブログPCお道具箱
スポンサーリンク
この記事をシェアする
うさぎ先生をフォローする
スポンサーリンク
うさぎ先生のひきだし。

コメント

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