WordPress ブロックエディター 使い方入門｜全ブロックの操作手順まとめ

クラシックエディター派のあなたへ──ブロックエディター時代の第一歩

WordPressで長年サイトを制作してきた方にとって、「クラシックエディター」は非常に馴染み深い存在です。
文章を書き、見出しを付け、画像を挿入し、ときにはHTMLを直接触って細かな調整を行う——。
シンプルで自由度が高く、“職人の道具”のような感覚で使えるのが魅力でした。

そのため、クラシックエディターに慣れた制作者ほど、「新しい編集画面に変える必要があるのか？」と感じるのも無理はありません。
慣れた操作環境を手放すことは、制作のスピードにも直結する大きな変化だからです。

WordPress 5.0以降のブロックエディター（Gutenberg）登場の背景

2018年のWordPress 5.0アップデートで登場した「ブロックエディター（Gutenberg）」は、“テキスト中心の編集”から“ビジュアル構築型の編集”へと、WordPressの方向性は大きく変わりました。

ブロックエディターでは、段落・見出し・画像・ボタンなどを「ブロック」として自由に組み合わせられるようになり、これによってHTMLやCSSの知識がなくても、ノーコードで直感的なデザイン構築が可能になりました。

「ブロックエディターは難しい」という誤解

とはいえ、登場当初のブロックエディターは正直クセが強く、「使いづらい」「分かりにくい」と感じる人が少なくありませんでした。
クラシックエディターに慣れていたユーザーほど、そのギャップは大きかったと思います。

しかしWordPress 6.x以降、UIや操作性はかなり改善され、マウス操作だけでページ全体を作り込みやすくなり、さらに再利用ブロックやパターン、レイアウト調整、FSE（フルサイト編集）といった制作寄りの機能も充実しています。

今でも「ブロックエディター＝難しい」というイメージを持つ人はいますが、そんなことは全くなく慣れの問題です。

「ブロックエディターで何ができ、何ができないのか」を正確に理解する

この記事の目的は、「クラシックとブロック、どちらが上か？」を決めつけることではありません。
大事なのは、それぞれの特徴を掴んだうえで、“場面に応じて正しく選べること”です。

実際、ブロックエディターの得意不得意を整理していくと、これまでクラシック側に寄せていた作業の多くが、より早く、より柔軟に実現できるようになっていることが分かります。

まずはブロックエディターを使いこなすためのその第一歩として、「違いを正しく理解すること」から始めましょう。

クラシックエディターとブロックエディターの基本的な違い

編集画面の構造の違い：「一枚のテキストエリア」から「ブロックの集合体」へ

昔ながらのクラシックエディターは、ざっくり言うと“ノートに文字を書き込む感覚”です。

それに対してブロックエディターは、文章や画像を「パーツごと」に配置していくスタイルです。
段落、見出し、ボタン、画像などがそれぞれ独立したブロック扱いになるので、後から並び替えたり背景を付けたりしやすくなっています。

HTMLやCSSを一切触らずに余白を調整したり背景色を変えたりできるので、ちょっとしたLPやサービス紹介ページぐらいなら、手を動かしていくうちにそれっぽく仕上がります。

従来の“文章中心の編集”から、“ページを組み立てる編集”に近づいたのが一番の違いですね。

操作感とUIの違い：感覚的 vs 直感的

クラシックエディターは、入力画面とプレビュー画面こまめに行き来しながら執筆を進めるのが基本でした。
そのため、「入力画面にこう書いたからプレビュー画面ではこうなってるはず」という二重構造を理解しておく必要があったかと思います。

ブロックエディターでは、編集画面そのものが完成後の見た目に近い状態で表示されます。（作り方次第ではありますが…）
ブロックをドラッグ＆ドロップで移動したり、ツールバーからスタイルを調整したりと、感覚的に操作できるUIが特徴です。
特に、非エンジニアの企業のWeb担当者にとっては、より扱いやすいインターフェースといえるでしょう。

クラシックとブロックの比較表

ブロックエディターの「HTML編集は一部制限あり」に関して言えば、例えば「段落」「画像」「ボタン」など標準ブロックでは、ブロックの内部構造（タグ階層）は固定です。
たとえば「ボタンブロック」で <a> の中に <span> を挿入したり、独自の属性を追加したりすることは編集画面上ではできません。
「このブロックに予期しないHTMLがあります」のような警告が発せられます。

代わりに「カスタムHTML」ブロックを使用することでクラシックエディターと同様に独自の自由なHTML構造を定義することが可能です。

なぜWordPress公式はブロックエディターを推奨しているのか？

WordPress公式がブロックエディターを標準にしている理由はシンプルです。
今後のWordPressは、記事だけでなくサイト全体をブロックで組み立てる方向に進んでいるからです。

その中心が「FSE（フルサイト編集）」という仕組みです。
ヘッダーやフッター、サイドバーまで、ページ全体をブロック単位で編集できるようになり、従来のテーマの“固定デザイン”という概念を超えた自由な構造作りが可能になっています。

つまりブロックエディターは単なる記事編集ツールではなく、WordPressの未来を支える“標準技術”**になりつつあるわけです。
だからこそ、クラシックエディターは徐々に「旧仕様」という位置づけになっています。

「文章を整える」から「構造をデザインする」へ

クラシックエディターは、文字や段落を整える道具でした。
ブロックエディターは、ページの構造そのものを組み立てるツールです。

制作現場では、

• ブロックごとの配置や余白を簡単に調整できる
• 再利用ブロックやパターンで作業効率を上げられる
• 見た目と構造をほぼ同時に確認できる

といったメリットがあります。
少し触れば、その自由度の高さと効率性はすぐに体感できるはずです。

これからのWordPress制作では、ブロックエディターを避けて通ることは難しく、欠かせないツールになっていくでしょう。

ブロックエディターで「できること」

デザイン性をコード不要で実現（段組み・背景・余白など）

ブロックエディター最大の魅力は、「ノーコードでデザインをコントロールできる」ことです。
段落・見出し・ボタンなどの基本ブロックに加え、カラム・カバー・グループブロックを組み合わせることで、コーディングを一切せずに複雑な段組みレイアウトを構築できます。

例えば、背景画像を設定したり、各ブロックごとに余白（マージン・パディング）を調整したり、スマホとPCで見え方を変えることも可能です。
CSSを手動で書かなくても、“感覚的なデザイン編集”ができるのがブロックエディターの強みです。

画像・動画・ボタンなどのメディア配置の自由度

クラシックエディターでは、画像の配置やサイズ変更に制限が多く、複数の画像を横並びにするにはHTMLやCSSの記述が必要でした。
一方ブロックエディターでは、画像ギャラリー・カラム・メディアとテキストブロックなどを使うことで、ノーコードで柔軟なレイアウトを実現できます。

さらに、YouTubeやVimeoなどの外部動画も「埋め込みブロック」でURLを貼るだけで表示させることができます。
ボタンのカラー・角丸・ホバー効果もクリック操作だけで調整できます。

再利用ブロックやパターン機能による効率化

ブロックエディターは単なる「編集画面」ではなく、効率的な制作環境でもあります。
一度作成したブロックを「再利用ブロック」として登録すれば、複数ページで同じ要素を呼び出して自動同期させることができます。

また、「ブロックパターン」機能を使えば、企業サイトでよく使う構成──たとえば「サービス紹介」「料金表」「CTA」など──をテンプレート化し、数クリックで呼び出すことも可能です。

FSE（フルサイト編集）との連携で、テーマ依存からの脱却

WordPress 5.9以降で注目を集めているのが、FSE（Full Site Editing）＝フルサイト編集機能です。
これまで「テーマが決めたデザインの枠内」でしか編集できなかった部分──
ヘッダー、フッター、サイドバーなども、ブロックとして直接編集可能になりました。

つまり、FSEに対応したテーマを使えば、「テーマに縛られないWeb制作」が実現します。
デザイナーはコーディングに時間をかけず、ビジュアル構成やUXデザインに集中できるようになります。

ブロックエディターの操作画面

ブロックエディターの編集画面は上記のようになっています。
クラシックエディターと比べると全く異なる仕組みになっていることが一目で分かるかと思います。

①ツールバー

ツールバーでは「ブロック挿入ツール」の表示非表示や、元に戻す/やり直す、コンテンツ構造のリスト表示を行うことができます。

①ブロック挿入ツール

ブロック一覧の表示・非表示の切り替えができます。
全てのブロックはここから選択してコンテンツに挿入することができます。

