全ブロック解説！WordPressのブロックエディターを使いたおそう！

WordPress5.x系の新しいGutenbergエディターはブロックエディターというビジュアルエディターに刷新され、コンテンツをブロック単位で作成していく方法になりました。

様々なタイプのブロックが用意されているので、それぞれのブロックがどのような機能や役割をもったブロックなのか、今ひとつ理解しきれていない方も多いのではないでしょうか？

そこで今回は、Gutenbergで利用できる全ブロックタイプ（2019年8月時点）について解説していきます。

ブロックの機能や役割を理解してしまえば、旧エディターよりも使い勝手のよいエディターだと感じるはず。

各ブロックの使い方に加え、生成されるHTML・CSSコードについても紹介します。

「HTML・CSSはわからない」という方はコードの解説部分を読み飛ばしてもらっても問題ありません。

実際に操作しながらご覧いただくと、より理解しやすいでしょう。
ぜひサンプル用の記事をご準備ください。

一般ブロック

ベーシックなブロックタイプが集まったカテゴリーです。

段落

本文となるテキストを入力するブロックです。

pタグで生成されます。

エンターキー（リターンキー）を押すと、段落が終了し、次の段落ブロックが作成されます。

一段落につき、1～3文程度が一般的で適切な文量でしょう。

ブロック内（段落内）で改行するには、shift+enter(return)を押します。
brタグによる改行が行われます。

ブロックツールバーでは以下の調整ができます。

• テキストの配置（左揃え・中央揃え・右揃え）
• 太字
• イタリック体（斜体）
• リンク
• インライン画像の挿入
• ソースコード
• 打ち消し線

テキストの配置変更はCSSのtext-alignによるスタイル指定です。

インライン画像とは、テキストの途中で挿入する画像のことです。

画像ブロック（後述）が１つのブロックとして画像を扱うのに対し、インライン画像は上の画像のように他のブロックコンテンツ内に画像を差し込みます。

太字はstrong、イタリック体はem、リンクはa、ソースコードはcode、打ち消しはsタグで、それぞれHTMLのマークアップがされます。

適用したスタイルを取り消すには、同じボタンを再度クリックします。

ブロック設定パネルでは以下の設定ができます。

• 文字サイズの変更
• ドロップキャップの設定
• 文字色の変更
• 背景色の変更
• CSSクラスの追加（高度な設定）

文字サイズは「小」「標準」「大」「特大」と規定サイズの他、任意のピクセルサイズを数値で入力できます。

ドロップキャップは最初の一文字を大きくします。
雑誌・新聞等で見かけることのあるデザイン表現ですね。

色設定は、テキストカラーと背景色をそれぞれ設定できますが、ブロック全体への適用なので、ブロック内の特定の文字など部分的に（インラインで）変更することはできません。

「高度な設定」欄の「追加 CSS クラス」は任意でブロックタグにクラス名を指定できます。
HTML・CSSのスキルがある方向けの設定項目です。

見出し

見出しを作ります。

hタグでマークアップされます。

ツールバーでは見出しレベルがh2 ~ h4まで設定でき、ブロック設定パネルではh1 ~ h6まで全レベルの設定ができます。

テキストの配置変更はブロック設定パネルから行います。

高度な設定欄ではCSSクラスの追加の他、HTMLアンカーの設定（ID属性の設定）ができます。

画像

画像を挿入します。

imgタグをfigrueタグで囲ってマークアップされます。

WordPress4.x系まではキャプションがある場合のみfigureタグが追加されましたが、5.x系からはキャプションの有無に関わらず、figureタグが用いられます。

ブロックツールバーでは画像の配置を変更できます。

「左寄せ」「右寄せ」は後続するブロックに画像が回り込んで表示されます。
CSSは、floatプロパティを使ったスタイル指定です。

「幅広」はコンテンツエリアの横幅いっぱいに表示、「全幅」はコンテンツエリアからはみ出してブラウザ幅（ビューポート幅）まで画像を表示させます。

「全幅」については、CSSがやや複雑になるため、利用しているテーマによって使えないことがあります。

画像の下にはキャプション入力欄が表示されるので任意で入力します。

画像のブロック設定パネルでは次の設定ができます。

• 代替テキスト
• 画像サイズ
• リンク
• CSSクラスの追加

WordPress4.x系までは画像の挿入時にメディアライブラリ画面からサイズやリンクの設定ができましたが、Gutenbergからはブロック設定パネルで調整します。

代替テキスト、キャプションについてはメディアライブラリ画面からでも設定できます。

ギャラリー

