- 編集画面の構成（どこに何があるか）
- ブロックの挿入・編集・移動・削除の基本4操作
- 同期ブロック（旧・再利用ブロック）の作り方と使い回し
- プレビューと公開の流れ
ブロックエディタ、なんとなく使えてはいるけど「これ、本当に合ってる使い方なのかな？」と感じること、ありませんか？
私も最初はそうでした。とりあえずブロックを足して、消して、また足して……クラシックエディタの頃より、むしろ手間が増えた気さえしていました。
でも、ブロックエディタの基本操作は、実は「挿入する・編集する・動かす・消す」の4つを押さえれば、ほぼ一通り回せます。逆にここが曖昧なままだと、いつまでも編集が遅いままになる。
この記事では、編集画面の見方から、ブロックの追加・編集・並べ替え・削除、同期ブロック（旧・再利用ブロック）の使い回し、プレビューと公開まで、ページを1枚作り切る流れを、一緒に順番に確認していきます。WordPressを17年触ってきて、クラシックから移った当初に一番効いたのが、この基本操作を「指が覚える」まで繰り返すことでした。
WordPress老人のRです。クラシックの「テキストモードでベタ打ち」が長かったので、ブロック操作は最初まどろっこしく感じました。でも基本4操作に慣れると、もう戻れません。
記事を書いている人
R（アール）
Web制作の現場で17年（現役進行中）。精密栄養カウンセラー。
個人開発をアプリ6本並行しながら、AIと「作る・届ける」を実験しています。
うまくいったことも、月収2,000円みたいな冴えない数字も、隠さず公開中。
教える人ではなく、少し先で転んで戻ってきた人として、あなたと同じ目線で現在地を観測していけたらと思います。
ブロックエディタの編集画面の構成
いきなり操作から入ると、たいてい「どこを見ればいいのか」で迷子になります。操作を覚える前に、編集画面のどこに何があるかを先に押さえておくと、後がずっと楽になります。ブロックエディタの画面は、大きく3つのエリアに分かれています。
画面は3つのエリアでできている
中央が「編集スペース」、右側が「設定パネル」、上部が「ツールバー」です。
編集スペースは、実際にブロックを置いて文章や画像を入れていく場所。設定パネルでは、選んでいるブロックの色や余白など、細かい設定を変えられます。ツールバーには、ブロック挿入の「＋」、プレビュー、公開ボタンなどが並びます。
最初はパネルが多く感じますが、よく使うのは「＋（挿入）」と「右側の設定パネル」の2つだけ。残りは必要になってから覚えれば十分です。
ブロックを出す「＋」ボタン
画面左上の「＋」ボタンを押すと、挿入できるブロックの一覧が開きます。テキスト、画像、見出し、リスト、動画など、種類はかなり多い。
全部覚える必要はありません。一覧の上部に「よく使うブロック」「最近使ったブロック」が出るので、実際に触るのは数種類に落ち着きます。一覧上の検索窓にブロック名を打てば、目的のブロックをすぐ呼び出せます。
覚えておきたいアイコン3つ
編集中によく使うアイコンは、次の3つです。
- 「＋」アイコン：新しいブロックを挿入する。どの位置にも追加できます。
- 移動用の矢印：選んだブロックを上下に動かす。並べ替えに使います。
- 3つのドット（︙）：そのブロックのメニュー。複製・削除・パターン化などがここに入っています。
ブロックを挿入する
最初に戸惑うのは、たぶんこの「挿入」だと思います。ブロックエディタでは、文章も画像も見出しも、すべて「ブロック」として置いていきます。挿入のやり方は2通り覚えておけば十分です。
基本：「＋」ボタンから選ぶ
いちばん基本のやり方は、左上の「＋」を押してブロックを選ぶ方法です。すべての挿入操作の出発点になるので、まずはこれに慣れます。選んだブロックはその場に挿入され、すぐ中身を編集できる状態になります。
速い：「/」スラッシュコマンド
慣れてくると、こちらのほうが断然速いです。新しい段落で半角の「/」を打つと、その場でブロック検索が出ます。たとえば「/画像」「/見出し」と打てば、候補が絞り込まれて、マウスに持ち替えずに挿入できる。
ブロックを大量に置くページでは、この「/」だけで作業スピードがはっきり変わります。私は今、ほとんどの挿入をこれで済ませています。
よく使うブロック3つ
最初に慣れておきたいのは、この3つです。
- 段落ブロック：本文を書く基本ブロック。文字色やリンクの追加もここで。
- 画像ブロック：クリックでアップロード、またはメディアライブラリから選択。サイズや配置も中で調整できます。
- 見出しブロック：H2〜H6を選んで構成を整える。記事の骨組みになります。
この3つはどのページでも必ず使うので、まずはここに慣れるのが近道です。
ブロックを編集・カスタマイズする
ここは、クラシックに慣れた人ほど「え、こんなに簡単でいいの？」となる部分です。挿入したブロックは、その場で自由に編集できます。クラシックエディタのように別画面でHTMLをいじる必要はありません。
クリックして直接編集する
ブロックは独立した単位で動くので、編集したいブロックをクリックすれば、そのまま中身を直せます。段落ブロックなら文字サイズや色をその場で変更でき、結果はリアルタイムで反映される。画像ブロックなら、クリックして画像を差し替えたり、キャプションを足したりできます。
色・余白・サイズを変える
ほとんどのブロックは、右側の設定パネルから見た目を調整できます。背景色、文字色、余白（パディング）、フォントサイズなど、ブロックごとに個別に設定可能です。
セクションごとに背景色を変えると、ページにメリハリが出ます。ただし、色を増やしすぎると逆に読みにくくなるので、最初は1〜2色に絞るのがおすすめです。コードを書かずにここまで触れるのが、ブロックエディタの強みです。
「列」ブロックで横並びを作る
複数のコンテンツを横に並べたいときは「列」ブロックを使います。クラシックエディタではHTMLとCSSが必要だった2カラムが、列ブロックを置いて中にブロックを入れるだけで作れる。各カラムの幅も、設定パネルのスライダーで調整できます。
ブロックを移動・削除する（並べ替え）
地味な操作に見えますが、ここが自在になると編集が一気に速くなります。ページの構成を後から変えたくなったときに使うのが、移動と削除です。
移動：矢印かドラッグで動かす
ブロックを選ぶと左側に上下の矢印が出ます。これをクリックすれば、ブロックが1つ上、または1つ下に動く。離れた場所へ動かしたいときは、矢印の隣のハンドルをつかんでドラッグ＆ドロップするのが速いです。長いページで段落の順番を入れ替えるときに、よく使う操作です。
削除：メニューかDeleteキー
不要なブロックは、ブロック上部の3つのドット（︙）から「削除」を選べば消せます。もっと速いのは、ブロックを選んでキーボードの「Delete」か「Backspace」を押す方法。誤って挿入したブロックも一瞬で片付きます。
並べ替え、いつも矢印を連打してました……ドラッグで一発なんですね。
整理のコツ
移動と削除に慣れたら、ページ全体を見渡して「いらないブロックを削る」「重要な順に並べる」を意識すると、読みやすさが上がります。左上のリスト表示（アウトライン）を開くと、ブロックの並びが一覧で見えるので、長いページの整理に便利です。
同期ブロック（旧・再利用ブロック）で使い回す
「毎回これ作り直すの、地味に面倒だな」と感じてきたら、ここの出番です。よく使うブロックの組み合わせは、保存して別のページから呼び出せます。CTAボックスやお問い合わせ案内など、毎回同じものを作り直さずに済む機能です。
なお、この機能は以前「再利用ブロック」と呼ばれていましたが、WordPress 6.3（2023年）から「同期パターン（同期ブロック）」に名称が変わりました。古い記事では「再利用ブロック」と書かれていることが多いので、同じものだと覚えておくと混乱しません。
同期ブロックとは
同じ内容やデザインを、複数のページで繰り返し使いたいときに便利な機能です。一度作って保存しておけば、他のページでも同じものを呼び出せるので、毎回作り直す手間が省けます。企業サイトの「お問い合わせボタン」や「サービス概要セクション」のように、何度も使う要素を保存しておくと効率的です。
作り方と管理
作り方は、まず通常どおりブロックを作って中身を整えます。次に、そのブロックを選んだ状態で3つのドット（︙）メニューを開き、「パターンを作成」を選択。このとき「同期」をオンにして保存すると、同期ブロックになります。保存時には、後で探しやすい名前をつけておくのがおすすめです。
保存した同期ブロックは、挿入メニューの「パターン」タブから一覧で呼び出せます。名前の変更や中身の編集も、そこから行えます。
注意：1箇所直すと全部に反映される
同期ブロックの便利さは、1箇所を直すと、挿入したすべての場所に自動で反映されること。全ページのフッターを一括で変えたいときなどに強力です。
裏を返すと、特定のページだけ中身を変えたい場合は注意が必要です。そのときは「通常のブロックに変換」を選んで、同期を切ってから個別に編集します。ここを知らないと「1ページだけ直したつもりが全部変わってしまった」という事故が起きるので、覚えておくと安心です。
プレビューして公開する
ページができたら、公開前に必ずプレビューで見た目を確認します。ここを飛ばすと、スマホで崩れていた、リンクが切れていた、という公開後の事故につながります。
プレビュー：端末を切り替えて確認
画面右上の「プレビュー」ボタンから、実際の表示を確認できます。デスクトップ・タブレット・スマートフォンを切り替えられるので、レスポンシブの崩れもここでチェックできる。特に画像や列ブロックを多く使ったページは、スマホ表示を必ず見ておきます。
公開・下書き・予約投稿
確認が済んだら、右上の「公開」ボタンで公開できます。まだ途中なら「下書きとして保存」で止めておき、後で続きを書ける。公開日時を指定する「予約投稿」もあり、指定した日時に自動で公開されます。投稿のタイミングを管理したいときに便利です。
公開後の修正とリビジョン
公開後も、いつでも編集して「更新」を押せば、すぐに反映されます。誤字の修正やコンテンツの追加も、運用しながら柔軟に直せる。
さらに、WordPressは編集履歴（リビジョン）を保存しているので、間違えて消してしまっても以前の状態に戻せます。これがあるので、公開後の修正も思い切ってやれます。
まとめ
ブロックエディタの基本操作は、「挿入・編集・移動・削除」の4つが軸です。これに同期ブロックでの使い回しと、プレビュー→公開の流れを足せば、ページを1枚作り切るのに必要な操作はほぼ揃います。
最初はアイコンの多さに戸惑うかもしれません。私もそうでした。でも、実際に使うのはごく一部で、基本4操作が指に馴染めば、編集スピードははっきり変わります。
そして、操作を覚えること自体がゴールではありません。大事なのは、手を動かしながら「自分はどの操作でいつも手が止まるのか」「どこに時間を取られているのか」を観測することです。詰まる場所が見えれば、そこだけ集中して練習すればいい。道具の操作も、自分の作業のクセを観測する材料になります。
次回（vol03）では、標準ブロックだけでは足りなくなったときの一歩先、「カスタムブロック」の作り方に進みます。
この記事は「WordPress老人から脱却！Gutenberg完全ガイド」シリーズの一部です。
→ シリーズ全体を見る
あわせて読みたい
「自分の強みは何か」が、見えなくなる時期があります。
診断を受けても、本を読んでも、「結局どう動けばいいか」が分からない。考えるほど止まる。これは個人クリエイターによくある状態です。
個人開発8本、月収2,000円。Web制作17年のクリエイターが、AI と「作る」「届ける」を honest に実験している過程をメルマガで公開しています。「観測する」生き方の実践ログです。
登録特典:「AI時代に取り残されないための構造整理シート」（PDF 12p / 5ステップ）― スキル棚卸しから、自分のポジション設計まで。
