ブログを書いている人にとって、ブロックエディタは使いづらいと言われています。しかし、使い慣れれば、簡単にきれいな投稿画面を作成可能です。
- まだブロックエディターに慣れていなくて、使いこなせていない。
- まだクラシックエディターの方がやりやすい。
こう言った声をよく聞きます。
やはり、ワードプレスの独特な操作になりますので、なかなか参考資料が見つからないかもしれません。
そこで今回の記事では、ブロックエディタでの記事作成から公開までのエディタの使い方や、各ブロックの基本操作をお伝えしていきます。
この記事を最後まで読むことで、ブロックエディターでの投稿方法に関して、完全に理解して、使いこなせるように作成していますので、参考にしてくださいね。
それでは早速ご説明していきます。
ブロックエディターを使うメリットは？
- 変更が簡単になる
- 綺麗に見せることができる
この2点です。
変更が簡単でいうと、ブロックを作成後、そのブロックの仕様を変更する場合、画像のように文字色や文字サイズを変更することができます。
クラシックエディターでも可能ですが、UIが少し見にくかったり、使い勝手が悪い部分があったので、使いやすさは劇的に改善しています。
また、綺麗に見せることができるに関しては、デフォルト準備されているブロックのパターンを使用することで、可能となります。
ブロック追加時にブロックとパターンが選択できるので、その中のパターンを選択します。
ただ投稿するだけでは表現するのが難しい画面も、パターンを使うことによって、テキスト＋画像の配置方法や画像の表示方法をおしゃれに表現することができます。
ブロックエディターの基本操作
1.ブロックを追加
ブロックを追加していきます。
『ブロックを追加』→『段落』の順に選択します。
段落以外にも見出しや画像、Youtube動画のようなブロックの追加も可能です。
2.ブロックの変換
段落を追加した後、下記画像のタブを使って変更できます。
ブロックの変換は、①スタイル変更で可能です。
スタイル変更では、見出し、リストと言ったブロックで選択することができます。
そのほかの変更についても、説明していきます。
よく使うのは、②配置、⑥続きを読む、⑦オプションです。
⑦オプションに関しては、4.ブロックの複製で使用します。
3.ブロックの移動
ブロックの移動は、②ドラックと③移動を使用します。
ブロックは段落ごとに分かれているので、段落の中に入ってる文章や画像をまとめて移動させることが可能です。
4.ブロックの複製
⑨オプションから操作していきます。
⑨オプションをクリックして、ポップアップで操作画面が表示されたら、『コピー』もしくは『複製』をクリックします。
5.ブロックの削除
ブロックの削除はブロックの複製同様、⑨オプションを選択して行います。⑨オプションを選択後、『ブロックを削除』を選択することで、ブロックを消すことが可能です。
6. HTML追加方法
HTMLを追加したい場合や、HTMLを直接入力したい場合は、『HTMLとして編集』から追加することができます。
また、カスタムCSSでデザインの装飾を入れたい場合は、クラスを追加します。
クラスを入力しなくても、装飾は可能なのですが、この段落のみ装飾を追加したい場合は、入力すると管理が楽になりますので、やってみてくださいね。
7. 再利用ブロックの作り方
ブログを作成する際に、『お知らせ』や『リンク』など同じブロックを何度も作成する際、再利用ブロックに登録しましょう。
再利用ブロックの方法は、⑨オプションから『再利用ブロックに追加』を選択。
その後、ブロックの名前を入れます。
ブロック追加時にブロック・パターンと同じ列のタブにの『再利用ブロック』が選択できるようになりましたので、使用するブロックを選択しましょう。
注意点として、追加したブロックをそのまま編集すると、全ての投稿が編集されてしまいます。
なので、個別に設定したい場合は、『通常のブロック』に変更をして編集するようにしてくださいね。
Cocoon独自のブロックに関して（準備中）
まとめ
ブロックエディターを使うメリットと基本的な操作方法についてご紹介しました。
ブロックエディタ ーはテーマによって独自のものがあります。
なので、今回ご紹介したブロック以外にも便利な機能を持つブロックがあればそちらも合わせて、積極的に使いましょう。
クラシックエディターではできないワードプレスの使い方なので、ぜひ使い慣れて、より良いブログが作成できるように挑戦しててくださいね。