②元に戻す

誤って編集途中のブロックを削除してしまった、追加するブロックを間違えてしまった、などの
場合に1つ前の状態に戻すことができます。
また、ショートカットキー「Ctrl+Z」でも同様の操作を行うことができます。

※編集画面から離れた場合にはもとには戻せません。

③やり直す

「②元に戻す」の操作を取り消したい場合に使用します。
元に戻す操作を行った回数と同じ回数だけやり直しが可能です。
また、ショートカットキー「Ctrl+Y」でも同様の操作を行うことができます。

※編集画面から離れた場合にはもとには戻せません。

④リスト表示

記事のブロック構造をリスト形式で視覚化することができます。
ブロック右端の三点リーダーをクリックすることでブロックの編集や、ブロックの前後に新しいブロックを挿入することができます。（デフォルトは段落ブロックが追加されます）

②保存・公開

①下書き保存

編集状態の記事を保存することができます。
下書き保存をしておくことで一度編集画面を離れたりWordPressからログアウトしても、保存したところから記事の作成を再開できます。
また、ショートカットキー「Ctrl＋S」でも同様の操作を行うことができます。

②プレビュー

記事の公開前にサイト上で実際にどのような見た目で表示されるかを確認することができます。
一番下の「新しいタブでプレビュー」で確認することができます。

③公開

記事の公開を行います。
基本的にこの操作を行うまでは、記事がページ上に表示されることはありません。

③コンテンツ編集

コンテンツ編集エリアではWordPressであらかじめ用意されている「ブロック」を組み合わせて記事を作成していきます。
Enterキーを押すことでブロックを挿入していきます。

①タイトル入力

記事のタイトルを入力し、Enterキー押下します。

②「段落」ブロックを追加

Enterを押すことで「段落」（通常のテキストエリア）ブロックが追加されます。
段落の中で改行を行いたい場合はEnterではなく「Shift＋Enter」を入力します。

③段落以外のブックを追加

Enterキーで追加されるブロックは「段落」のみです。
「①ツールバー」で紹介した「ブロック挿入ツール」
もしくは、
Enterで挿入された「段落」ブロック右端の「＋」ボタンを押すことで段落以外のブロックを挿入することができます。

④メニューバー

こちらのバーでは各種ブロックの操作を行うことができます。
各ブロックによって操作できる内容は異なりますが、「段落」ブロックの一例を紹介します。

①ブロックタイプに変更

現在のブロックから他のブロックへ切り替えることができます。

②ブロックの上下移動

ブロックの順番を入れ替えることができます。

③テキスト揃えの変更

左揃え・中央揃え・右揃えを変更します。

④太字

テキストを太字に変更します。

⑤イタリック体

テキストをイタリック体（斜め表記）に変更します。

⑥リンク

テキストにリンクを挿入します。

⑦テキスト装飾

テキストのハイライト、マーカー、打消し線などの装飾が利用できます。

⑧ブロックの設定

ブロックの削除・複製・移動などが行えます。

⑤設定パネル

サイドバーのパネルでは記事そのものに関わる「投稿」設定と各種ブロックの操作を行う「ブロック」設定があります。
「ブロック」設定では現在フォーカスが当たっているブロックの細かな設定を行うことができます。

投稿パネル：ステータス

投稿記事のステータスを変更することができます。

投稿パネル：公開日

投稿の公開日時を変更することができます。

投稿パネル：スラッグ

パーマリンク（URL）のスラッグ部分の文字列を変更できます。
固定ページの場合は英語表記にしておくことをお勧めしておきます。
投稿の場合は「設定」⇒「パーマリンク」から「基本」や「数字ベース」にしておくことをお勧めします。

※上記の設定をせずにスラッグが日本語のままになっていると日本語がサニタイズされて下記のようなとてつもなく長いURLになってしまいます。

投稿パネル：テンプレート

テンプレートを作成している場合はここから変更することができます。

投稿パネル：ディスカッション

コメントやピンバックを受け付けるかどうかをここで選択できます。
コメントフォームなどを設けていない場合はここはOFFにしておきましょう。
フォームを設置していなくても外部からのコマンドによるアクセスでコメントは投稿できてしまうのでスパムの温床になる可能性が有ります。

投稿パネル：リビジョン

リビジョンを選択すると、過去の「下書き保存」「公開」「更新」を適用した際の変更履歴を確認することができます。

※「更新」しても変更箇所が無い場合はリビジョンには含まれません。

リビジョンの変更履歴に保存される対象としては、下記の3つの個所の変更のみです。

• タイトル
• 本文
• 抜粋

これ以外の箇所、例えば「アイキャッチ画像」の変更などはリビジョンに含まれません。

中央位置にあるスクロールバーを移動させることで、リビジョンを遡ったり、進めたりすることができます。

戻したい時点のリビジョンが見つかったら「このリビジョンを復元」ボタンで、過去の記事の状態を復元することができます。

投稿パネル：カテゴリー

記事を投稿する際には事前に、ここから選択しチェックを入れましょう。

ブロックパネル：スタイル

あらかじめ登録されているブロックのスタイルを切り替えることができます。
ブロックスタイルの追加は下記のような記述で独自で追加することが可能です。

//関数名は任意
function register_block_styles()
{
  register_block_style("core/heading", [ //core/***でWordPressのブロックを指定する
    "name" => "guradient",
    "label" => "グラデーション",
  ]);
}
add_action("init", "register_block_styles");

.wp-block-heading.is-style-gradient{
 //任意のCSSを記述
}

ブロックパネル：色

任意の色を選択することができます。
テーマのスタイルであらかじめ「パレット」に色を登録しておけば、「テーマ」という箇所に色一覧が表示されます。

ブロックパネル：タイポグラフィ

テキストのサイズを変更します。
任意の数字を任意の単位（px,em,rem,vw,vh）で設定することも、あらかじめ設定されたサイズ（S,M,L,XL等）から設定することも可能です。

ブロックパネル：サイズ

パディングやマージンを設定することができます。
こちらもあらかじめ設定された値、もしくは任意の数値・単位で設定が可能です。

ブロックパネル：枠線

枠線・角丸を設定することができます。

ブロックごとの機能と使い方（見た目に関するブロック）

ここからは各ブロックの使い方・機能について解説していきます。

段落ブロック

通常のテキスト入力ブロックです。

メニューバー

メニューバーに関しては先ほどの「④メニューバー」で説明した内容と被るので割愛します。

見出しブロック

H1 ～H6までのレベルの見出しを追加することができます。
※見出しレベルは文字の大きさを変えるために変更するのではなく、文書構造を定義するために使用するようにしましょう。

①配置

コンテンツの配置を変更できます。
「幅広」「全幅」などを選択できます。
ここの設定に関しては過去記事を参照してください。

【WordPress】フルサイト編集に対応したブロックテーマの作り方と実案件への活かし方【①準備～ヘッダー・フッター構築まで】|UCHIWA Creative Studio

WordPressブロックテーマを自分で作ろう！ クラシックテーマから進化した新時代のテーマで、コードなし（ローコード）…

②レベルの変更

H1 ～H6までの中から変更できます。

リストブロック

リスト形式のブロックを追加できます。

①順序なしリスト

リストのスタイルを記号（●やチェック）などで並べます。
順番に並べなくても文章構造として成立する場合に使用します。

HTML表記では<ul>が使用されます。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
</ul>

②順序付きリスト

リストのスタイルを数字やアルファベットを用いて順番に並べます。
手順やランキングなど、順番に意味があるときに使用します。

また、「順序付きリスト」を選択した際は右のブロック設定パネルからリストのスタイルを変更することができます。

HTML表記には<ol>が使用されます

<ol>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
</ol>

HTMLのタグが異なるということは文章構造の意味が異なるということなので、検索エンジンに正しく評価してもらうためにも、きちんと使い分けをしましょう。

引用ブロック

他者の文章や参考情報を抜粋して紹介するためのブロックです。
WordPressでは「引用」ブロックを使うと、見た目が引用らしく整い、HTML的にも適切にマークアップされます。

「引用元を追加」から引用元は必ず記載するようにしましょう。

コードブロック

プログラムコードやタグをそのまま表示するためのブロックです。
普通の文章だと、HTMLタグがブラウザに解釈されてしまいますが、
コードブロックを使うと加工せずにそのまま文字として表示されます。

