【総まとめ版】WordPressブロックエディターの使い方

2019年6月3日 2022年8月26日

本記事では、WordPress(ワードプレス)5.x系から標準エディタとなった「ブロックエディター」の使い方を解説していきます。

WordPressの投稿や固定ページで使うエディターの使い方がいまいちわからなくって・・・

現在WordPressでは、ブロックとう単位で組み合わせてページを作成するブロックエディターというエディターを標準採用しています。ここでは、ブロックエディターの使い方を説明していきますね。

1 WordPressの標準エディター「ブロックエディター」)とは
2 ブロックエディターの基本的な見方
3 ブロックエディターの基本的な使い方
4 ブロックの挿入・移動・削除・グルーピング
5 便利なブロック。ブロックエディターの色々な使い方
6 再利用ブロックを利用する
7 いろいろなブロックの説明
8 右ツールバー(アイキャッチ・カテゴリ・タグなどの設定)
9 まとめ
10 YouTubeチャンネル開設しました！

WordPressの標準エディター「ブロックエディター」)とは

WordPressのエディターは、ブロックといわれる単位でコンテンツを作っていくブロックエディターが採用されています。

2018年WordPress4.x系まではクラシックエディターと言われるWordのようなエディターが採用されていましたが、2018年末にリリースされたWordPress5.0以降では「ブロックエディター」といわれるエディターが標準になっています。

■従来のエディターと新しいエディターの違い

既存のWordPressや操作説明書などではまだ旧エディターであるクラシックエディターが使用されている場合もありますが、今から新しくWordPressを覚えるなら、ブロックエディターで覚えると良いでしょう。

注意点

ブロックエディターがリリースされて2021年1月時点で約2年経過し、有名なテーマやプラグインはほぼブロックエディター想定に更新されましたが、一部のプラグインやテーマは従来のクラシックエディター前提になっているものもあります。

旧エディターであるクラシックエディターの方をあえて利用したい場合は、プラグイン「Classic Editor」を利用することで従来のエディターに戻すことができます。
詳しくは下記の記事をご覧ください。

【Classic Editor】WordPress5系でグーテンベルクから従来エディターに戻す方法
 【旧クラシックエディター版】WordPress投稿の書き方・使い方を解説
 【旧クラシックエディター版】WordPress固定ページの使い方を解説

ブロックエディターの基本的な見方

まずはブロックエディターの基本的な使い方を中心に説明していきます。

はじめに　ブロックエディターの使い方概要

はじめてブロックエディターの画面を開いた時には、ガイドが表示されます。今回ば「×」を押していったん閉じます。

下記のような編集画面が初期状態で表示されます。大きく、メインのエディターエリアと上部ツールバー、右のツールバーがあります。

(※)上記はWordPress5.6の画面です。バージョンによって若干の差異があるのでその場合はご自身のご利用の画面に合わせて読み替えてください。

メインエリア・・・タイトルや本文を作成するエディター画面。ブロック単位でページを作成していくメインエリア
上部ツールバー・・・管理画面への移動や公開設定・エディター設定・ブロック追加などの基本項目を設定できる
右ツールバー・・・アイキャッチ・公開設定・パーマリンクなどの文書設定や、各ブロックの設定を行うことができる

メインエリア(エディター)でできること

メインエリアではタイトルのほか、ブロック単位で文章や見出し、画像、などの各種ブロックを追加していくことができます。

まずはタイトルと文章を書いたのち公開をして表示を確認してみましょう。

詳細なブロックの説明は後ほど説明をしていきます。ここではいったん、上部ツールバーや右ツールバーなどの全体の概要について先に説明していきます。

上部ツールバーでできること

上部ツールバーでは、管理画面への移動や公開設定・エディター設定・ブロック追加などの基本項目を設定・確認するできます。

上部ツールバーで設定できる項目は下記の通りです。

項目(アイコン)	説明
	管理画面への移動(固定ページ一覧または投稿一覧へ戻ることができる)
	ブロックを追加することができる
	ブロックの選択・編集モードを切り替えることができる
	一つ前の操作に戻る・一つ後の操作に次へ進むことができる
	文書の概要。利用ブロックの種類や数がわかる
	ブロックナビゲーション。現在アクティブな箇所のブロックの位置がわかる
	下書き保存・プレビュー画面表示・公開がそれぞれできる
