WP無料テーマCocoon『旧エディタ』『ブロックエディタ』の比較

Cocoon
スポンサーリンク
るんぴあ
るんぴあ

今回はCocoonを利用して記事を入力する時の方法、【エディタ2種類】について使い心地を比較してみたよ!

コップ先生
コップ先生

今からブログを始めるあなたが自分に合った入力方法を検討できるようにしっかり比較して、解説するぞ!

この記事を読んで分かること

WordPress Cocoon(ワードプレス コクーン)の記事の編集方法〔エディタ〕

旧エディタ(クラシックエディタ)の使用方法と概要

ブロックエディタの使用方法と概要

【Wordpress Cocoon】ブロックエディタと旧エディタの比較

WordPress Cocoon(ワードプレス コクーン)で記事を入力する方法は2種類あります。

  • 旧エディタ(クラシックエディタ)
  • ブロックエディタ

記事入力方法『旧エディタ』と『ブロックエディタ』の切替方法

『旧エディタ』と『ブロックエディタ』の切替えは、Cocoon設定の【エディタ】より変更が可能です。

ダッシュボート【Cocoon設定】>【Cocoon設定】>【エディタ】>『Gutenberg』から変更

・チェックを外して【変更を保存】⇒『旧エディタ』モードになる

・チェックをつけて【変更を保存】⇒『ブロックエディタ』モードになる

るんぴあ
るんぴあ

私はもともと『旧エディタ(クラシックエディタ)』の愛用者だったの。旧エディタは、表示がシンプルで分かりやすいので初心者でも簡単に使える仕様なんだ!


だけどね…今は『ブロックエディタ』に乗り換えたのよ…。

コップ先生
コップ先生

どうして『旧エディタ』から『ブロックエディタ』に乗り換えたんじゃ?

るんぴあ
るんぴあ