エンジニアやプログラマーがブログを運営していく際に使用する可能性のあるブロックですが、
見た目や拡張性が微妙なので大抵の場合はプラグインを導入してこのブロックは使用しないことの方が多いと思います。

詳細ブロック

クリックすると内容が開閉する 折りたたみ式のブロックです。
FAQ や補足説明など、必要な人だけが読めるようにしたい内容に便利です。

整形済みテキストブロック

入力した改行・スペースをそのまま保って表示するためのブロックです。
文章の形（フォーマット）を崩さずに見せたいときに使います。

※あまり使用頻度の多くないブロックだと思います。

下記でその違いが分かるかと思います。

プルクオートブロック

文章の中から特に強調したい一部を、デザイン的に大きく目立つ形で抜き出して表示するためのブロックです。

プルクオートと引用の違い

一言でまとめるなら

• 引用（Quote）＝文章を正しく引用するもの
• プルクオート（Pullquote）＝記事内で映える目立つ装飾引用

背景画像を入れると下記のように見た目を変えることも可能です。

LPなどのページでキラーコピーを掲載する際に使えそうです。

テーブルブロック

行と列を持つ表（テーブル）を作成できるブロックです。

商品比較、料金表、スペック一覧など、
「情報を整理して見やすく並べたい」場面で使われます。

「＋」から テーブル ブロックを選択し、「カラム数」「行数」を選んで表を作成で空の状態のテーブルを作成できます。

「表を編集」ボタンから、行やカラムの追加や削除を後から行うことも可能です。

「表のセル幅を固定」にチェックを入れると、全てのセルが同じ幅に固定されます。
カラムごとの文字列の長さに合わせてセル幅が可変になります。

「ヘッダーセクション」にチェックを入れると表見出しを挿入することができます。
ただし、列見出しのみ可能で、行見出しを入れることは不可能です。

「スタイル」ではテーブルの見た目を変更できます。
見た目に関してはテーマに依存しますが、WordPressのデフォルトテーマでは「ストライプ」が用意されています。

画像ブロック

画像を挿入・編集するためのブロックです。
ブログ記事、LP、商品ページなど、ほぼすべてのページで使われる基本ブロックです。

①配置

画像ブロックのツールバーからワンクリックで配置変更できます。

• 左寄せ（文字を回り込ませる）
• 中央寄せ
• 右寄せ（文字回り込み）
• なし（コンテンツ幅）
• 幅広（幅広コンテンツ幅）
• 全幅

②デュオトーンフィルター

デュオトーンフィルターは、画像を2つの色で再マッピングします

③リンク

画像にリンクを設定します。

• URLを入力した先へのリンク
• 画像ファイルそのものへのリンク
• 画像をクリックした際の拡大表示

④切り抜き

画像の切り抜きを行うことができますが、使い勝手が微妙なため、基本的にはWordPressに画像を投稿する前に画像編集ソフトで加工しておくことをお勧めします。

⑤画像上にテキストを配置

「カバーブロック」への変更を行います。
※カバーブロックについては後述します。

⑥キャプションを追加

画像に対してキャプションを追加します。

⑦置換

画像を別の画像に置き換えることができます。

ギャラリーブロック

複数の画像を「まとまりのある一覧」として配置できるブロックです。

写真を

• 横並び
• グリッド表示
• 均等配置

で見せたいときに最適です。
ブログ記事、商品紹介、LP、制作実績ページなどでよく使われます。

ギャラリーブロックでできること

• 複数画像の追加
• 並び替え（ドラッグ＆ドロップ）
• 列数の設定（左側のパネルで設定）
• 画像サイズ（サムネイル・中・大・フル）
• リンク設定
• キャプション（画像ごと）
• スタイル（テーマ依存）

ギャラリーブロックの正しい使いどころ

• 画像を「綺麗に等間隔で」並べたいとき
• 写真一覧ページ
• Before/Afterの複数比較
• スマホでも自動的に縦並びにしてほしいとき

ギャラリーブロックの注意点

• 同じ高さでそろわないことがある⇒横長の画像と縦長が混ざると“高さがばらける”ことがあります。
• カスタムCSSでの調整はテーマ依存
• 大きい画像を大量に入れるとページが重い

音声ブロック

使ったことが無いので割愛します。
多分シンプルに音声プレーヤーを埋め込むブロックだと思います…

カバーブロック

背景に画像（または動画）を敷き、その上にテキストなどのコンテンツを重ねられるブロックです。

LPのヒーローエリア、見出しセクション、区切りの演出など
デザイン性が必要な場面でよく使われます。

背景に画像または動画を設定

メディアライブラリから画像を選択。
動画ファイル（MP4）も使用可。
メディアの幅も幅広、全幅などに変更可能。

オーバーレイ（上にかぶせる半透明色）

背景の上に カラーオーバーレイ を追加できます。

設定項目：

• 色（例：黒、白、ブランドカラー）
• 不透明度（0%〜100%）

文字を読みやすくするために最重要。

固定背景（パララックス風）

「固定背景」をONにすると
スクロールしても背景が固定されて、パララックスっぽい演出になります。

背景の焦点位置の調整

画像をどこを中心に見せるか（例：上・中央・下）を指定できます。
人物写真や製品写真で重要。

中のテキストやブロックを自由に配置

カバー内に置ける要素は以下：

• 見出し（H2/H3など）
• 段落
• ボタン
• カラム
• 画像
• ほぼすべてのブロック

カバーは「セクション」のように中にブロックを入れられるのが特徴です。
上手く組み合わせれば下記のようなヒーローヘッダーを作ることができます。

ファイルブロック

PDF、ZIP、Word、Excel などの “ダウンロード可能なファイル” を記事内に設置するためのブロックです。
ブログ記事、マニュアル、資料配布ページ、社内ポータルなどでよく使われます。

ファイルのアップロード・選択

対応ファイル例：

• PDF
• ZIP（圧縮ファイル）
• Word（.docx）
• Excel（.xlsx）
• PowerPoint（.pptx）
• テキスト
• 画像
• その他の一般的ファイル

“ファイル名” が自動で表示

例：「資料ダウンロード.pdf」

表示されるファイル名はクリックして編集可能です。

ダウンロードボタンの表示・非表示

右側のブロック設定から、
「ダウンロードボタンを表示」 をON/OFFできます。

• ON → 「ダウンロード」ボタンが表示
• OFF → ファイル名だけのリンクになる

ファイルブロックの使いどころ

• PDF資料の配布
• Excelテンプレート提供
• ZIPにまとめた素材配布
• Word原稿の配布

ファイルブロックの注意点

• WordPressにアップロードしたファイルはURLを知っていれば誰でもアクセス可能
• 見栄えはテーマ依存
• 大きすぎるPDFは読み込みが遅い(1〜3MB程度推奨)

メディアとテキストブロック

「画像（または動画）」と「テキスト」を左右に並べて配置できるレイアウトブロックです。

①垂直配置を変更

画像とテキストをどの位置にそろえて配置するかを変更できます。
「上揃え」「中央揃え」「下揃え」から選択できます。

②メディアを左に表示

画像を左側に配置します。

②メディアを右に表示

画像を右側に表示します。

幅の比率調整

メディアの幅のスライダーの比率をドラッグして

• 画像：テキスト = 1:1
• 画像が大きめ
• テキストが広め

など自由に調整できます。
また、モバイル時の画面では画像とテキストを縦に並べて表示する設定も可能です。

テキスト側に入れられるもの

テキスト側は「複数ブロック」を自由に入れられます。

入れられる例：

• 段落
• 見出し
• ボタン
• リスト
• カラム
• 引用
• グループ など

動画ブロック

WordPress に動画ファイルを直接アップロードしてそのままページに埋め込むためのブロック です。

画像ブロックの “動画版” のような存在で、
動画ファイルをメディアライブラリまたは外部URLから挿入できます。

①自動再生（Autoplay）

ページが読み込まれた瞬間に再生が始まります。
※モバイルでは 音声がある動画は自動再生されない ブラウザ仕様があります。

②ループ再生

動画が終わったら最初から繰り返し再生。

③ミュート（消音）

無音での再生設定。
自動再生したい時は必ずミュートONにする必要があります（ブラウザ仕様）

④プレイバックコントロール

「シンプルにしたいのでUIを出さない」なども可能。

⑤インラインで再生

注意書きに書いてあることそのままです。

⑥ポスター画像

動画が再生される前に表示される 静止画サムネイル を設定。

アコーディオンブロック