設定	エディターの設定ボタン。右ツールバーの表示・非表示の切り替えができる
ツールと設定をさらに表示	ツールと設定をさらに表示できる。具体的には表示モードやエディターモード、ツール、オプション設定が可能

■固定ページ一覧または投稿一覧へ戻る例

■ブロックを追加する例。※追加した後は右ツールバーが非表示になるので「設定」ボタンから再度表示して設定できます。

右ツールバーでできること

右ツールバーでは、文書の設定や各ブロックの設定ができます。

「文書」タブを選択すると、公開の設定やパーマリンク、アイキャッチ、（投稿の場合は）カテゴリー・タグなどの、この文書(ページ)全体の設定ができます。

この文書タブで設定できる主な項目については、また後述で説明していきます。

また、任意のブロックにカーソルを合わせると、（「ブロック」タグが選択されている状態の）右側メニューでそのブロックの設定ができます。

設定項目はブロックにより異なりますが、色やデザインなどを調整したりすることができます。

ブロックエディターの基本的な使い方

それでは、ブロックエディターの基本的な使い方についてもう少し詳しく説明していきます。

まずは、基本的な使い方を覚えていきましょう。エディター内の＋ボタンを押下することでブロックの追加ができます。※ご利用のバージョンによって若干画面が違う場合があります。

まず最初に覚えたいブロックは下記の5つです。下記の5つを覚えればまずは簡単なブログ記事やレイアウト作成ができます。

段落ブロック・・・通常の文章を記述したい時に利用するブロック
見出しブロック・・・見出しを記述したい時に利用するブロック
画像ブロック・・・画像を挿入したい時に利用するブロック
リストブロック・・・箇条書きを記述したい時に利用するブロック
カラム・・・2列や3列などの横並びをしたい時に利用するブロック

段落ブロックを挿入する

まずは段落ブロックを挿入してみましょう。

段落ブロックは通常エディター末尾でエンターボタンを押下することで追加されます。あるいは＋ボタンから「段落」を選択して挿入することができます。

■段落ブロックの追加

また、段落で文章を書いている途中でShift+Enterボタンを押下すると、同じ段落のまま改行されます(行間が大きく開きません)。※Enterボタンを押すと新しい段落ブロックとして改行されます(行間が大きくあきます)。

■Shift+Enterによる改行と、Enterによる改行の違い

■段落ブロックの使い方(動画解説版)

(※)段落ブロックの装飾方法をはじめとした詳細な使い方については「【WordPress段落ブロック】文章入力・改行・使い方を徹底解説」をご参照ください。

見出しブロックを挿入する

次に見出しを挿入してみましょう。+ボタンを押して、「見出し」を選択します。文末の＋から末尾に追加することもできますし、ブロック間の間にカーソルを合わせて表示される＋からブロックを間に挿入することもできます。

なお、ブロックを選択すると、下記のようにブロックのすぐ上にツールバーが表示されます。見出しの場合は、見出しレベル(※)の変更やテキスト揃え、太字斜体などの設定ができます。また、右のメニューアイコンからブロック削除することもできます。

(※)見出しは本の章のようなものです。見出しは階層を持つことができます。h1が本のタイトルに相当して、H2は第1章・第2章、H3は第1-1章、第1-2章、H4は第1-1-1章、1-1-2章のような階層です。

また、見出しのブロックを選んだ状態で、右サイドバーから(表示されていない場合は、右上の設定アイコンを押して表示できます)、色やその他の設定ができます。

まずは見出しを使ってブロックの基本操作を覚えておきましょう。

画像ブロックを挿入する

次に画像を挿入してみましょう。右下＋ボタンを押して「画像」を選択、自分の好きな画像を選択します。必要に応じて右ツールバーから画像ブロックの設定もできます。

■画像ブロックの使い方(動画解説版)

(※)画像ブロックの詳細な使い方については「【画像ブロック】WordPressブロックエディター画像ブロックの使い方」をご参照ください。

リストブロックを挿入する

次に箇条書きを作るリストブロックです。リストのアイコンを選択すると、箇条書きを作ることができます。

なお、テーマやプラグインによっては、WordPress標準の設定以外に、各ブロックに対して設定できる項目が追加されている場合もあります。リスト以外のブロックでも同様にテーマによって追加の設定ができる場合があります。

