はじめに

ブロックエディタとは?イメージを掴んで最速マスター!ブロックエディタの使い方(超初級編)

2022年5月23日

ブロックエディタを初めて触る人に向けた記事です。

世間ではブロックエディタの操作につまずく人が多いようです。たしかにちょっと操作方法にクセがあり最初は戸惑うかもしれません。でも大丈夫!これからブロックエディタを使う上で知っておくと便利なある考えをお伝えします。この考えを頭に入れておけばブロックエディタを怖がる必要はありません!


どうも はじめまして。ブロックエディタを使い始めて1年以上のワプロスです。僕もブロックエディタを使い始めた当初は使い方がわからず苦労しました。それでもなんとなく使い続けていくなかである日 ある発見をしたのです!この考えを意識するようになってからブロックエディタがすんなり使えるようになりました。

その考えを今回お話しします。ブロックエディタを触る前に一読してください。

みなさんが1日も早くブロックエディタを使いこなせるようになることを祈っています!

ブロックエディタとは!

本題に入る前にブロックエディタとは何か軽く説明をしておきます。

「ブロックエディタ」とは2018年にリリースされたWordPressのエディタ(編集ツール)のことです。操作画面と編集方法が一新されました。

ブロックエディタはGutenberg(グーテンベルク)という愛称があります。活版印刷を発明したグーテンベルクさんにあやかってこの名前が付けられました。ブロックエディタとグーテンベルクは同じものとお考えください。

昔のエディタ(クラシックエディタ)はプログラミング(HTMLやCSS)をある程度 理解しなければ操作できませんでした。ところがブロックエディタではなんとある工夫によってプログラミングが全くできない人でも記事が書けるようになったのです。

その工夫というのがツールの名前にもなっている「ブロック」という考えです。次でこの考えについて詳しく見ていきます!

ブロックエディタはノートに付箋を貼っていくイメージ!

ここからが本題です。

旧エディタ(クラシックエディタ)のイメージ

旧エディタ(クラシックエディタ)のイメージはノートに直接文章を書いていくイメージ

こちらは旧エディタ(クラシックエディタ)のイメージです。

昔のエディタはこのようにノートに直接文章を書き込んでいくイメージでした。

ブロックエディタ(グーテンベルク)のイメージ

ブロックエディタ(グーテンベルク)のイメージは付箋に内容を書いてそれをノートに貼り付けていくイメージ

そして、これがブロックエディタのイメージです。付箋が見えますね。

これがブロックエディタで記事を作るイメージです。このイメージをぜひ掴んでください。

記事を作る手順はこんな感じです。まず付箋を1枚 持ってきてその中に文章や画像を書きます。

そしてその付箋をノートに貼り付けます。また別の付箋を持ってきて....と、この作業を繰り返してノートを完成させます。

ブロックエディタを現実世界でやってみるとるとこんな感じです。

このときの付箋にあたるものこそブロックです。「付箋=ブロック」とお考えください。

記事を書く方式が直接書く方式から付箋を使う方式になって記事作りが楽になりました。次では付箋方式がもたらすメリットをお伝えします。

ちなみに 実際にサイトを表示するときは付箋(ブロック)は見えないのでご安心を。

ブロックエディタのメリット

付箋方式にはこんないいことがあります。

作業が単純明解になった

一つ一つのブロックが独立しているので作業が「作って、貼る」という単純明快なものになりました。

その結果、プログラミングを使うことなく記事を完成させることができるようになりました。

入れ替えが楽

付箋(ブロック)方式だと順番の入れ替えるときに楽です。

記事の作成時には頻繁に文章や画像の入れ替えを行いますよね。そんなときに付箋(ブロック)方式は便利です!

上ボタンや下ボタンを押すだけでスルスルと順番を入れ替えることができます。

エラーが起きにくい!

ブロックエディタはエラーが起こりにくい構造です。ブロック一つ一つが独立しているのでエラーがあってもそこだけエラーが起き「エラーの総崩れ」が起こりにくくなりました。

旧エディタを使っているときは画面が真っ白になったりレイアウトが崩れたりしていましたがブロックエディタではエラーをあまり見なくなりました。

ブロックエディタのデメリット

初心者の人はここは読み飛ばしてOKです。

ブロックエディタはいいとこばかりかというとそうでもありません。使いやすさを追求したあまり使いにくくなった部分もあります。

たとえば要素にstyle(style=".....")を付け足したいときが不便です。styleを追加しようとすると何が起こるかというと正しい文法と認識されずstyleが勝手に消されてしまいます。HTMLコードに変換して強引にstyleを追加する方法もありますが一部のブロック(カラムブロック等)ではそれさえできない仕組みになっています。

HTMLコードを直接 編集できる人にとっては細かいカスタマイズができずストレスが溜まると思います。

ブロックエディタはHTMLやCSSがわからない人に優しいエディタといえます。逆に旧エディタ(クラシックエディタ)に慣れた人にとっては慣れるまで余計に時間がかかるエディタとなるでしょう。

まとめ

以上、ブロックエディタのかんたんなイメージをお伝えしました。

「ブロックエディタを使うときは付箋をイメージしましょう。」ここで言いたいことはそれだけです。

そうすればきっとすぐにブロックエディタをマスターできると思いますよ。

-はじめに