クリックして展開／折りたたみできるコンテンツを作る、WordPress純正の折りたたみ式ブロックです。
FAQや補足説明など、長くなる文をまとめるのに最適です。

アコーディオンブロックは全体を包む親である「アコーディオン」とその子として複数の「アコーディオン項目」を設置することができます。
そして、アコーディオンパネルの中には恐らく多様なブロックを格納することが可能です。

「アコーディオン」の設定項目

親である「アコーディオン」として主に下記の3つが設定できます。

• 自動で閉じる⇒子の「アコーディオン項目」に対して常に1つのみ開くようにする。（他が開けば他は閉じる）
• アイコンの表示・非表示⇒「＋」アイコンを表示するかどうか
• アイコンの位置⇒アイコンを表示する場合左端に設置するか右端に設置するか

「アコーディオン項目」の設定

子である「アコーディオン項目」ではデフォルトで開いた状態にしておくかどうかを設定できます。
親の「自動で閉じる」の設定をONにした状態であっても、子の「アコーディオン項目」を複数展開状態にしておくことはできます。

ただし、どれかを操作するとそれがトリガーとなり、他の展開状態のアコーディオンは強制的に閉じられます。

機能の違い（比較表）

ここでよく似た機能を持つ、「詳細ブロック」と比較してみましょう。

※リリースされたばかりで、私もまだすべてを検証できていないのでここでは簡単な紹介とさせていただきます。

ボタンブロック

リンク付きのボタン（CTA）を作るための WordPress 標準ブロックです。

リンク設定

メニューバーの「リンク」から外部のURLもしくはWordPress内のページ名を入力してリンクを設定することができます。

また、リンク設定後に「リンクの編集」をクリックすると高度な設定を行うことができます。

• 外部サイトの場合は「新しいタブで開く」にチェック
• 外部サイトで且つあまり信頼でき無さそうなサイトの場合「nofollow」にチェック

というのが私の中での認識です。

スタイルの設定

ブロックの設定パネルのスタイルから選択できます。
標準テーマでは「塗りつぶし」or「輪郭」を設定できます。

その他の見た目の設定

他のブロックと同様に「テキスト色」「背景色」「タイポグラフィ」「サイズ」「枠線」などで調整できます。
矢印アイコンなどはデフォルトでは設定できないので各自で実装する必要があります。

ボタンブロックの構成

ボタンブロックは上記のように親子関係によって構成されています。

Buttons（親）でのレイアウト設定

子のブロックの設定は上述した通りですが、親ブロックでは主に「レイアウト」に関する設定を行います。
横向きの並び、縦向きの並び、ボタン間の余白などを主に調整できます。

カラムブロック

カラムブロック（Columns ブロック）は、WordPress 標準のレイアウトブロックで、ページや記事の中に 複数の縦分割レイアウト（横並び） を作るためのブロックです。
サイトのデザインを整えたいときに非常に多用されます。

レイアウト設定

カラムは1~6カラムまで設定可能です。

また、カラムブロック追加時には上記のようなあらかじめ用意されたプリセットが選択できます。
「1:1」「1:2」「2:1」「1:1:1」など基本的な比率を選択することができます。

これ以外の独自の比率、もしくは固定値で設定したい場合は、子のカラムブロックの設定パネルから数値を入力することで変更可能です。

カラムブロックの構造

カラムも先ほどのボタンブロックと同様に、Colums(親)とColumn(子)の親子関係で構成されています。

グループブロック

グループブロックは、WordPress のブロックエディターにおける「最も基本で重要なコンテナ（箱）」 です。
後述する「横並び」「縦並び」「グリッド」ブロックの“土台”にもなる存在なので、ここで一度しっかり整理します。

グループブロックとは複数のブロックをひとまとめにして、共通のレイアウト・デザインを適用するためのブロックです。

• 中に どんなブロックでも入れられる
• 背景色・余白・枠線などを 一括管理
• レイアウトの基礎単位として使う

グループブロックの役割

• セクションを作る⇒ページを「見出し＋本文＋ボタン」などの 意味のある塊 に分ける
• レイアウトブロックの親になる⇒Group 自体が、「縦並び」「横並び」「グリッド」のいずれかのレイアウトを持てます。

グループレイアウト

• ①横並び
• ②縦並び
• ③グリッド

グループブロックはそれ自体が中身を「整列」するための仕組みを持っています。
それぞれの詳細について後述します。

幅の制御

• コンテンツ幅
• 幅広 / 全幅

「背景は全幅・中身は中央寄せ」などが簡単にできます。

後からでも設定可能

グループブロックは最初から「グループブロック」を選択して追加する方法と、グループを複数選択して、「Ctrl+G」で後からグループとしてまとめる方法のどちらでも追加可能です。

横並びブロック

横並びブロックとは中に入れた複数のブロックを「1列に横方向へ整列」させるためのレイアウト用ブロックです。
そしてグループブロックのレイアウト違いです。

カラムブロックとの違い

横並びブロックは、アイテムを隙間なく順番に並べるイメージです。

基本的には中身のサイズ（文字数や画像の大きさ）によって、それぞれの幅が自動で決まります。
ただし、子要素にはfill（flex-grow）やfixed(flex-basis)を指定できるので、あえて意図的に幅を変更するということも可能です。

おすすめの場面

• 「詳しくはこちら」と「お問い合わせ」のボタンを並べる
• SNSアイコンを横に並べる
• 日付とカテゴリタグを並べる
• ヘッダーメニューのようなナビゲーション

「ボタン」や「アイコン」など、中身が小さいものを並べるのに適しています。

どちらを使うべきか迷った時の判断基準

「スマホで見た時、縦一列になってほしいですか？」

• はい → カラムブロック
• いいえ（横に並んだまま、または自然に折り返してほしい） → 横並びブロック

「中身の文章量は多いですか？」

• はい（数行にわたる文章） → カラムブロック
• いいえ（単語や短いフレーズ） → 横並びブロック

縦並びブロック

縦並びもグループブロックの一種です。
ですが、見た目がほぼ同一なので、いまいちその違いが分かりにくいかと思います。

中身の「幅」のコントロール

グループブロックの場合デフォルトで「コンテント幅を使用するインナーブロック」にチェックがついています。
これは中身のブロックの横幅をあらかじめ設定してあるコンテンツ幅にするか、それともこのグループ内のみで使用するコンテンツ幅を自由に決定する機能です。

この状態で中身を「中央配置」に設定すると下記の画像のようになります。

これは中身のブロック「見出し」「画像」「段落」の横幅がすべてコンテンツ幅に設定されていて、さらに中央配置になるためにこのような見た目になります。

一方で縦並びブロックで上記のように中央配置に設定すると見た目は下記のようになります。

これは、縦並びブロックを使用した場合、中身の要素はその要素自身が持つ幅になるためです。

これはdisplay:flexというCSSの仕組みが関係していますが、この記事ではコーディングに言及することは避けます。

グリッドブロック

グリッドブロックもこれまでの「縦並び」や「横並び」と同様グループブロックの一種ですが、最大の違いは、「縦と横を同時に制御する（2次元レイアウト）」と、「中身のサイズではなく、枠のルールでレイアウトが決まる」ということです。

そして、グリッドブロックには、大きく分けて2つの使い方（モード）があります。

「自動（Auto）」モード：レスポンシブの自動化

カラムブロックでは「PCでは3列、スマホでは縦に1列」と指定する必要がありましたが、グリッドの自動モードでは「最小幅（例: 250px）」だけを指定します。
グリッドブロックは、そのルールに基づき、親コンテナの幅いっぱいに要素を並べようとします。

• PC（広い画面）： 親コンテナの幅が1000pxある場合、250pxの要素が4つ（4列）きれいに収まります。
• タブレット（中画面）： 画面を狭めて親コンテナの幅が700pxになった場合、250pxの要素は3つ目を入れると750pxを超えてしまうため、自動的に3列目以下を次の行に折り返します。
• スマホ（狭い画面）： 親コンテナの幅が400pxになった場合、250pxの要素は1つしかきれいに収まりません（2つで500px）。そのため、自動的に2列目以下を次の行に折り返します。

「手動（Manual）」モード：自由な配置（弁当箱レイアウト）

行数や列数を固定し、その中の要素を自由に伸ばしたり縮めたりできます。

• 例： 「左上の画像は、縦2行分・横2列分の大きさ」「その隣は1マスの大きさ」
• いわゆる「Bento（弁当箱）グリッド」のような、大小の四角形が組み合わさったモダンなレイアウトが簡単に作れます。