(※)上記はLightning(VK ExUnit)を利用している例。いくつかのリストスタイルから設定を選択することができます。

2カラム(2列横並び)のレイアウトを作成する

デザイン＞カラムを選択すると、2列や3列などの横並びのブロックを挿入することができます。カラムは後から比率を変えたり列数を変えたたりすることもできます。

■表示例（PCでは横並びでスマホの場合は縦に並びます）

今まで横並び表示するのは難しかったので、これは便利な機能ですね！！

■【WordPressカラムブロック】横並び・カラムブロックの使い方(動画解説版)

(関連記事)カラムブロックの詳しい使い方については「【WordPressカラムブロック】横並び・カラムブロックの使い方」を併せてご参照ください。

挿入しようとするブロックの位置に注意

カラムなどの外枠を作るブロックを利用することでレイアウト構造が複雑になってくるので、自分が意図する場所にブロックが挿入されないということもでてきます。

■複数の＋がある場合にブロック挿入位置が変わることに注意

左下のブロックのナビゲーションを確認することで自分が追加しようと知っているブロックの位置を確認することができます(次で詳しく説明)

ブロックを選択しにくい時はブロックナビゲーションが便利

カラムブロックの中にブロックを入れたり、いくつもブロックを組み合わせていくと、対象のブロックをうまく選択できない場合があります。

その場合は、ブロックナビゲーションが便利です。

対象のブロック近くのブロックを選択してから、ブロックナビゲーションを選択すると、ブロックの階層構造を表示でき、選択したいブロックを選ぶことが便利です。また、左下に現在選択されているブロックがぱんくずリスト形式で表示されているのでそこから対象のブロックを選択することもできます。

■ブロックナビゲーションを活用して複雑なブロックからピンポイントで対象ブロックを選択する

下書き保存・公開をする

ある程度ページを作成したら、保存しましょう。下書き保存を選択すると、下書き(公開していない)でページを保存することができます。

公開をする

ページを公開しても良い場合は、「公開」ボタンを押下して保存しましょう。ページが公開されて一般の人も閲覧できるようになります。

下書きに戻す

一度ページを公開してから再度下書きに戻したい場合は「下書きに戻す」ボタンを押下します。

ブロックの挿入・移動・削除・グルーピング

既存のブロックの間に新たにブロックを挿入したり、既存のブロックを移動したり、削除することもできます。また、複数ブロックをグルーピングすることもできます。

既存のブロックの間に挿入する

すでに作成したブロックとブロック境目にカーソルを合わせると「＋」ボタンが表示されます。「＋」ボタンを押下すると既存のブロックの間に新しいブロックを挿入することができます。

うまく「＋」ボタンが出てこない場合は、一度エンターを押して空白を作ってから右にある「＋」を押すとブロック間に新しいブロックを挿入できます。

既存のブロックを移動する

既存のブロックの左側の矢印を選択すると、ブロックの順番を変更することができます。

SHIFTボタンを押しながら複数のブロックを選択した状態で矢印を選択すると、複数ブロックまとめて順番を変更することもできます。

また、点々のあるアイコンをクリックしたままドラッグ＆ドロップでブロックを任意の場所に移動することもできます。

既存のブロックを削除する

既存のブロックを削除したい場合は、既存のブロックを選択して、詳細設定アイコンを選択してブロックを削除をすることができます。

このように、新しいエディターでは「ブロック」と言われる単位を挿入していくことでページを作成していくことができます。

複数ブロックをグルーピングする

SHIFTキーを押しながら複数ブロックを選択してグルーピングすることもできます。グルーピングしておくことで、移動や編集がしやすくなります。

グルーピングしたブロックをうまく選択できない場合は、前述のブロックナビゲーションをうまく活用して対象のグループブロックを選択しましょう。

■WordPressブロックのグループ化が便利！グルーピングのやり方(動画解説版)

(※)複数ブロックのグループ化の詳細な使い方については「WordPressブロックのグループ化が便利！グルーピングのやり方」をご参照ください。

便利なブロック。ブロックエディターの色々な使い方

次に、便利なブロックや、もう少し色々なエディターの使い方を説明していきます。

クラシックブロックを挿入する

