ブロックエディターの使い方 #01: 基本編


ブロックエディターの使い方をご紹介するシリーズの第1回目、基本編です。ブロックとはなにか、ブロックの分類、追加や移動方法などの概要を紹介します。

学習目標

  1. ブロックエディター、WordPress エディター、Gutenberg の違いを理解する。
  2. WordPress コアにデフォルトで含まれるブロックのカテゴリーにはどんな種類があるかを知る。
  3. ブロックの追加・移動方法にはどんな物があるかを知る。
  4. ブロックツールバーの用途を理解する。
  5. ブロック追加オプションの表示方法と用途を理解する。

理解度チェック用質問

  1. ブロックエディター、WordPress エディター、Gutenberg はどのように違いますか ?
  2. テキスト、メディア、デザイン、レイアウト、ウィジェット、埋め込み、共通カテゴリーのうち、WordPress 5.7 現在で存在するカテゴリーはどれですか ?
  3. ブロックの追加方法のうちの1つを説明してください。
  4. ブロックの移動方法のうちの1つを説明してください。
  5. ブロックツールバーに含まれるオプションの例を挙げてください。

トランスクリプト

ブロックエディターの使い方シリーズへようこそ
この動画は基本編です
ブロックとは何か、ブロックの分類、
ブロックの追加や移動方法などの
概要をご紹介します
まず、ブロックとはそもそも何なのかというのを
おさらいしたいと思います
ブロックというのは WordPress 5.0から新しく導入された
ブロックエディターというものでコンテンツを追加するための
コンポーネントとなっています
コンポーネントって何かというと、構成要素をなす各部分
また独立した各部分の組み合わせで一つに構成できるようにしたもの
というちょっと堅苦しい説明があるんですけれども
簡単にいうと、イメージするとレゴのような感じで
ひとつひとつのその小さなピースを組み立てることによって
自分が作りたい、まあ例えばブログ記事だとかページだとかを
作るためのパーツだというふうに思ってください
ブロックには様々な種類があります
先程も、今日はテキストブロックをメインにを紹介するといったんですけれども
それ以外にもメディアだったりとか
埋め込みウィジェットとかいろんな種類があります
このブロックを使うことによって投稿や固定ページ
またはカスタム投稿タイプなどを使用して
レイアウトやデザインの自由度を向上することができるものとなっています
じゃあさっきから僕ずっとブロックエディター、ブロックエディターと言ってるんですけれども
じゃあブロックエディターって何なんですか?っていう方も
いらっしゃると思います
ブロックエディター、他に WordPress エディター、または
Gutenberg(グーテンベルグ)というふうに呼ぶ方もいると思います
じゃあこの3つ、それぞれ何が違うのか?
まずブロックエディターと WordPress エディターの、この2つなんですけれども
この新しくブロックエディターが登場した WordPress 5.0以降では
同じ意味を持ちます
なのでどちらを使っても大丈夫です
まあ人によってはブロックエディターを使うのが好みっていう人もいれば
WordPress エディターっていうふうに言うのが
好みっていう人もいると思うんですけど、どっちでも大丈夫です
じゃあブロックエディターと Gutenberg
これは何が違うの?っていうふうに思う方もいると思うんですね
これ2つ似ているんですけれども厳密にいうと
みなさんが投稿画面だとか固定ページを作成する画面だとかで見る
そのいわゆる WordPress のコアと言われる部分に含まれるものを
ブロックエディターと呼び、
プラグインとして提供されているものもありまして
そのことを Gutenberg というふうに呼んでいます
で、じゃあブロックエディター、WordPress エディター、Gutenberg
ってどんどん出てきたけれども、WordPress を例えば
(バージョン)4.x だとか 3.x とかの頃から使っている人って
その頃から使い慣れたエディターってどこ行っちゃったの?
っていうふうに思っている人もいると思うんですね
で当時から使っているエディターのことは
今はクラシックエディターというふうに呼んでいます
これはブロックエディターが登場するよりも前の
WordPress のデフォルトのエディターでした
で、現在はコア開発チームが提供する公式プラグインとして
提供されています
どんどんどんどんブロックエディターに移行していただきたいなぁという思いも
ありながらも、やっぱりこっちのがまだ使い慣れてますよという方も
いらっしゃると思うんですけれども
現場の段階では、まあ2022年までは保証だったりとか
サポートがされるっていうふうに言われています
次にブロックの分類について説明します
コアに存在するブロックは今後の WordPress のアップデートにより
変更になる可能性がありますが、基本的なことは変わりませんので
自分のサイトと動画の画面が多少違っても、気にしなくて大丈夫です
コアのブロックは大まかに言うとテキスト、メディア、デザイン
ウィジェット、埋め込み、というふうに分類されています
分類の名称は各まとまりの上に書かれています
テキストブロックにはこのようなものがあります
文章執筆によく使うブロックが多いです
デザインブロックにはレイアウトを調整するブロックのほかに
ボタンブロックも含まれます
メディアブロックはメディアライブラリーに画像、動画、音声、
ドキュメントファイルなどをアップロードしたりライブラリから選んで
呼び出したりする時などに使います
ウィジェットブロックにはちょっとした便利な機能を含む
ブロックが揃っています
埋め込みブロックは外部サイトからコンテンツを埋め込むときに使います
次にブロックの追加方法をご紹介します
ブログ投稿や固定ページの編集画面からブロックを追加する方法は
一つだけではなく複数あります
この後それぞれを見ていきますので
5種類あるということだけ認識しておいてください
追加方法の話に入る前に、インサーターについてご説明しておきます
インサーターとは、インサートつまり
挿入をするツールという意味で
+サインが四角で囲まれたアイコンになっています
青や黒、設定によっては他の色の場合もあるかもしれません
このインサーターは空っぽのブロックの右側、
トップのツールバー、そしてブロックとブロックの間という
3カ所で出てきます
それでは5種類のブロック追加方法を説明していきます
まずは空のブロックの右のインサーターを使う方式です
編集画面で何も書かれていないところにカーソルを置いたり
段落ブロックで改行すると、右に黒い+記号のアイコンが出てきます
これをクリックするとポップアップが下に表示され
追加するブロックを選ぶことができます
ポップアップ内で検索したりすべて表示をクリックして
ブロックの全一覧を見ることもできます
2つ目はトップツールバーのインサーターを使う方式です
編集画面左上のサイトロゴの横にあるインサーターをクリックしましょう
現在使えるブロックの一覧が表示されます
ブロックの上にマウスオーバーするとそのブロックのプレビューとともに
追加情報が表示されます
クリックするとブロックを追加できます
3つ目は、ブロックの間の中央のインサーターを使う方法です
ブロックの下の、次のブロックとの境目のあたりを
マウスオーバーすると、横のラインと共にインサーターが出現します
プラス記号をクリックすると、ブロックを追加できます
4つ目は、インサーターを使わない方式で
空の段落ブロックでのスラッシュコマンドです
空の状態の段落ブロック内で半角のスラッシュ記号を
入力すると、ブロックのリストが出現します
半角英字または日本語でキーワードを入力して
希望のブロックを呼び出すことができます
Enter キーで新しい段落を追加した後にスラッシュコマンドを使えば
執筆の流れを中断してマウスを使う必要がありません
5つ目は、ブロックツールバーの3点ドットメニューを使う方式です
ブロックを選択すると、そのすぐ上に
ブロックツールバーと呼ばれるバーが表示されますが
この右端にある3点ドットをクリックします
表示されたメニューの中の項目を使って
現在のブロックの上か下にブロックを挿入できます
ここまででも画面上ですでに何度も表示されていますが
ブロックツールバーについて触れておきます
ブロックツールバーというのは、各ブロックをクリックして編集している間に
ブロックのすぐ上に表示されるメニューバーのことです
それぞれのブロック特有の設定と
すべてのブロックに共通の追加設定が用意されています
段落ブロックのブロックツールバーを例にとって
詳しく見てみましょう
まず、一番左には、どのブロックツールバーでも
現在のブロックを示すアイコンが表示されます
このアイコンを使って、現在のブロックを
他のブロックやカラム、グループへ変換できる場合もあります
その左隣にある2つのアイコンは、ブロックの移動に使います
これらについては後ほど詳しくご説明します
次に、現在のブロックで最もよく使われる設定が表示されます
段落ブロックの場合は、文字揃え、太字、斜体、リンクの4つです
その左にある下向き矢印をクリックすると
それ以外の現在のブロックの設定が表示されます
これらは、先ほどの4つの設定と比較すると
一般的には使われる頻度が少ないものになります
段落ブロックの場合は、インラインコード、
取り消し線など、7種類あります
実際にブロックツールバー内の設定を
使う方法はブロックにより異なりますが
例えば段落ブロックの場合は、文字を選択してから
設定を決定してスタイルを適用したりといったやり方になります
ブロックツールバーの一番右側には縦方向の3点ドットがあります
こちらには、すべてのブロックで共通の追加オプションが含まれます
ショートカットキーも
も表示されるので覚えておくと便利です
ここまでは、ブロックツールバーがブロックのすぐ上にあることを
前提にご説明してきましたが、ブロックツールバーは画面の一番上に表示することもできます
これは、編集画面のいちばん右上の縦3点ドットメニューから「トップツールバー」に設定を変えることで変更できます
次に、ブロックツールバー以外でブロックの設定ができる、エディター
の右サイドバーについて軽く触れます
すべてのブロックでは、ブロックツールバーのオプションに加えて
エディターの右サイドバーに独自のオプションが表示されます
サイドバーが表示されない場合は、ツールバーの3ドットメニューの「追加設定を表示」
をクリックしてください
同様の操作で非表示にすることもできます
画面右上の青い「公開」ボタンの隣にある歯車アイコンをクリックしても、サイドバーが開きます
同様の操作で、非表示にすることもできます
それでは、この動画の最後のパートになりますが、
ブロックの移動方法についてご説明します
移動する方法も1つだけではなく3種類あります
まずは、矢印アイコンを使った上下移動方式です
ブロックツールバー内の矢印アイコンをクリックすれば
ブロックを一つ上または下に移動できます
次に、6点グリッドハンドルを使ったドラッグ & ドロップ方式です
6点グリッドハンドルとは、ブロックツールバーの左から2つ目
ブロックの種類を示すアイコンのすぐ右にある、6つのドットが付いたアイコンです
ここにマウスオーバーすると、カーソルが手の形に変わります。その状態のまま
グリッドハンドルをクリックしてドラッグし、ブロックを移動します。希望の位置に青い線が出たところでマウスを離せば、その位置にブロックが配置されます
最後に、追加設定の「移動」オプションです
ブロックツールバーの一番左にある縦3点のドットをクリックし、オプションの
メニューを開きます
「移動」というオプションをクリックしてください
その後、マウスを希望の位置に動かします
青い線が出たところで Enter または Return キーを押せば、その位置にブロック
が配置されます
以上、ブロックエディターの使い方基本編でした
テキスト情報で確認したい方は、ドキュメンテーションもあわせてご覧ください

Workshop Details



Presenters

Naoko Takano
@nao

I am a full-time sponsored contributor at Automattic. My current focus area is contributor experience improvement, including the Five for the Future and the WordPress Contributor Mentorship Program.

I have been involved in the Japanese WordPress community to help with translation, documentation, WordCamps & Meetups.
WordPress 日本語翻訳についての情報をお探しの方はこちらをご覧ください。

– Former Japanese Team Locale Manager (2008-2024)
– Former Japanese General Translation Editor (GTE)
– Polyglots Team Global Mentor
– Community Team Program Manager (Deputy)
– WordCamp Asia 2020 & 2023 Global Lead

Shusei Toda
@st810amaze

Communication Designer based in Tokyo, Japan.
CI (Corporate Identity), VI (Visual Identity), Marketing, Branding are some of my passion.
Love taking photos and videos.
Former web designer and developer.