• コード不要！ … HTML/CSSを知らなくても感覚的に編集できる
• レイアウトが自由！ … カラム分け、ボタン配置、背景設定などがブロックで完結
• 再利用性が高い！ … よく使うレイアウトは「パターン」として保存して再利用可能
• スマホ対応も簡単！ … 多くのブロックが自動でレスポンシブ対応

かつてのクラシックエディタでは、段組みや画像の整列、ボタン配置などを行うにはHTMLを編集する必要がありました。

しかし、ブロックエディタならノーコードで自由なレイアウトが実現可能。

今後のWordPress開発の中心になるため、これからサイト制作をするなら必須のスキルです。

ブロックの追加の仕方

ブロックは画像の緑枠の部分から追加します。今回は左の+ボタンから追加する方法で進めます。

見出しブロックの追加

投稿画面左上の「＋」をクリック → 「見出しブロック」を選択して、レベル（H2〜H6）を選びます。

テキストブロックの追加

画像の挿入方法

「アップロード」で画像をアップロード
「メディアライブラリ」ではすでに登録されている画像から選べます
「URLから挿入」は画像のURLを貼ることができます

カラムブロックで2列レイアウトを作る

カラムブロックを使えば、テキスト＋画像など2カラム構成も簡単です。スマホでは自動的に縦並びになります。

ここでは2分割します。

今回は画像+テキストにします。左側に画像を入れます。
入れ方は先程の「画像の挿入方法」方法と同じです。

次はテキストを入れます。
段落ブロックを選択すると文字をいれることができます。

モバイルでは1カラムになります

カラムブロックを使えば、テキスト＋画像など2カラム構成も簡単です。スマホでは自動的に縦並びになります。

• グループブロック：複数のブロックを1つのまとまりにでき、背景色や横幅もまとめて管理できます。

• パターン：同じコンテンツを複数ページで使いたいときに便利。一括編集も可能。

使用したいブロックがデフォルトでない場合プラグインで補うことができます

Genesis Custom Blocks（無料）

ACF Pro

Flexible Table Block

ブロックエディタのデフォルトのテーブルはレイアウトの調整が弱いです。

結合などはできず、セルの幅や色を管理画面上で変更することができません。

Flexible Table Blockを使用するとセルを結合など豊富な機能があります。

WordPressのブロックエディタでは、「アウトライン」パネルを使うことで、ページ全体のブロック構造を視覚的に把握できます。

アウトラインの役割・メリット

• ブロックの入れ子構造（ネスト）をツリー形式で確認可能

• クリックで該当ブロックを選択できる

• 見出し階層のチェックや構造の整理に便利

• DOM構造に近いブロックの構造を、エンジニアでなくても視覚的に把握できる

• 大量のブロックを使うページやカラム構成の確認に特に有効

• どのブロックがどこにネストされているかが一目で分かる

• レイアウトが崩れた時の確認ポイントとして活用できる

• HTMLやDOMの知識がなくても、構造を視覚で掴める

今回は主なブロックの使い方をご紹介しました。

ブロックエディタには60種類以上のブロックが用意されており、必要に応じて組み合わせることで、誰でも簡単にコンテンツを作成できます。