画像を並べて表示するギャラリーを作るブロックです。

HTMLは ul > li > figure > img とマークアップされ、CSSフレックスによって画像のレイアウトを組んでいます。

鉛筆のアイコンの「ギャラリーを編集」ボタンをクリックすると、画像の追加・削除、並べ替え、各画像のキャプションや代替テキストの入力が行えます。

画像の追加・削除とキャプションの設定はエディター上でもできますが、並べ替えと代替テキストの設定は「ギャラリーを編集」をクリックして表示されるウィンドウで調整します。

ブロック設定パネルでは次の設定ができます。

• カラム数（列数）の選択
• 画像の切り抜き
• リンク設定
• CSSクラスの追加

「画像の切り抜き」をオンにすると、画像の縦横比を統一して表示してくれます。

縦横比の異なる画像でギャラリーを作成する場合に利用するとよいでしょう。

あくまでギャラリー表示の画像をクロップするので、元の画像が加工されてしまうわけではありません。

カバー

背景画像を設定できるブロックです。

divタグにbackground-imageプロパティで背景画像を表示しています。

カバーブロック上には「段落」「見出し」「ボタン」のブロックを追加できます。

ブロック設定パネルの設定項目は以下です。

• 背景画像の固定表示
• 背景画像の起点となる位置の指定（焦点ピッカー）
• オーバーレイカラー
• オーバーレイ透明度
• CSSクラス追加

固定背景をオンにすると、スクロールしても背景が固定されます。
いわゆるパララックス効果の一種で、奥行き感が出ます。
background-attachment: fixed;のCSSスタイルです。

焦点ピッカーでは背景画像の起点となる位置を調整します。
青丸をドラッグして調整するか、数値 (%) で指定します。

CSSのbackground-positionプロパティで起点位置を調整しています。

なお、焦点ピッカーは固定背景をオンにしている場合は設定できません。

オーバーレイは、背景画像の上に重ねるレイヤーのことです。
カラーと透過率を調整できます。
デフォルトでは透過率50%（半透明）の黒色が画像の上に重なっている状態です。

リスト

箇条書き形式のテキストを作成します。

ブロックツールバーでは番号なしか番号付きかのいずれかのリストを選択します。

番号なしリストならul > li、番号付きリストならol > liでマークアップされます。

「リスト項目をインデント」でネスト（入れ子）のリストを作ることもできます。

ブロック設定パネルはCSSクラスの追加のみです。

引用

引用文を記載するブロックです。

blockquoteでマークアップされます。

引用文と引用元を入力するフィールドがあります。

引用元にはその名称やリンク先を設定します。
citeタグでマークアップされます。

ブロック設定パネルのスタイルでブロックの見た目を変更できます。

スタイルによって、is-style-default または is-style-large のCSSクラス名（「高度な設定」欄）が自動的に設定されます。

音声

音声プレーヤーを設置します。

音声プレーヤーはaudioタグをfigureタグで囲った形式でマークアップされます。

キャプションテキストを付けられます。

ブロック設定パネルで音声プレーヤーの設定ができます。

• 自動再生
• 繰り返し再生
• 先読み設定
• CSSクラス追加

「先読み」とは、音声ファイルを再生せずともあらかじめ読み込んでおくかどうかを設定するものです。
マークアップは、audioタグのpreload属性の値の指定です。

「自動 (auto)」「メタデータ (metadata)」「なし (none)」の選択肢から選びます。

「メタデータ」に指定すると、サイズや再生時間など音声ファイルのメタデータをプリロードします。

「自動」に指定すると、動画ファイル全体を読み込みます。
ユーザーが実際に再生するかどうかに関係なくロードするため、通信量が増える点に留意しましょう。

動画

動画プレーヤーを設置します。

動画プレーヤーはvideoタグをfigureタグで囲った形式でマークアップされます。

キャプションテキストを付けられます。

動画ブロックは、自サイトアップロードした動画を表示させるためのもので、YouTube動画等を埋め込む場合には使用しません。（後述）

ブロック設定パネルで動画プレーヤーの設定ができます。

• 自動再生
• 繰り返し再生
• ミュート（消音）
• プレイバックコントロール
• 先読み
• CSSクラス追加

「プレイバックコントロール」は、再生ボタン等のコントローラーを表示するかどうかの設定です。

オフにするとコントローラーが表示されません。
ソースコードの生成箇所はvideoタグのcontrol属性の値です。

「先読み」設定は音声ブロックの解説と同一です。
videoタグのpreload属性の値が設定されます。