子ブロックでの制御

子ブロック側でグリッドのどのマス目を占有するかを設定することも可能です。

「カラム」や「横並び」との違い（技術的視点）

続きブロック

「続き」ブロックの目的は、ブログのトップページやアーカイブページで、記事の全文表示を防ぎ、要約（抜粋）のみを表示することです。

具体的な機能

• 記事の分割点の設定: 「続き」ブロックを挿入した場所が、記事の「抜粋」と「本文」の境界線となります。
• アーカイブページでの表示: ブログのトップページやカテゴリ一覧ページでは、「続き」ブロックより前の部分だけが表示され、その後ろに「続きを読む」といったリンクが表示されます。
• 単一記事ページでの表示: 記事の個別ページ（記事をクリックして開いたページ）では、「続き」ブロックは非表示になり、全文が途切れることなく表示されます。

こんな感じになります。
↓

まあ、個人的には一度も使用したことが無いブロックです…

ページ区切りブロック

ページ区切りブロックとは一つの投稿や固定ページを、複数の画面（ページ）に分割するために使われる特殊なブロックです。
「ページ区切りブロック」を挿入すると、投稿の表示がその場所で区切られ、ページの下部または上部にページ番号のナビゲーション（Pagination）が表示されます。

具体的な機能

• 長文の分割: 非常に長い記事や、連載記事、マニュアルなど、内容を分割して順を追って読ませたい場合に利用します。
• ナビゲーションの自動生成: ページ番号（例: 1, 2, 3, 4）や「次へ」「前へ」といったリンクが自動で生成されます。
• 読み込み負荷の軽減: 記事全体を一度に読み込ませるのではなく、ページごとに読み込ませるため、特にモバイル環境での初回の読み込み速度を改善できます。

こんな感じになります。
↓

区切りブロック

「区切り（Separator）ブロック」は、一言で言うと「水平な線（仕切り線）」を引くためのブロックです。
見た目はテーマに依存します。

スペーサーブロック

「スペーサーブロック」は、「何もない空白（余白）」を作るためだけの非常にシンプルなブロックです。
もう、ただそれだけです…これ以上は説明のしようがありません……

ブロックごとの機能と使い方（機能に関するブロック）

ここまでは、Webサイトの「見た目」を中心にコントロールするブロックについて解説してきました。
しかし、Webサイトを成り立たせるためには、デザインだけでなく「機能」も欠かせません。
（例：検索、アーカイブ、コメント など）

ここからは、こうしたWebサイトの「機能」を担うブロックを中心に紹介していきます。

アーカイブブロック

アーカイブブロック（Archives）は、 過去の投稿を「月別・年別」などの時系列で一覧表示するためのブロックです。
ブログ性の強いサイトでは、ナビゲーション補助ブロックとしてよく使われます。

クリックすると、その期間に投稿された記事一覧ページへ遷移します。
主にサイドバーやフッターなどに設置されることが多い「ウィジェット」と呼ばれるグループのブロックです。

ドロップダウンで表示

ドロップダウンで表示のトグルをONにすると、一覧表示ではなく、セレクトボックスから選択するUIに変化します。
こんな感じ
↓

投稿数を表示

投稿数を表示のトグルをONにすると、アーカイブリンクの隣に、投稿数が表示されます。
こんな感じ
↓

グループ化

グループ化のドロップダウンからはアーカイブの表示単位を変更することができます。
「年」「月」「週」「日」から選択することができます。

カレンダーブロック

カレンダーブロック（Calendar）は、 投稿がある日付を「月間カレンダー形式」で可視化するブロックです。
アーカイブブロックと同じく、過去記事への導線を作るための補助的ブロックになります。

投稿がある日付については、画像のようにリンクが付与され日別のアーカイブページにリンクする仕組みになっています。

デザイン自由度が低い

設定項目は何も無いので、CSS での見た目の微妙な調整は可能ですがブロック単体ではほぼ変更不可能と考えて良いでしょう。

記事が少ないと意味が薄い

月に数記事程度だと、リンクがまばらになって、あえてカレンダー表示にする意味は薄くなります。

ターム一覧ブロック

ターム一覧ブロック（Term List）はカテゴリーやタグなどの「タクソノミーに属するターム」を一覧表示するためのブロックです。

対応タクソノミー

• カテゴリー
• タグ
• カスタムタクソノミー

ドロップダウンで表示

ドロップダウンで表示のトグルをONにすると、一覧表示ではなく、セレクトボックスから選択するUIに変化します。

投稿数を表示

投稿数を表示のトグルをONにすると、アーカイブリンクの隣に、投稿数が表示されます。

最上位レベルの項目のみを表示

タクソノミーが「階層」を許可している場合は、一番上位階層のタームのみを表示するようにする設定です。
ここをONにすると後述する「階層を表示」の項目が自動的に消滅します。

空のタームを表示

空のタームを表示のトグルをONにすると、属する記事が1つもないタームでも一覧に表示することができるようになります。

階層を表示

階層を表示のトグルをONにすると、画像のように階層化構造されて表示されます。
単なる見た目の変化だけではなくHTML構造も変化します。

【階層化OFF】

<ul>
 <li><a>カテゴリー1<a/></li>
 <li><a>カテゴリー2<a/></li>
 <li><a>カテゴリー3<a/></li>
</ul>

【階層化ON】

<ul>
 <li><a>カテゴリー1<a/></li>
 <ul>
  <li><a>カテゴリー2<a/></li>
  <li><a>カテゴリー3<a/></li>
 </ul>
</ul>

カテゴリー一覧

恐らく「タクソノミー一覧」ブロックと全く同じ機能…？？

カスタムHTMLブロック

カスタム HTML ブロック（Custom HTML）は、エディター上で HTML を直接記述・埋め込みできるブロックです。
「ブロックでは表現できないものを、最小限のコードで補う」ための非常用・拡張用ブロックという位置づけです。

• HTML をそのまま書ける
• 保存時に WordPress による自動整形（<p> など）が入らない
• iframe / script / SVG なども記述可能
• プレビュー表示で即座に確認できる

などの特徴があります。

HTML の直接埋め込み

<div class="notice">
  <strong>重要：</strong>内容をご確認ください
</div>

外部サービスの埋め込み

<iframe src="https://example.com/embed"></iframe>

<script src="https://example.com/widget.js"></script>

PHP は書けない

<?php the_title(); ?>　//←×

CSS / JS の管理には不向き

インライン CSS / JS は可能ですが、保守性は低いので不向きといえるでしょう。

実務での使いどころ

• ブロック未対応のマークアップ
• 外部ウィジェット（フォーム・チャット・マップの埋め込みなど）
• どうしてもブロックで再現できない細かなレイアウト調整

最新のコメントブロック

「最新のコメント」ブロック（Latest Comments）は、直近に投稿されたコメントを一覧表示するためのブロックです。
サイトの「動き」や「人の気配」を伝える、コミュニティ要素のある補助ブロックという位置づけになります。

• 新しく投稿されたコメントを自動取得
• 各コメントは 該当投稿＋コメント位置へのリンク
• 主に サイドバーやフッターに配置される

ポイントは、「表示されているページに投稿されているコメント」ではなく、「サイト全体に投稿されたコメント」を表示するという点です。

設定項目

右側のブロック設定パネルから下記の設定を変更できます。

• アバターを表示：左横に表示されるあばた画像の表示・非表示の切り替え
• 日付を表示：コメントの投稿された日時の表示・非表示の切り替え
• 抜粋を表示：コメント内容の表示・非表示の切り替え

注意点

投稿へのコメント機能がONになっていること、コメントにスパム対策が施されていることが前提となります。

最新の投稿ブロック

「最新の投稿」ブロック（Latest Posts）は、新しく公開された投稿を自動で一覧表示するためのブロックです。

• 公開日時の新しい順に投稿を表示
• 各項目は 投稿詳細ページへのリンク
• 手動更新不要（自動反映）

という特徴があります。

投稿コンテンツを表示

タイトルだけでなく、投稿本文を表示します。
「コンテンツの長さ」では抜粋か投稿全文を表示するかを選択できます。
抜粋を選択した場合にのみ、表示する抜粋文の最大文字数を指定することができます。

こんな感じで表示されます。
↓

投稿メタ

投稿者名や投稿日を表示します。

こんな感じ。
↓

アイキャッチ画像の追加