フォーマット＞クラシックを選択すると、従来のクラシックエディターをブロックとして挿入することができます。

2018年12月以前のワードプレスに備わっていた従来のエディターですね

ショートコードブロックを挿入する

ショートコードブロックを選択すると、ショートコードをページ内に挿入することができます。

下記は、お問い合わせフォームのショートコードをページ内に挿入する例です。

カスタムHTMLを挿入する

カスタムHTMLを選択すると、任意のHTMLをページ内に挿入することができます。

下記は、GoogleMapの埋め込みコードをページ内に挿入する例です。

■WordPress カスタムHTMLブロックの使い方(動画解説版)

HTMLとして編集する

なお、任意のブロックの詳細設定で「HTMLとして編集」を選択すると、既存のブロックをHTMLのソースコードとして編集することができます。

ただし、独自に編集したものはそのままブロックに戻すことができなくなるので注意です(以降もHTMLとして編集する形になります)

(関連記事)WordPress カスタムHTMLブロックの使い方を徹底解説

カバーで背景をつける

一般ブロック＞カバーを選択すると、背景に画像を設定してその上に見出しや段落を入力することができます。

※カバーブロックはレンタルサーバーによってはWAFが誤検知する場合があり、保存ができなくなる事象があります。
(関連記事)【ロリポップで403エラーが出た時の対処法】WAFの無効化・除外設定

プラグインやテーマによって利用できる独自ブロック

ブロックエディター用のプラグインや、一部のテーマでは、WordPress標準のブロック以外にも便利なブロックを追加することができます。

Lightningで使われる「VK Blocks」ブロック

下記は、人気テーマ「Lightning」で利用することができるVK Blocksです。

たとえば、VK Blocks＞フローを挿入すると、下記のような流れ・フローを作ることができます。

ここではVK Blocksの使い方については割愛しますが、「WordPressテーマ Lightning【VK Blocks】の使い方」にVK Blocksの詳しい使い方を説明していますのでご興味ある方はあわせてご参照ください。

Snow Monkeyで使われる「Snow Monkey」ブロック

下記は、人気テーマ「Snow Monkey」で利用することができるSnow Monkeyブロックです。

Snow Monkeyは独自ブロックが非常に充実しており、ブロックパターンも多いためお洒落なホームページが簡単に作成することができます。

■Snow Monkey ブロック

■Snow Monkey　ブロックパターン

SWELLで使われる「SWELL」ブロック

下記は、人気テーマ「SWELL」で利用することができるSWELLブロックです。

下記は、クリックすることで開閉し、コンテンツの表示、非表示ができる「アコーディオンブロック」の例です。

(関連記事)WordPressテーマSWELLスウェルを使ってみた感想レビュー

このように、テーマやプラグインによっては、WordPress標準では備わっていないブロックもあり、サイトを作りやすくなるので便利です。

あわせて読みたい記事

再利用ブロックを利用する

任意のブロックに対して、「再利用ブロックに追加」をすることで、ブロックの雛形を作り共通化して、他の投稿ページや固定ページでも再利用することができます。

ブロック選択時に再利用ブロックに追加したブロックを選択できるようになります。

なお、共通化したブロックは、一方の投稿(固定ページ)で変更すると、他の投稿(固定ページ)でも共通化ブロックの内容が変更されているので気をつけましょう。

再利用ブロック：コンテンツを作成し、自分や他の投稿者がサイトで再利用できるよう保存しましょう。ブロックを更新すると、再利用しているすべての場所で更新が適用されます。

もし共通化したブロックを使いたいけど、ここのページで細部を変えたい場合は、「通常のブロックに変換」をすることで、個々のページごとに変更を加えられるようになります。

(※)再利用ブロックの詳細な使い方については「【WordPress再利用ブロック】再利用ブロックの使い方」をご参照ください。

(関連記事)【WordPress再利用ブロック】再利用ブロックの使い方

いろいろなブロックの説明

新しいエディターの基本的な使い方は前述の通りです。ここからは、利用できる主要な各ブロックの説明をしていきます。

ブロックエディターでは、下記のブロック種類が用意されています。