ポスター画像では動画のサムネイルにする画像を設定できます。
videoタグにposter属性が追加されます。

ファイル

ファイルのリンクを表示させるブロックです。
テキストリンクで表示されます。

PDFや各種ドキュメントファイルなどをアップする際に使えます。

ファイルのタイトル欄（メディアライブラリ画面から設定可）に入力がある場合は、そのテキストがリンクテキストとしてセットされます。
エディター上からテキストを変更できます。

タイトル欄が空欄の時は、エディター上でテキストを入力します。

ブロック設定パネルの設定は以下です。

• リンク先の表示指定
• リンクを新しいタブで開く
• ダウンロードボタンの設置
• CSSクラス名の追加

ダウンロードボタンは、ボタン形式のダウンロードリンクを追加します。
download属性を持ったaタグのボタンが作成されます。

ボタンはデフォルトで『ダウンロード』のテキストですが変更できます。

フォーマット

特定の役割や機能を持ったブロックなどがカテゴライズされています。

ソースコード

プログラムのソースコードなどを示すためのブロックです。

pre > codeタグでマークアップされます。

クラシック

WordPress4.x系までの旧エディターUIを使ってブロックを作れる機能です。

カスタムHTML

HTMLを記述して作成できるブロックです。

用意されているブロックだけでは表現できないマークアップをしたい時に利用できます。

整形済み

整形済みテキストを作るブロックです。

整形済みフォーマットとは、改行やスペースなど入力した通りに表示させるためのフォーマットです。

例えば、メールやワープロの文章、文字や記号を使ったアスキーアート、ソースコードなど、入力したままのレイアウトで表示させたい時に利用します。

HTMLによって改行やスペースが自動で調整されるのを防げます。

preタグでマークアップされ、等幅フォントで表示されます。

プルクオート

引用文を記載するブロックです。

引用ブロックよりも視覚的に目立つのが特徴です。

生成するHTMLは、blockquoteタグをfigureタグで囲っている点が引用ブロックと違います。意味上の違いはあまりありません。

ブロック設定パネルでは、スタイルの選択とカラー設定が行えます。

選択したスタイルによって、is-style-default か is-style-solid-color のCSSクラス名（「高度な設定」欄）が自動でセットされます。

テーブル

表を作成します。

tableタグでマークアップされます。

ブロックを追加すると行と列の数の指定を求められるので、決定して表を作成します。

表の作成後でもブロックツールバーから行・列の編集はできるので心配ありません。

ブロック設定パネルの項目は以下です。

• 表スタイルの選択
• 固定幅のテーブルセル
• 表全体の背景色
• CSSクラスの追加

選択した表のスタイルに応じて is-style-regular か is-style-stripes のCSSクラス名がセットされます。

「固定幅のテーブルセル」をオンにすると、全てのセルが同じ幅になります。
オフの場合は、セルのコンテンツに合わせてセル幅が変化します。

詩

詩をしたためるブロックのようです…

整形済みブロックと同様にpreでマークアップされますが、等幅フォントでの表示ではありません。

したがって、本文のテキストと同じ見た目で、かつ、改行やスペースなどを入力した通りに表示したい時に使えるブロックと言えそうです。

ブロック設定パネルの項目はCSSクラスの追加のみです。

レイアウト要素

構成やレイアウトに関連するブロックがまとめられています。

続きを読む

WordPressの機能「続きを読む」を指定するブロックです。

このブロックの挿入箇所より前にあるコンテンツはWordPressの「抜粋」として扱われます。

記事一覧ページなどで抜粋に設定したコンテンツが表示されます。（利用テーマにもよります ）

ブロック設定パネルの「コンテンツ全文ページで抜粋を非表示」をオンにすると、個別記事ページでは抜粋部分のコンテンツが非表示になります。

『もっと読む』の文言は編集できます。

ボタン

汎用ボタンを作成します。

ボタンはaタグで、ブロック全体はdivタグでマークアップされます。

ブロックを追加したらボタンのテキストとリンク先URLを入力します。

ブロック設定パネルでは、ボタンの色とボタンスタイルを選択できます。

選択したスタイルによってCSSクラス入力欄に is-style-default,  is-style-outline, is-style-squared が自動で入力されます。

カラム

カラム（段組み）を作ります。

カラムは最大で６列まで作れ、ブロック設定パネルで列数を指定します。

カラムはCSSフレックスでレイアウトされています。

メディアと文章

画像などのメディアとテキストを横並びにした2カラムのレイアウトを作成します。

CSSグリッドでレイアウトされます。