アイキャッチが設定されている投稿のアイキャッチ画像を表示します。

画像サイズの他、画像の配置位置、画像に対して投稿リンクを付与するかどうかを設定できます。

並べ替えと絞り込み

• 並び順：「最新から」「過去から」「A-Z」「Z-A」の並び順から選択できます。
• カテゴリー：カテゴリーを絞り込んで表示できます。（※プルダウンではなく、直接入力）
• 投稿者：投稿者を絞り込んで表示します。
• 項目数：何件表示するかを指定します。

固定ページリストブロック

「固定ページリスト」ブロックは、サイト内の固定ページ（page）を一覧表示するためのナビゲーション用ブロックです。

• 公開されている 固定ページを自動で取得
• 親子関係（階層）を保持して表示
• 各項目は 該当ページへのリンク
• 手動でメニューを更新する必要がない

親

設定項目は「親」指定のみで、親ページを指定するとそれに紐づく子ページのみが表示されるようになります。

こんな感じ
↓

RSSブロック

RSS ブロック（RSS）は、外部サイトの RSS フィードを取得して、投稿一覧のように表示するためのブロックです。
「他サイトの更新情報を自サイト内に埋め込む」ための外部連携用ブロックと考えると分かりやすいです。

• 指定した RSS / Atom フィードの URL を読み込む
• 最新記事のタイトル（＋日付・抜粋）を自動表示
• 各項目は 元サイトの記事ページへのリンク
• 手動更新不要

RSSフィードURL

外部サイトのRSSフィードURLを入力して「適用」を押します。

すると上記のように外部サイトのページを自サイトに埋め込むことができます。
（今回はテストとして自分自身のサイトを使用していますが…）

設定項目

基本的な設定項目は「最新の投稿」ブロックや「固定ページリスト」とほぼ同一なので割愛しますが、「新しいタブでリンクを開く」に関しては自サイトとの文脈を切らせないためにも基本的にはONで良いと思います。

注意点

• デザイン自由度は低い：リスト表示が基本でカード化は不可
• 相手サイトのRSSに依存：相手サイトがフィード停止している場合、もしくはフィードをそもそも設定していない場合は表示不可
• 表示内容は相手次第：抜粋が極端に短い / 長いことがある

検索ブロック

検索ブロック（Search）は、WordPress 標準ブロックで、サイト内検索フォームを設置するためのブロックです。
訪問者が「自分で情報を探せる入口」を用意する、ナビゲーション補助・回遊支援ブロックに位置づけられます。

• サイト内の投稿・固定ページを対象（カスタム投稿は対象外）に検索
• WordPress 標準検索機能を使用
• フォームを配置するだけで即利用可能
• プラグイン不要

という特徴があります。

任意のプレースホルダー

設定項目のうちの一つとして、プレースホルダーを設定できます。
例えば、「キーワードを入力してください」など。

ラベル表示

ラベルを非表示にします。
（アクセシビリティとしてlabelタグはそのまま残り、あくまでも視覚的に非表示にします）

ボタンの位置

入力欄の内側/外側、ボタンの有り無しなどを選択して、検索フォームの見た目を変更します。
※「ボタンのみ」の場合はボタンをクリックした瞬間に、入力フォームが現れる仕組みになっています。

アイコンの有り無し

ボタンの見た目をアイコン有/無で変更します。

幅

フォーム全体の幅を選択することができます。
ですが、プレースフォルダーのテキストの長さやボタンの大きさなども考慮する必要があるため、なかなか完全に制御するのは難しいと思います。

注意点

実はこの標準の検索ブロックは一般的にWebサイトに求められる検索機能に比べて、精度や機能性がそこまで高くありません。

• タイトル・本文からのみの単純一致
• カスタムフィールドは検索対象外
• PDFなどの文章を添付していても検索対象外
• カテゴリーやタグ、その他のタクソノミーの絞込検索ができない

これらの機能を持つ高度な検索フォームが欲しい場合は、自作するかあるいは有料のプラグインなどを使用するほかはありません。

そもそも小規模、中規模サイト（数十ページ程度）であれば、検索フォームは不要、というのが私の持論ではあります…

ショートコードブロック

ショートコードブロックは、ショートコード専用の入力枠です。

そもそもショートコードとは？

ショートコード（Shortcode）とは、特定の記法を書くだけで、裏側で PHP の処理結果を表示できる仕組みです。
例えば下記はお問い合わせフォーム用のプラグイン（ContactForm7）で用意されているショートコードで、設定したお問い合わせフォームをページに埋め込むためのショートコードです。

エラー: コンタクトフォームが見つかりません。

カスタムHTMLブロックとショートコードブロックの違い

注意点

• 見た目が分かりづらい：エディター画面にはコードが表示されるだけで、結果は表示されない
• 将来の保守性：プラグインの保守が停止され、表示が崩壊する可能性も…
• ブロック化推奨：新規開発では ブロックとして提供するのが良いかも

ソーシャルアイコンブロック

ソーシャルアイコンブロック（Social Icons）は、SNS や外部プロフィールへのリンクを、アイコン形式でまとめて表示するためのブロックです。
フッター・ヘッダー・プロフィール欄などで使われる、視認性重視のナビゲーション補助ブロックです。

レイアウト

横並び・縦並びブロックなどと同様にレイアウトを設定することができます。

アイコンサイズ

テキスト表示

「テキスト表示」のトグルをONにすると、アイコン＋テキストの形式で表示されます。

対応するサービス

ご覧の通り、紹介しきれないほどのサービスがあり、世のソーシャルサービスと呼ばれるものはほぼほぼ網羅できていると考えても良いかと思います。

タグクラウドブロック

タグクラウドブロック（Tag Cloud）は、タグなどのタームを「出現頻度の差」を使って視覚的に表示するためのブロックです。

タクソノミー

「タグ」クラウドという名称こそついていますが、実はタグ以外にもカテゴリーやカスタムタクソノミーにも対応しています。

テキストサイズの最小値と最大値

使用頻度の差をどれくらい強調するか、という設定です。
※あまり差を大きくし過ぎるとかえって読みづらくなるので注意が必要です。

タグの数を制限

あまりにもタグの数が多い場合は、表示数を制限して見やすくするのもアリです。
ですが、タグがあまりにも多いというのはWebサイトの設計や運用そのものが間違っている可能性が有るので、「本当にそのタグ必要？」ということを一度整理してみると良いと思います。

タグの数の表示

「タグの数を表示」のトグルにチェックをつけるとタグの右側に、タグと紐づけられた記事の総数が表示されるようになります。

主な用途

• 人気トピックの可視化：技術ブログ、ナレッジサイトなど
• サイドバーの探索補助：「何が多いサイトか」を示す
• 回遊促進：興味関心ベースでの記事探索

類似ブロックとの違い

傾向を見せたい場合はタグクラウド、分類で探させたい場合はターム一覧を用いると良いと思います。

注意点（実務では重要）

• タグ設計が前提：無秩序なタグ運用だと崩壊を起こします。
• モダンUXでは好みが分かれる？：情報量が多すぎに見えてしまう可能性も…
• SEO効果は限定的：内部リンクが増えるだけで乱用は逆効果になる可能性もあります。

ブロックごとの機能と使い方（テーマ（＝サイト構造）を構成するためのブロック）

ここからは「テーマ」に属するブロックを紹介していきます。
WordPress のブロックカテゴリー 「テーマ」 に属するブロックは、

• 表示する中身を自分で書かない
• WordPress が持つ“文脈（Context）”を表示する
• 主にテンプレートで使う

という共通点があります。

ナビゲーションブロック

ナビゲーションブロックは、サイトのメニュー（グローバルナビ／フッターナビなど）をブロックで構築・管理するためのブロックです。
従来のWordPressの機能の「外観 → メニュー」の役割を ブロックエディタに統合したものです。

メニューの編集

デフォルトでは固定ページの一覧とその親子関係が反映されたものが表示されます。
並び順の変更や、そもそもナビゲーションとして載せない、など自由に編集を行うことができます。

表示方式

• 常時ハンバーガーメニュー（常時）
• モバイルでハンバーガーメニュー（モバイル）
• ハンバーガーメニューにしない（オフ）

の3パターンの表示方式から選択できます。

また、親子関係のあるメニューについては、

• クリックした際に展開されるようにするか（デフォルトではマウスホバーで展開）
• アイコンとして矢印を設置するか

という表示方式の変更も可能になっています。

従来の「メニュー」との関係（重要）

