ブロックエディターの使い方 #02: テキストブロック編


ブロックエディターの使い方をご紹介するシリーズの第2回目として、テキストブロックのカテゴリーに属するブロックについて詳しく学びます。段落、見出し、リストなど、一般的な投稿やページでとても頻繁に使うブロックや、引用、テーブルなど特定の種類のコンテンツを表示する時に便利なブロックなど、短いデモを交えて一つずつ説明していきます。

(#01 は後日公開予定です)

学習目標

  • ブロックエディターのテキストブロックにはどんなものがあるかを理解する。
  • どのブロックをどういった時に使えばよいのか、基本的知識を得る。
  • テキストブロックの追加設定にはどんな設定があるのかを理解する。

練習問題

  1. 「テキストブロック」とは何ですか ?
  2. 段落ブロックではどういった装飾オプションが利用できますか ?
  3. 引用ブロックとプルクウォートブロックはどのように使い分けますか ?
  4. テーブルブロックの主な用途としては、「データの表示」と「柔軟なデザインの実現」のどちらが正しいでしょうか ?

トランスクリプト

それではこれから
ブロックエディターの使い方シリーズの第2弾
テキストブロックについての説明を始めます
ブロックエディターにはたくさんのブロックがありますが
この動画では一番よく使われる
テキストブロックというカテゴリーに含まれるものを
ご紹介していきます
今回取り扱うテキストブロック
テキストブロックっていうブロックがあるわけではなく
テキストブロック「群」っていう感じですね
10個のブロックを「群」として呼んでいます
主にテキスト、文字を打つときに使うことが多い
ブロックの群となってます
その中には段落、見出し、リスト、引用、コード、
クラシック、整形済みテキスト、プルクオート、テーブル
詩、などの10個のコンポーネントがあります
じゃあまず段落ブロックなんですけれども
段落ブロックはエディター上で
テキストを書く場合にデフォルトで追加されるブロックです
主に文章メインのサイトではこれが一番使用頻度が高い
ブロックなのではないかなと思っています
ブログだったらブログ本文とか
お知らせだったらお知らせ本文とか
そういうのを書くときに一番使います
次に見出しブロック
見出しブロックというのは、読者…
ウェブサイトを見ている人、
または検索エンジンなどにとって理解しやすいように
コンテンツを階層化して構成するために
役立つブロックとなります
なのでブログを書くときもお知らせを書いたりとか
それ以外にも、記事とかを書くときにも
見出しをつけて文章を書いて、見出しをつけて文章を書いて
っていう構成を作っていくと思うんですけど
その時に使う見出しのブロックとなります
次にリストブロック
リストブロックというのは箇条書きコンテンツを
作成するときに使うためのブロックとなります
普通のブレットタイプ、点点点点…っていうふうに続く
リストの形式も作ることもできれば
1234という風にナンバリングをするリストを作ることもできます
もちろんリストの階層を分けることもできます
一段右に移そう、二段右に移そう、
とかっていうふう階層の作りもできます
ハイフンを使って書き始めることもできたり
複数の段落ブロックを選択して
リストブロックに変換するということもできます
次に引用ブロックなんですけれども
何かの文章、例えば本とか他のサイトとかでもそうですけれども
何かを引用していきたいときに
日本だと括弧で括ることとかも多いと思うんですけれども
こういう引用ブロックという1つのブロックを使うことによって
引用文や作っているお知らせ、ブログなどで、印象に残る言葉を
目立たせることができるブロックとなっています
次にコードブロック
コードブロックなんですけれども、
余白だったりとかりタグを考慮したフォーマット済みの
ソースコードを表示することができます
次にクラシックブロック
これはクラシックエディターのようにブロックエディタ上で
文章を書いたりとか編集するようにできるためのブロックです
ブロックの形にはなっているんですけれども
カスタム Tiny MCE ボタンがあるので WordPress 5.0以前の
エディターが使い慣れているんだけどブロックも使いたいという人は
2つを混在させて使うことも実はできる
そのために使うブロックです
次に整形済みテキストブロック
整形済みテキストブロックっていうのは、自分が入力した通りに
テキストが表示されるブロックとなります
固定幅フォントが利用されますので
これはテーマだったりとか
自分がどういうふうに設定をしているかにも
依存するんですけども
横にスクロールするような文章を作ったりだとか
することもできます
次にプルクオートブロック
プルクオートブロックっていうのは投稿やページの
テキストを強調したい場合、使うと便利なブロックです
ずーっと文章が続くよりも、その文章の中で
自分がどうしても強調したいときにこのブロックを使うと
見栄えをよくすることができます
一応、位置づけとしては、引用ブロックよりも
大きくなるように作られていることが多いです
なので本当にページ内で、これは目立たせたい
この文章、一文は、絶対みんなに読んで欲しいと
いうものがあったりする場合は
このプルクオートブロックを使うっていうのもひとつの手です
次にテーブルブロック
テーブルブロックっていうのは、投稿またはページにて
簡単に表を作成することができるブロックとなっています
ブログ記事で比較表を作る時とか、そういう時に
こういう表を使うことが多いと思うんですけど
その表を簡単にできるのがこのテーブルブロックとなっています
このテーブルブロックというのはページデザインよりも
表形式のデータに適しています
なのでもし、このテーブルを使ってカラムを作りたいとか
そう思ってらっしゃる方は
カラムブロックっていうのを使うことをおすすめします
今回取り扱うブロックの最後のブロック、詩ブロック
なんですけれども、詩ブロックっていうのは
単語と単語の間にスペース…日本語だと、文字か
文字と文字の間にスペース、ブロック内に改行を
追加することができるブロックとなってます
このブロックは段落ブロックだったりとか
グループに変換することができて
自分がちょっとしたポエムを書いたりとか
文書の中にですね
そうした時に、そこをまた目立たせるときには
グループ化するということができて
そうすると詩ブロックの周りに背景色を付けて
変更することができたりとかします
今回取り扱う10個のテキストブロックの紹介でした

Workshop Details



Presenters

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.