ブロックツールバーでメディアとテキストの左右配置を選択できます。

ブロック設定パネルより次の設定ができます。

• モバイルレイアウト
• 画像の代替テキスト
• ブロックの背景色

「モバイルで重ねる」の項目をオンにすると、横幅の狭いブラウザ環境（600px以下）の時に、画像とテキストのカラムが解除され、縦一列の並びに変わります。

改ページ

1つの記事をページ分割する機能です。

このブロックを挿入した箇所以降のコンテンツは次ページとして処理されます。

改ページをした際は、パーマリンクの設定によって、URLに「&page=2」や「/2/」などの番号が加わります。

改ページブロックを挿入した箇所には次ページに移動するためのリンクが生成されます。

区切り

コンテンツに区切り線を挿入します。

hrタグが挿入されます。

ブロック設定パネルで区切線のスタイルを変更できます。

選択するスタイルによって is-style-default, is-style-wide, is-style-wide のCSSクラス名が追加されます。

スペーサー

スペースを空けるためのブロックを挿入します。

エディターの青丸をドラッグして、スペース幅（高さ）を指定できます。
ブロック設定パネルで数値を入力して指定することもできます。

スペーサーのマークアップは、divタグで空要素を作成し、style属性のheigtプロパティでスペース分の幅をとっています。

ウィジェット

WordPressのウィジェットを出力するブロック群です。

ショートコード

WordPressの機能であるショートコードを挿入できるブロックです。

カテゴリー

投稿のカテゴリーをリンク付きのリストで表示します。

ulタグでマークアップされます。

ブロック設定パネルから次の設定ができます。

• ドロップダウン形式での表示
• カテゴリーの階層の表示
• 投稿数の表示
• CSSクラスの追加

「階層を表示」をオンにすると、階層構造（親子関係）に沿ったリストで表示してくれます。
ul > li > ul > li というように入れ子になったマークアップになります。

「ドロップダウンで表示」をオンにすると、selectタグを用いたマークアップに変わります。

アーカイブ

年月で分けたアーカイブをリンク付きのリストで表示します。
カテゴリーと同様のマークアップです。

最新のコメント

最新のコメント一覧を出力します。

ol > li > article という形式で、各コメントがarticleで扱われます。

ブロック設定パネルでの設定項目は以下です。

• 投稿者のアバター表示
• コメントの日付表示
• コメントの抜粋表示
• 表示するコメント数

表示するコメントの数は1～100件の間で設定できます。

最新の記事

最新の投稿一覧を出力します。

ulタグによるリスト形式で生成されます。

ブロックツールバーでは表示スタイルを「リストビュー」か「グリッドビュー」から選択できます。

グリッドビューは段組みレイアウトを作成します。
CSSフレックスでレイアウトを作っています。

リストビューは標準的なリスト形式です。

ブロック設定パネルでは次の設定が行なえます。

• 投稿の並び順
• カテゴリーによる絞り込み
• 表示件数
• 投稿日の表示
• レイアウトのカラム数（グリッドビュー選択時）

投稿の並び順は、日付またはタイトルの並び順でそれぞれ昇順・降順を選択します。

特定のカテゴリーの記事のみを表示したい場合は該当するものを選択できます。

表示件数（項目数）は1～100件の間で設定できます。

RSS

RSS または Atom フィードの投稿情報を取得して表示します。

ulタグによるリスト形式で生成されます。

ブロックを追加したら取得するフィードのURLを入力します。

ブロックツールバーから「リストビュー」と「グリッドビュー」形式の表示選択ができます。

グリッドビューはCSSフレックスで段組みレイアウトを作成します。

ブロック設定パネルから次の設定が行えます。

• 表示件数
• 投稿者の表示
• 日付の表示
• 抜粋の表示
• 抜粋テキストの最大文字数（抜粋表示オン時）
• レイアウトのカラム数（グリッドビュー選択時）
• CSSクラスの追加

検索

検索フォームを設置します。

タグクラウド

タグクラウドを表示します。

pタグのブロック内にaタグで各タグクラウドのキーワードを並べています。

ブロック設定パネルでは、表示するタクソノミー（カテゴリーかタグかなど）の選択と、タグのついている投稿数を表示するかどうかを選択できます。

カレンダー

記事投稿日の日付アーカイブへのリンクのあるカレンダーを表示します。

カレンダーはtableタグで作成されます。

埋め込み

YouTube、Twitter、Instagram、Facebook、Flickrなど様々なWebサービス等のコンテンツの埋め込みができます。

任意のサービスのブロックを追加したら、埋め込むコンテンツのURLを入力します。
キャプションの入力もできます。