それはね…『ブロックエディタ』の方がカスタマイズのできる幅が広いから…!(装飾の多さに惹かれたのよ!


だけど正直、『ブロックエディタ』操作法に慣れるまでが大変だったわ…(汗)

コップ先生<br>
コップ先生

たしかに、装飾で出来ることは『ブロックエディタ』の方が多い!

じゃが、それが活かせるかはあなた次第じゃ!

るんぴあ
るんぴあ

え!それってどういう意味?

コップ先生
コップ先生

装飾を使いすぎてページが見づらくなると、かえって逆効果なんじゃよ。あれもこれも使ってみたい…初心者が陥りやすい罠じゃ。


記事を書く際には、ユーザーが見やすいシンプルな装飾を心がける必要があるんじゃよ。

るんぴあ
るんぴあ

ぎくっっ!
あれもこれも使ってみたい…私の事じゃないか!

『旧エディタ』VS.『ブロックエディタ』タイトル・見出しの比較

『旧エディタ』と『ブロックエディタ』のタイトル、見出しの入力法の違いを見ていきましょう。

タイトルの違い

タイトル欄の比較

『旧エディタ』

タイトル枠に文字を入力

右上に『タイトル文字数』の表示が出る

タイトルを入力して〔Enterキー:自動保存〕すると【パーマリンク編集】がタイトルボックスの下に表示される

パーマリンクは【編集】をクリックすると編集できる

パーマリンク文字列をクリックすると記事の「プレビュー画面」が開く

『ブロックエディタ』

「タイトルを追加」と表示されているボックスにタイトルを入力する

「下書き保存」をすると【パーマリンク】がタイトルブロック上に表示される※もしくは自動保存されるまで待つ(10秒画面を放置すると自動保存される)

パーマリンク編集は【編集】をクリックするとできる

パーマリンク文字列をクリックすると記事の「プレビュー画面」が開く(アイコンが追加されたが、旧エディタと同じ仕様)

『旧エディタ』VS.『ブロックエディタ』違い

旧エディタではタイトルの文字数確認ができる

ブロックエディタは一度下書き保存しないと【パーマリンク編集】が出てこない

るんぴあ
るんぴあ

タイトル文字数の確認が、ブロックエディタではできないのね…


ところでタイトル数って重要なの?

コップ先生
コップ先生

タイトル数は重要じゃよ。だいたい32文字前後がよいと言われておるんじゃ


『ブロックエディタ』ではタイトル文字数が見れないが、ブロック横いっぱいで32文字入るのじゃ。


るんぴあ
るんぴあ

そうなのね!じゃあ、『ブロックエディタ』を使う時には、2行目に文字が表示されないような長さでタイトルを考えればいいわね!

見出しの違い

『旧エディタ』

ツールバーの左上から、カーソルで指定した行の【見出し】指定

見出しの種類はH1~H6(見出し1~見出し6)まで

『ブロックエディタ』

見出し専用のブロックを開き見出し文を入力する


他にも、段落のブロックから見出しに変更する方法もある↓



文字入力してからボックスの【段落】>【見出し】に変更

ボックス上のツールバーから指定できる見出しはH2~H4(見出し2~見出し4)の3種類

※それ以降(H5~H6)とH1は画面右の『ブロックエリア』で指定できる

『旧エディタ』VS.『ブロックエディタ』違い

『旧エディタ』では使用できる見出しが全6種類

『ブロックエディタ』ではツールバーから使用できる見出しは全3種類

操作法は『旧エディタ』の方がシンプル(何度もクリックせずに見出しが指定可能)

<br>るんぴあ

るんぴあ

ブログを書くときの見出しって実際に何種類まで使っていいの?

コップ先生
コップ先生

多くのブロガーは『見出し2~見出し4』までしか使わない。多種類の見出しを使用すると、文の構図がごちゃっとなるであろう?


入力方法(エディタスタイル)はおぬしの好みで選べばよいが、見出し1と見出し5、6は使わずに文章を構築できるとよいぞ!

『旧エディタ』VS.『ブロックエディタ』段落と改行(空白)の違い

『旧エディタ』と『ブロックエディタ』の段落の入力法と改行の方法の違いを見ていきましょう。

『旧エディタ』

旧エディタの記事編集

そのまま入力すれば『段落』の状態で入力される

[Enterキー]で改行して文章間の空白がつくれる

ビジュアル画面に表示されている通りの記事が作れる

『ブロックエディタ』

そのまま入力で『段落』ブロックが開き、入力できる

⊕マーク>【段落】を選択で、『段落』を入力するブロックSimplicity | 内部SEO施策済みのシンプルな無料WordPressテーマが開く

[Enterキー]の改行はブロックが変わるだけで、行間に空白はできない

入力画面で見ている外観は、かならずしも投稿記事に反映されない(旧エディタのビジュアルモードとは違う)

るんぴあ
るんぴあ

『ブロックエディタ』で[Enterキー]を押すと、新しい入力ブロックに移行するだけなのね!


ちなみに『ブロックエディタ』で空白改行したいときはどうすればいいの?

コップ先生
コップ先生

方法はいくつかあるぞ!

[shiftキー]+[Enterキー]

段落ボックスの中で[shiftキー]+[Enterキー]を押すと、1行分、空白改行できる

スペーサーを利用する

⊕をクリックして【スペーサー】を選択する


『旧エディタ』VS.『ブロックエディタ』違い

改行の方法が違う

・『旧エディタ』は[Enterキー]のみで改行、空白改行が可能

・『ブロックエディタ』は[shift]+[Enter]で1行改行できる

※Enterキーのみだと、次の段落ブロックに移動する

『旧エディタ』VS.『ブロックエディタ』文字数確認方法

『旧エディタ』と『ブロックエディタ』は記事の文字数を確認する方法も違います。

『旧エディタ』

タイトルの文字数はタイトル入力欄の右上

記事文字数は入力画面の左下

『ブロックエディタ』

タイトル文字数の表示はない

記事文字数と記事の概要は画面左上【i】「コンテンツ構造」から見れる

・語:記事の文字数

・見出し:見出しの総数

・段落:段落の数

・ブロック:使用しているブロック数

『旧エディタ』VS.『ブロックエディタ』違い

文字数表示エリアと表示内容が違う

『旧エディタ』VS.『ブロックエディタ』ツールバーの違い

『旧エディタ』と『ブロックエディタ』の入力法以外の最大の違いはツールバーメニューとその内容の違いです。

『旧エディタ』

よく使用するものはアイコンとなってツールバー上にある

それ以外の機能はリストボックス内にある

画像アップロードは写真枠のアイコンより行う

記事入力エリアの上部にツールバーが表示されている

『ブロックエディタ』

⊕から作成したい形式のブロックを選び、編集する

各ブロックの上にツールバーがある

ブロック上ツールバーを画面上のみに表示(旧エディタのように)したければ、画面右上の『詳細設定』より『トップツールバー』を選択する


『ブロックエディタ』のツールバーの詳細は以下の通り


ツールバーだけでなく、画面右にある『ブロック』エリアでも、より細かな設定が可能(吹き出し位置や文字色、背景色、線の色など)

『旧エディタ』VS.『ブロックエディタ』違い

『旧エディタ』はシンプルな使い心地

『ブロックエディタ』はよりカスタマイズできる仕様になっているので複雑

るんぴあ
るんぴあ

『ブロックエディタ』は本当に多機能で、新しい機能が定期的に追加されているの。


個人的な意見だけど、記事の装飾にこだわりたい人は、今後の事を考えて最初から『ボックスエディタ』で記事作成できるように練習しておいたほうが良いよ!

コップ先生
コップ先生

『ブロックエディタ』でも『旧エディタ』モードで入力できるぞ!

装飾以外の編集は『旧エディタ』の方が楽って人も多いから、使ってみてはどうかのぉ

【⊕マーク】をクリック>【フォーマット】>【クラシック】で、旧エディタモードの入力ブロックが開く

※上に挙げた【クラシック】のボックスの中には他のボックス(ブロックエディタモードの画像や装飾)を入れ込めないので注意!

コップ先生
コップ先生

『旧エディタ』と『ブロックエディタ』の比較はこんなとこじゃ。

あなたはどちらの入力モードが好きかな?

るんぴあ
るんぴあ

装飾は最低限使えればいいっていう人は『旧エディタ』

新しい装飾を取り入れたいって人は『ブロックエディタ』がオススメだよ!⇒ブロックエディタで出来る装飾についてはこちら

【Cocoon『旧エディタ』『ブロックエディタ』の比較】まとめ

まとめ
るんぴあ
るんぴあ

コップ先生のセクシー秘書リムが、当記事のまとめをご案内します。

セクシー秘書
セクシー秘書

お任せください。では参ります。

Cocoonの旧エディタとブロックエディタの比較をすると…

WordPress Cocoon(ワードプレス コクーン)では『旧エディタ』と『ブロックエディタ』の2種類の入力方法があります

入力方法の切替はダッシュボート【Cocoon設定】>【Cocoon設定】>【エディター】から行います

Gutenbergの✔をつけると『ブロックエディタ』、外すと『旧エディタ』モードになります

ブログを読みやすくするために、シンプルな装飾を心がけましょう

タイトルや文字数の確認、パーマリンク編集、見出しなどは、多少の違いはありますが『旧エディタ』『ブロックエディタ』共に同じ仕様です

『旧エディタ』と『ブロックエディタ』の違いは改行・行間の空白の作り方です

・旧エディタ:[Enterキー]で改行、行間の空白が作れる
・ブロックエディタ:[shiftキー]+[Enterキー]で改行、行間の空白が作れる



両者の最大の違いは、ツールバーの仕様です

・旧エディタ:よく使う装飾はツールバーにアイコンとして表示され、それ以外はリストボックス形式になっている(背景色や文字色はある程度決まっている=限りがある)

・ブロックエディタ:指定して開くブロック自体が装飾に特化した専用ブロックになっており、背景色や文字色などのカスタマイズが画面右のブロック編集画面より自由にできる(カスタマイズの幅が広い)

ブロックエディタで『旧エディタ(クラシック)』入力が使えます

・クラシックエディタ⇒ブロックエディタ変更も可能(ブロック上のツールバー【一番左:ブロックに返還】クリック)

セクシー秘書
セクシー秘書

あなたに合った入力方法はどちらでしたか?

どちらのエディタも使い慣れるまで時間がかかりますが、練習あるのみです!応援しています♡

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