ナビゲーションブロックは既存の「メニュー」を読み込むこともできますし、逆にブロック側で作ったナビはメニューとして保存されます。
つまり、これはクラシックテーマでもブロックテーマでも一度作ったメニューは共有できるということです。

注意点

基本的にシンプルなテキストリンクのみとなっているので、英語表記と併せて表示したい場合、アイコン付きで表示したい場合などには不向きです。
また、ハンバーガーメニュー展開時のアニメーションなどもシンプルなものとなっており、リッチなヘッダーメニューを作成したい場合には独自でカスタマイズを施す以外にありません。

サイトロゴブロック

これはもうそのままの意味のブロックです。
ロゴを表示します。以上。

用途としては主にヘッダーやフッターになると思いますが、使用箇所によって画像のサイズの変更も行うことができますし、ホームへのリンクを付与するかどうかの選択も行えます。
また、「サイトアイコンとして使用する」にチェックを着けた場合は、自動でファビコンなどにも流用してくれます。

サイトタイトルブロック

こちらももうそのままの意味のブロックです。
サイトのタイトルを表示します。

サイトのキャッチフレーズブロック

こちらももうそのままの意味のブロックです。
サイトのキャッチフレーズを表示します。

これら3つの設定はWordPressの「設定」⇒「一般設定」から行うことができます。
ですが、仮にここでのの設定を行っていなくても、ブロックの挿入時にこれらの設定を行うことができるようになっています。

クエリ―ループブロック

クエリーループブロック（Query Loop）は、「投稿一覧を取得する処理（WP_Query）」を、ブロックだけで扱えるようにしたものです。

• 投稿・固定ページ・カスタム投稿を取得
• 条件を指定して一覧表示
• ページネーションの設置

など、「お知らせ一覧ページ」を構成するための要素が、ほとんどこのブロックだけで完成してしまう非常に優れたブロックです。

①見た目の選択

ブロックの挿入時にはまず、既存のテンプレートから「選択」するか、「新規」で自分で作成するかを尋ねられます。

「選択」を選んだ場合は、既存のテンプレートの中から気に入ったものを選択し、設置することができます。

「新規」を選んだ場合には、基本的な表示項目のみが提案されますが、見た目やレイアウトなどは自分で作りこんでいくことになります。

②クエリ内容の設定

デフォルトでは「投稿」タイプから「最新」の記事を「10件」表示するという設定になっています。
クエリ―タイプを「カスタム」にすると、それらの条件を自分で独自に設定することが可能になります。
主な設定項目は下記になります。

• 投稿タイプ：「投稿」「固定ページ」「カスタム投稿」から選択
• 並び順：「時系列順」or「文字列順」
• ページあたりの表示数：スライダーで設定可能
• 絞り込み：「作成者」「キーワード」「タクソノミー」「フォーマット」で絞込可

③クエリ―ループブロックの構造

[クエリ―ループ]
 └ [投稿テンプレート]
     ├ [投稿タイトル]
     ├ [アイキャッチ画像]
     ├ [投稿抜粋]
     └ [投稿日時]
 └ [ページ送り]
 └ [結果無し]

• クエリ―ループ：取得条件
• 投稿テンプレート：1記事分の設計
• 投稿テンプレート中のブロックは「繰り返される」

「クエリ―ループブロック」以下のブロックの中身に関しては自分自身で設計することができます。
次のセクション以降でどのようなブロックがあるのかについては解説しますが、例えば「ページ送りを無しにする」「投稿テンプレートの中にアイキャッチ画像を含める」ということも可能です。

一部適さないものもありますが、クエリ―ループ以降に並べられているブロックは基本的に「クエリ―ループ」あるいは「投稿テンプレート」の中で使用できるブロックだと思って良いかと思います。

タイトルブロック

記事のタイトルを表示するためのブロック。

記事の中にそのままブロックを設置した場合は、その記事のタイトルが表示されます。

クエリ―ループ内の投稿テンプレートの中に含めた場合は、各記事のタイトルが繰り返し表示されます。

また、見出しレベルを変更することができるので、文脈に合わせた設定が可能となっています。

抜粋ブロック

抜粋ブロックは、投稿の「抜粋（要約）」を表示するためのテーマブロックです。

ここでいう抜粋は WordPress の持つ投稿フィールドの1つであり、

• 編集画面の「抜粋」欄に入力したテキスト
• 未入力なら本文の冒頭を自動抽出（テーマ仕様による）

という形になります。

「タイトルブロック」と同様に、記事の中で使用すれば、その記事の抜粋が、クエリ―ループの投稿テンプレートの中で使用すれば、その記事ごとの抜粋が出力されます。
（ですが、記事の中で使用する場面はほぼ無いと思います…）

リンクテキスト

リンクテキストは自身で自由に変更できます。

また、「リンクを新しい行に表示」を選択することで、抜粋文から改行せずにそのままリンクを設置します。

抜粋文字数

WordPressのデフォルトで定められている文字数を変更して、個別に抜粋文字数を変更することも可能です。

投稿のアイキャッチブロック

投稿に設定されているアイキャッチ画像（Featured Image）を表示するためのブロックです。
こちらは主に2つの用途で使用されます。

• ページのヘッダー部分（heroImage）に使用する
• クエリーループの中に配置して、記事一覧にサムネイルを表示する

画像のリンク設定

投稿へリンクする / しないを選択できます。
一般的には一覧でクリック→記事へ遷移という形が多いです。

投稿者ブロック

一言でいえば投稿を執筆した人の名前やプロフィール情報を表示するブロックです。
記事本文の下やカード型レイアウトなどに配置され、読者に「誰が書いた記事か」を明示できます。

どのような場面で使う？

例えば記事最下部に「この記事を書いた人」という形で表示しても良いですし、

記事一覧カードに「投稿者」などのようにメタ情報として付与するのもアリです。

設定項目

• アバターの表示/非表示
• 自己紹介文の表示・非表示（ユーザー設定の内容）
• 投稿者名をリンクにするか

作成者名ブロック

「作成者名」ブロックは、現在表示している投稿（または固定ページ）を誰が作成したかを示すためのブロックです。
名前が似ているため、投稿者ブロックと混同されやすいですが、役割や使われ方が異なります。

「作成者名」と「投稿者」の違い

違いは「情報量」と覚えておくと良いでしょう。

コメント数ブロック

「コメント数」ブロックは、その投稿に付いているコメントの数を表示するためのブロックです。
特にブログ型サイトやメディア・ニュースサイトなど、ユーザーの反応量（コメントの多さ）を示したいときに使われます。

投稿記事内、クエリ―ループ内どちらでも使用できます。

日付ブロック

日付ブロックは投稿や固定ページの公開日（または更新日）を表示するためのブロックです。
また、「投稿日」ブロック、「変更日」ブロックも同一の機能を持ちます。

バリエーションへの変更

このセレクトボックスを変更することで、「投稿日」と「変更日」のブロックを簡単に切り替えることができます。

書式の変更

日付表示のフォーマットを変更できます。
「Y-m-d」や「Y.m.d」など。

UX / SEO の観点

SEO観点では直接の順位要因にならないものの

• 更新日の表示はGoogle検索に反映される場合がある
• ユーザーは鮮度で信頼性を判断する
• ニュース・技術・金融ジャンルでは非常に重要
• コンテンツの寿命（freshness）に寄与

などから下記のようなパターンで設定しておくのが良いかもしれません。

公開日：2023/12/01
最終更新日：2024/01/15

カテゴリーブロック

カテゴリーブロックは、投稿に紐づいているカテゴリー情報を表示するためのテーマ系ブロックです。
クエリ―ループ内や単一投稿ページの中に配置することで、ユーザーが分類情報を把握しやすくなります。

カテゴリー一覧との違いは？

似たようなブロックに、「カテゴリー一覧（ターム一覧）」というものがあります。
下記にその違いをまとめました。

「タグ」ブロックへの切り替え

ここのトグルを切り替えることで、「タグ」ブロックへと変更され、記事に紐づくタグの一覧が表示されます。

前の投稿＆次の投稿ブロック

「前の投稿」「次の投稿」ブロックは、単一投稿ページにおいて 前後の記事へのナビゲーションリンクを自動生成するテーマブロック です。
ブログの回遊性を高めるために非常によく使われる要素です。

タイトルをリンクとして表示する

次（または前）の投稿へのリンクをタイトル付きで表示します。

リンクの一部としてラベルを含める