項目	説明
テキストブロック	見出し、段落、リスト、テーブル(表)などのテキストベースのブロック
メディアブロック	画像、ギャラリー、音声、動画などのメディア系ブロック
デザインブロック	カラム(列数定義)、区切り、スペーサーなどのレイアウト系のブロック
ウィジェットブロック	ショートコード、カスタムHTML、最新の記事、最新の記事などのウィジェット(パーツ)ブロック
埋め込みブロック	Youtube、Twitter、Facebookなどの埋め込み系ブロック

それぞれのブロックについて下記に紹介していきます。

テキストブロック

テキストブロックは、段落や見出し、リストや表などの文字系を入力する時に利用するブロックです。

項目	意味
段落	通常の文章を入力する際に利用します。最も使用頻度の多いブロックの一つです。
見出し	見出しを挿入する際に利用します。最も使用頻度の多いブロックの一つです。
リスト	リスト(箇条書き)を作る際に利用します。使用頻度の高いブロックの一つです。
引用	引用blockquoteを挿入します。
テーブル	表を挿入したいときに利用するブロックです。
クラシック	従来のエディター(クラシックエディター)を利用したいときに挿入するブロックです。
コード	何かのソースコードを利用したいときに挿入するブロックです。利用頻度は低いでしょう。
整形済み	整形済みテキスト(preタグ)を利用したいときに挿入するブロックです。利用頻度は低いでしょう。
ブルクオート	引用にさらに装飾をしたブロックです。利用頻度は低いでしょう。

メディアブロック

メディアブロックでは、画像やギャラリー、動画など、メディア系のブロックが用意されています。

項目	意味
画像	画像を挿入する際に利用します。最も使用頻度の多いブロックの一つです。
ギャラリー (詳細記事)WordPress ギャラリーブロックの使い方	横並びの画像を利用する際に利用するブロックです。
音声	音声ファイルをアップロードできます。
カバー	カバー(背景画像や背景色)の上に文章を重ねたブロックです。
ファイル	PDFなどの任意のファイルをアップロードするためのブロックです。
動画	mp4などの動画ファイルをアップロードするためのブロックです。
メディアと文章	2カラム(2列横並び)で左側を画像、右側を文章にしたい場合に利用します。

デザインブロック

デザインでは、２カラムやボタン、スペーサー(たて余白)、グルーピングなど、レイアウトに関わるブロックが用意されています。

項目	意味
ボタン	ボタンリンクを入力する際に利用します。
カラム	2カラム(2列横並び)のブロックを使用する際に利用します。
グループ	ブロックをグループ化する際に利用します。
続きを読む	「続きを読む」の表示にしたい場合に利用します。
ページ区切り	改ページの区切りを挿入します。
区切り	区切り線hrタグを挿入します。
スペーサー	縦の余白(スペース)を作りたい場合に利用します。

ウィジェットブロック

ウィジェットブロックは、ショートコードやカスタムHTML、検索やタグクラウドなど、外観＞ウィジェットで主に使うブロックが用意されています。

項目	意味
カスタムHTML	HTMLで記述したいときに挿入するブロックです。
ショートコード	任意のショートコードを入力したい場合に利用するブロックです。
アーカイブ	日付別アーカイブを入力したい場合に利用するブロックです。
カレンダー	カレンダーを挿入したい場合に利用するブロックです。
カテゴリー	投稿のカテゴリーを挿入したい場合に利用するブロックです。
最新のコメント	最新のコメントを挿入したい場合に利用するブロックです。
最新の記事	最新の投稿記事を挿入したい場合に利用するブロックです。
RSS	RSSフィードを挿入したい場合に利用するブロックです。
検索	検索ボックスを挿入したい場合に利用するブロックです。

埋め込みブロック

埋め込みブロックは、YoutubeやTwitter、Facebookなどの投稿・ツイートを埋め込み表示するためのブロックです。

項目	意味
埋め込み	埋め込みを挿入する際に利用するブロックです。
Twitter	Twitterの埋め込みを挿入する際に利用するブロックです。
Youtube	Youtubeの埋め込みを挿入する際に利用するブロックです。参考）【2021年版】WordPressにYoutube動画を埋め込む方法
Facebook	Facebookの埋め込みを挿入する際に利用するブロックです。
Instagram	Instagramの埋め込みを挿入する際に利用するブロックです。
WordPress	WordPressの埋め込みを挿入する際に利用するブロックです。