WordPressの編集画面が、以前とまったく違う見た目になっている。文章を書こうとしても、どこをクリックすればいいのか分からない。ブロックエディタに切り替わったタイミングで、この戸惑いを経験した方は多いはずです。
ただ、慣れてしまえば作業速度は明らかに上がります。ブロックエディタは「文章のかたまりを積み木のように並べていく」仕組みで、覚えるべき操作は5つほどしかありません。
この記事では、ブロックエディタの基本操作から、実際に使用頻度が高いブロック、そして作業を速くするコツまでを順に解説します。読み終える頃には、記事1本を迷わず仕上げられるようになっているはずです。
ブロックエディタとは何か
すべてが「ブロック」でできている
ブロックエディタでは、段落・見出し・画像・表・ボタンといった要素が、それぞれ独立した「ブロック」として扱われます。文章を書くと段落ブロックが生まれ、画像を入れると画像ブロックが追加される、という仕組みです。
ブロック単位で移動・複製・削除ができるため、構成の入れ替えが直感的に行えます。以前のエディタでは、文章を切り取って別の場所に貼り付けていた作業が、矢印ボタン1つで済むようになりました。
クラシックエディタとの違い
| 比較項目 | クラシックエディタ | ブロックエディタ |
|---|---|---|
| 編集の単位 | 1つの大きな入力欄 | ブロックごとに独立 |
| 装飾の追加 | HTMLを書くかショートコード | ブロックを選ぶだけ |
| 構成の入れ替え | 切り取りと貼り付け | ブロックの移動ボタン |
| 完成イメージの確認 | プレビューが必要 | 編集画面がほぼ完成形 |
公式の解説はWordPress公式のエディター解説ページにまとまっています。操作に迷ったときの参照先として覚えておくと便利です。
画面の見方から順を追って確認したい場合は、図解の多いWordPressの入門書を1冊手元に置いておくと安心です。
これだけ覚えれば書ける基本操作
1. ブロックを追加する
方法は3つあります。画面左上のプラスボタンを押す、空の段落の右端に出るプラスボタンを押す、そして空の行で「／（スラッシュ）」を入力してブロック名を打ち込む方法です。
3つ目がとにかく速いです。「/見出し」「/画像」「/表」のように打てば、候補が絞り込まれて即座に挿入できます。この操作を覚えるだけで、執筆のテンポは体感でかなり変わります。
2. ブロックを移動する
ブロックを選択すると上部にツールバーが出ます。そこの上下矢印で1つずつ移動、6点のドットアイコンをドラッグすれば任意の位置に動かせます。
3. ブロックを複製・削除する
ツールバー右端の3点メニューから、複製・削除・前後に挿入といった操作ができます。似た構造のブロックを続けて作るときは、複製してから中身を書き換えるほうが速く済みます。
4. 設定サイドバーを使う
画面右側のサイドバーで、選択中のブロックの詳細設定ができます。文字サイズ、色、余白、枠線など、ブロックの種類によって項目が変わります。サイドバーが表示されていない場合は、右上の歯車アイコンで開閉できます。
5. リスト表示で全体構造を見る
左上のリストアイコンを押すと、記事全体のブロック構造が一覧で表示されます。長い記事で目的の場所に飛びたいときや、見出しの階層を確認したいときに役立ちます。
よく使うブロック
文章まわり
| ブロック名 | 用途 |
|---|---|
| 段落 | 通常の本文。使う頻度がいちばん高いブロック |
| 見出し | h2〜h6の見出し。階層を飛ばさないこと |
| リスト | 箇条書き・番号付きリスト |
| 引用 | 他の文献からの引用。出典を併記する |
| テーブル | 比較表。行数と列数を先に決めて挿入する |
見出しについて1点だけ注意があります。h2の次にいきなりh4を使うような階層の飛ばしは避けてください。目次の自動生成が崩れるうえ、検索エンジンにも構造が正しく伝わりません。
レイアウトまわり
・グループ：複数のブロックを1つにまとめる。背景色を付けたい範囲を囲むのに便利
・カラム：横並びのレイアウトを作る。スマホでは自動で縦積みになる
・カバー：背景画像の上に文字を載せる
・スペーサー：余白を明示的に作る
・区切り：話題の切り替わりを示す横線
グループブロックは覚えておくと応用が効きます。まとめたいブロックを複数選択して「グループ化」を選ぶと、あとから背景色や余白をまとめて指定できます。
特殊なブロック
カスタムHTMLブロックを使えば、自分で書いたHTMLをそのまま埋め込めます。外部サービスの埋め込みコードや、テーマ独自の装飾を入れたいときに使います。ただし、記述を誤るとレイアウトが崩れるため、貼り付けた後はプレビューで確認してください。
カスタムHTMLブロックを使う機会が多い場合は、HTMLとCSSの入門書で基本の書き方を押さえておくと、崩れたときの原因も見つけやすくなります。
作業を速くする機能
パターン
複数のブロックの組み合わせを、あらかじめ用意された型として挿入できる機能です。「よくある質問の並び」「料金表」「お知らせの一覧」といったまとまりを、1回の操作で配置できます。
同期パターン（旧・再利用ブロック）
自分で作ったブロックの組み合わせを保存して、複数の記事で使い回せる機能です。同期パターンとして保存すると、1箇所を編集すれば使っているすべての場所に反映されます。
記事の末尾に置く定型の案内文や、共通のお知らせなどに向いています。以前は「再利用ブロック」という名称でしたが、パターン機能に統合されて名前が変わりました。古い解説記事を読むときは、この点に注意してください。
同期パターンは、1箇所の編集がすべてに反映されます。特定の記事だけ内容を変えたい場合は、そのブロックを「通常のブロックに変換」してから編集してください。うっかり編集すると、他の記事の表示まで変わってしまいます。
覚えておきたいショートカット
| 操作 | ショートカット |
|---|---|
| ブロックの複製 | Ctrl（Command）+ Shift + D |
| ブロックの削除 | Ctrl（Command）+ Alt + Z |
| 元に戻す | Ctrl（Command）+ Z |
| 保存（下書き） | Ctrl（Command）+ S |
| ショートカット一覧の表示 | Shift + Alt + H |
つまずきやすい場面と対処
ブロックの検証に失敗しましたと出る
ブロックの中身のHTMLが、想定されている形と違っているときに表示されます。テーマの変更後や、外部からコピーした内容を貼ったときに起きやすい症状です。「ブロックのリカバリーを試行」を選ぶか、HTMLとして扱う設定に切り替えると解決することが多いです。
他のソフトからコピーすると書式が崩れる
WordやGoogleドキュメントからそのまま貼ると、余計な書式が持ち込まれます。Ctrl（Command）+ Shift + V で書式なしの貼り付けを使うと、余計な情報を持ち込まずに済みます。
以前のエディタに戻したい
Classic Editorプラグインを使えば従来の編集画面に戻せます。ただし、これは移行期間のための措置です。ブロックエディタが標準である以上、いずれは慣れる必要があります。戻すより、慣れるほうが長期的には楽です。
編集環境を整える
ブロックエディタは、編集画面の中央に本文、右側に設定サイドバー、左側にブロック挿入パネルが開く構成です。画面が狭いとサイドバーを開いた瞬間に本文の表示幅が縮み、実際の見え方が分からなくなります。
この点は27インチのWQHD（2560×1440）モニターを1枚足すと解決します。サイドバーを開いたままでも本文の幅が確保され、公開後の見え方に近い状態で編集できます。設置スペースが厳しい場合はクランプ式のモニターアームで机の奥行きを空けてください。
長文を書く機会が増えるなら、入力環境も効いてきます。日本語配列のメカニカルキーボードは打鍵感が安定していて、長時間の執筆でも疲れにくい傾向があります。手首を支える低反発のリストレストを組み合わせると、さらに負担が減ります。
記事の構成を練る段階では、画面から離れて考えたくなることもあります。A5サイズのリングノートに見出しの流れを書き出してから編集画面に向かうと、書きながら迷う時間が減ります。
よくある質問
Q. ブロックエディタとサイトエディターは何が違いますか
ブロックエディタは記事や固定ページの中身を編集する機能、サイトエディターはヘッダーやフッターを含むサイト全体のテンプレートを編集する機能です。詳しくはWordPress公式のサイトエディター解説を参照してください。操作感は共通していますが、編集する対象の範囲が違います。
Q. テーマによって使えるブロックが違いますか
標準のブロックはどのテーマでも使えます。加えて、テーマやプラグインが独自のブロックを追加している場合があります。テーマを変更すると、その独自ブロックが表示されなくなる点には注意してください。
Q. HTMLを直接編集できますか
できます。ブロックのメニューから「HTMLとして編集」を選ぶと、そのブロックのHTMLを直接書き換えられます。記事全体をHTMLで見たい場合は、右上の3点メニューから「コードエディター」に切り替えます。
Q. 文字の色やサイズはどこで変えますか
ブロックを選択した状態で、右側の設定サイドバーから変更します。テーマが対応していれば、色やサイズの選択肢が表示されます。個別に変えすぎるとサイト全体の統一感が崩れるため、使いどころは絞ってください。
Q. 目次は自動で作れますか
テーマに目次機能が含まれていることが多いので、まずはテーマの設定を確認してください。含まれていない場合は目次生成のプラグインを使います。見出しの階層が正しく設定されていることが前提になります。
Q. 書きかけの記事は自動で保存されますか
一定時間ごとに自動保存されます。ただし、ブラウザを閉じる前には手動で下書き保存する習慣をつけておくと安心です。リビジョン機能で過去の版に戻すこともできます。
Q. スマートフォンからでも編集できますか
できますが、画面が狭いため設定サイドバーの操作が窮屈になります。ちょっとした修正なら問題ありませんが、記事を1本書き上げる作業はパソコンのほうが向いています。
まとめ
ブロックエディタは、ブロックの追加・移動・複製・設定・一覧表示という5つの操作を覚えれば、記事を書くには十分です。とくにスラッシュコマンドでのブロック挿入は、覚えた瞬間から作業速度が変わります。
そのうえで、パターンと同期パターンを使いこなせるようになると、繰り返しの作業が大幅に減ります。定型的な構成を型として保存しておけば、記事作成のたびにゼロから組み立てる必要がなくなります。
まずは新規投稿の画面を開いて、空の行に「/」を打ってみてください。そこから見える世界が、ブロックエディタの入口です。