ブロック設定パネルの「より小さな端末用にリサイズ」をオンにすれば、デバイス幅に合わせたレスポンシブな表示に対応させることができます。

埋め込むコンテンツによって wp-embed-aspect-16-9 wp-has-aspect-ratio といったCSSで使うクラス名が自動で入力されます。

埋め込みはiframeタグによるものですが、ブロック全体はfigureタグでマークアップされます。

再利用可能（ブロック）

「再利用可能」ブロックタイプとは、Gutenbergブロックエディターから利用できるようになった機能です。

文字通り、再利用するコンテンツを登録しておき、それを呼び出して使えば、コンテンツの作成作業を効率化できます。

よく使う定型文などを登録しておくことができます。
あるいは、設定値等を省略するためのテンプレートとして利用したり、HTMLの雛形を登録しておくのもよいですね。

ショートコードでも似たような使い方ができますが、プラグインやテーマファイル側からあらかじめ準備しておく必要があるため、WordPressに関する知識や技術的なスキルがない人には使いにくいこともありました。

その点、再利用可能ブロックはエディターから操作するだけで作れるので、誰でも簡単に使えます。

再利用ブロックの作成方法と使い方

再利用ブロックの作り方は簡単です。

まずは再利用したいブロックコンテンツを通常通りブロックとして作りましょう。（後述する再利用可能ブロック管理画面からも作成可）

作成したら、ブロックツールバーの「詳細設定（︙）」から「再利用ブロックに追加」をクリックします。

再利用可能ブロックを識別するための名前を入力して保存すれば登録完了です。

「ブロックを追加（＋）」ボタンから呼び出せるようになります。
他のブロックタイプのショートカットと同じように「/再利用ブロック名」をテキスト入力して呼び出すこともできます。

呼び出した再利用ブロックは、そのままでは手を加えることができません。

追加した再利用ブロックを記事ごとに編集したい場合は、ブロックツールバーの「詳細設定（︙）」から「通常のブロックへ変換」を適用すれば、通常のコンテンツとして編集できるようになります。（再利用ブロックではなくなる）

再利用可能ブロックの管理

再利用ブロックを管理するには一覧ページにアクセスしましょう。

「ブロックを追加（+）」の「再利用可能」セクション内の「すべての再利用ブロックを管理」か、エディタートップバーの「ツールと設定をさらに表示（︙）」内の「すべての再利用ブロックを管理」メニューから移動できます。

再利用可能ブロックの管理画面では、新規追加・編集・削除と一元管理ができます。

また、再利用可能ブロックはJSON形式でエクスポート・インポートすることができるので、別のWordPressサイトに使用したり、簡易バックアップとして保存しておくこともできます。

再利用可能ブロックのメリットと注意点

再利用可能ブロックのメリットの1つして、内容の一括修正が可能な点があげられます。

例えば、『おはようございます』というテキストを入力した再利用ブロックを登録したとして、その内容を『こんばんは』と変更したとします。

そうすると、再利用ブロックを挿入している記事全ての該当箇所のテキストが『おはようございます』から『こんばんは』に変更されます。

このメリットを使うと、例えば、期間限定のキャンペーン情報を再利用ブロックとして登録しておき、別のキャンペーンに切り替わった時に再利用ブロックの内容を書き換えれば、一括してキャンペーン情報を更新することができます。

もちろん、ショートコードを使えば同じことはできましたが、ショートコードがよくわからないという人でも使えるという点で、さらに利用のハードルが下がったと言えるでしょう。

ただし、再利用ブロックから通常ブロックに変換したものは上記のような一括編集はできなくなるので注意してください。

通常ブロックに変換されたのだから、それはもう再利用ブロックではない、ということですね。

使ってみるとブロックエディターはかんたん・便利・機能的

WordPressにデフォルトで用意されているブロックの機能について解説してきましたが、いかがでしたでしょうか？

最初目にした時は、数が多くて面食らってしまったのですが、実際に一通り操作してみると、操作自体は簡単に覚えられるものでした。

むしろ、Gutenbergという新しいブロックエディターは、コードを書いたりプラグインをインストールしなくても、旧エディターより機能が豊富です。

再利用可能ブロックもとても便利ですね。

今後WordPressがアップデートしていくにつれて、新しいブロックタイプが追加されるかもしれません。そうなれば、標準機能としてできることはもっと増えていきますね。

そんな可能性を感じさせてくれるWordPressのブロック。
「もっと楽しいコンテンツ作り」に貢献してくれそうです。