デフォルトの場合は「前」「次」などの文言のみが表示されますが、「タイトルをリンクとして表示する」のトグルにチェックを入れた場合は、「前」「次」などのラベルを表示してリンクに含めるかどうかを選択できます。

矢印の種類

矢印の表示については「なし」「通常矢印」「シェブロン」の中から選択できます。
利用するテーマによってもこのあたりの選択肢や表示内容は異なります。

注意点

• 固定ページには意味がない：固定ページには通常「前後」の概念がないため機能はしますが文脈として意味をなさないでしょう。
• カスタム並び替えとは別物：プラグインで投稿順を並べ替えた場合でも公開日時が優先されます。

所要時間ブロック

記事を読むのに必要な推定時間を自動表示するテーマブロックです。
WordPress が記事本文の文字数や語数を基に計算し、「この投稿は〇分で読めます」といった形で表示されます。

どのように時間を算出している？

私自身もコードの中身を見ていないので、正確には分かりませんがどうやら下記のような基準で所要時間を計算しているようです。

平均読書時間に関しては諸説ありますが、下記のような基準もあるようです。

• 英語圏：200〜250単語/分
• 日本語：変動が大きいが一般的には400〜600文字/分

メリット

• ユーザーの離脱防止に有効：人は「所要時間が分からないもの」を避けがちなので。
• スマホユーザーとの相性が良い：モバイル読者はスキマ時間で読むため心理的メリットが大きい

というのが定説として挙げられていますが、個人的には影響度合いはそこまで高くないんじゃないかというのが所感です。
多くの人は、まず記事の全体を流し読みしたりあるいは目次を見て自分にとって有益そうであればそのまま読み進めますし、無益だと判断すれば離脱します。
「所要時間」はそこまで気にしない気がします。

単語数ブロック

単語数となっていますが実際には投稿本文に含まれる文字数を自動表示するテーマブロックです。
記事の情報量を伝える指標であったり、先の所要時間ブロックと同様に記事を読むのにどれくらいの時間を要するかを示す指標になります。
個人的にはあまり意味の無いブロックだと思います…

続きを読むブロック

続きを読むブロックは主にクエリ―ループブロック内で、記事へのテキストリンクを設置するためのブロックです。
記事へのリンクなので投稿ページ内に設置してもあまり意味がありません。

続きブロックとの違い

似たようなブロックに続きブロックというものがあります。
続きブロックは記事本文内に設置することで、その分割地点までを抜粋として生成します。
そして抜粋ブロックには、その分割地点以降は「続き」のリンクとして設置されます。

つまり、「続き」ブロックは抜粋ブロックが設置されることで初めて意味を持つブロックです。
一方で「続きを読む」ブロックは抜粋ブロック無しでも「続き」のリンクを生成することが可能です。

コメントブロック

コメントブロックは後述するコメント表示・フォーム・タイトルなどの要素をひとまとめにして表示するブロックです。
コメントに関しては大前提として、投稿のディスカッションがONになっている必要があります。

コメントタイトルブロック

コメントタイトルブロックは「投稿タイトル」＋「コメント件数」でその投稿へのコメントをタイトルとして表示するためのブロックです。

コメントテンプレートブロック

その投稿についたコメント一覧を表示するためのコンテナブロックです。

デフォルトでは下記のような構成になっています。
この中の配置や追加/削除は自由に行うことができます。

投稿コメントフォームブロック

投稿記事内にコメントフォームを設置するブロックです。
ディスカッションが許可されていないと表示されません。

ログイン / ログアウト ブロック

ログイン画面へのリンクとログアウト用のボタンを設置します。
ログイン状態か、ログアウト常態かで表示内容が異なります。

ターム数ブロック

ブロックテーマにおいてページテンプレートを構成するためのブロックです。
アーカイブページ用のテンプレート内で使用します。

タームの説明ブロック

同じく、アーカイブページ用のテンプレート内で使用します。
そのタームに説明が記載されていればその内容を表示します。

ちなみに、タームの説明はカテゴリーやタグの「説明」入力欄から設定することができます。

タームクエリブロック

おそらくターム一覧ブロックと出力後の結果は同じ。
なぜ、機能がダブっているブロックがあるのか…何らかの違いがあると思うが未検証。

アーカイブタイトルブロック

アーカイブページ用のテンプレート内に設置し、タクソノミー名とターム名を表示するブロックです。

「タイトルにアーカイブタイプを表示」のトグルでタクソノミー名を表示するかどうかを選択できます。

検索結果のタイトルブロック

検索結果用のテンプレート内に設置して、「検索されたキーワード」での検索結果をタイトルとして表示するブロック。

投稿タイプラベルブロック

固定ページや投稿記事ページのテンプレートに設置し、その投稿の投稿タイプを表示するブロック。

投稿者のプロフィール情報ブロック

WordPressの「ユーザー」⇒「プロフィール」の「プロフィール情報」のテキスト内容を表示するブロック。

ブロックごとの機能と使い方（外部ツールの埋め込み）

外部サービスのコンテンツを記事や固定ページに直接表示（埋め込み）できるブロック群です。

• YouTube 動画
• Spotify 音楽
• X（旧Twitter）ポスト
• Instagram 投稿
• Googleマップ
• Vimeo

これらの外部サービスから URLを貼るだけで、WordPress側が自動で埋め込み表示してくれます。

追加方はシンプルで単純に外部サイトからURLをコピーして貼り付けるだけです。
ですので、ここでは使い方の解説については省略します。

ブロックエディターで「できないこと」や注意点

ここまでで読み続けていただいている読者は果たして何人いるのか…
とりあえず「ブロックエディタのマニュアル」的な立ち位置で全ブロックを網羅しようと思ったら非常に長い記事になってしまいました…

さて、ブロックエディターには多くの利点がありますが、
導入前に知っておくことでトラブルを防げる“できないこと・弱い部分”も存在します。

HTML直書きの柔軟性はクラシックに劣る

ブロックエディターは構造の整合性を維持する設計であるため、

• ブロック内部の余計なタグ操作が制限される
• 余計なタグを入れると警告が出る
• 「HTMLとして編集」でも構造体が保持される

などの仕様により、HTMLを壊さないことを優先するエディターになっています。

そのため、

• 自作HTMLの装飾を細かく行いたい
• インラインでCSS指定したい
• 記事中に特殊タグを多用する

等の用途の場合は、カスタムHTMLブロックを使用したり独自のカスタムブロックを作成する必要が出てくるでしょう。

複雑レイアウトはあきらめるor独自テーマ制作が必要

「レイアウトを組める」という点は強力ですが、万能ではありません。

• 細かいカラム幅の非対称レイアウト
• 要素同士の複雑な重なりが必要なレイアウト
• ランディングページの細密な装飾

などはデフォルトの機能だけで構築することは現状では難しいと思います。

このような用途で使用したい場合は、

• そもそもWordPressを使用しない
• クラシックエディター＋PHPテンプレートにコード直書きで構築
• 独自のテーマ・ブロックを構築

するなどの検討が必要になるでしょう。

つまりブロックエディター＝デザイン完全自由ではなく、ある程度の“道具箱”の中から組み立てる方式と捉えるのが正しいです。

チーム制作・クライアント納品時のルール設計が必要

ブロックエディターは自由度があるゆえに、

• クライアントが独自デザインを壊す
• 担当者ごとの運用方針が違う
• ブロック乱立で統一感がなくなる

といった設計の乱れが起きることがあります。

そのため、ブロック権限の制御やパターン（Patterns）を組んで正しい配置をあらかじめ用意しておき、それを使用してもらうなどの工夫が必要です。

まとめ：ブロックエディターは万能ではないが“運用を設計すれば強い”

WordPressのブロックエディターは、クラシックでは難しかった自由なレイアウトやパターン管理を可能にする一方で、細かいHTML制御や複雑レイアウト、旧テーマ資産との互換性など、いくつかの弱点も持っています。
しかしこれらは多くの場合、テーマ選定・CSS補完・権限制御・パターン設計といった“運用の設計”によって解決できる領域です。

現状のブロックエディターの立ち位置としては「コード不要で誰でも自由に作れる魔法のツール」ではなく、「運用と設計次第で戦略的な制作基盤になるツール」だと個人的には思っています。

今後WordPressは間違いなく“ブロック中心”のツールへと進化していくはずですので、ぜひこの記事も参考にしていただきつつブロックエディターの使い方をマスターしてみてください。