WordPressブロックエディターの使い方完全ガイド｜追加・移動・編集方法を初心者向けに図解で解説

はじめに

WordPressで記事を作成するときに使うのが「ブロックエディター」です。文章、見出し、画像、ボタンなどを「ブロック」と呼ばれるパーツ単位で追加し、組み合わせながらページを作成できます。

しかし、初めて使う方のなかには「ブロックの追加場所が分からない」「画像や見出しを移動できない」「設定項目が見つからない」と戸惑う方もいるでしょう。

本記事では、WordPressブロックエディターの基本的な仕組みから、ブロックの追加・移動・編集方法、よく使うブロック、デザイン設定、トラブルの対処法まで初心者向けに解説します。

操作の基本は次の3つです。

ブロックを追加する → 内容を編集する → 必要な位置へ移動する

この流れを覚えれば、専門的なHTMLやCSSの知識がなくても、読みやすい記事や見栄えのよいページを作成できます。

1. WordPressのブロックエディターとは

WordPressのブロックエディターとは、文章や画像などをブロック単位で配置してコンテンツを作る編集機能です。

従来のエディターよりも各要素を個別に選択しやすく、レイアウトやデザインを画面上で確認しながら編集できます。

1-1. ブロックエディターの基本的な仕組み

ブロックエディターでは、記事を一枚の文書としてまとめて編集するのではなく、複数のパーツに分けて管理します。

たとえば、次のような構成です。

記事タイトル
↓
見出しブロック
↓
段落ブロック
↓
画像ブロック
↓
ボタンブロック

それぞれが独立したブロックになっているため、文章だけを複製したり、画像を別の位置へ移動したりできます。

1-2. 「ブロック」とは文章や画像を構成するパーツ

WordPressのブロックとは、ページを構成する一つひとつの要素です。

代表的なブロックには、段落、見出し、画像、リスト、引用、テーブル、ボタン、カラム、動画などがあります。追加したブロックごとに内容や色、配置、余白などを設定できます。

ブロックの種類によって使用できる設定は異なります。文章では文字装飾、画像では代替テキストやサイズ、ボタンではリンク先や背景色などを設定します。

1-3. Gutenberg（グーテンベルク）との違い

Gutenbergは、WordPressにブロックを使った編集体験を導入するために始まったプロジェクトの名称です。WordPressの管理画面で記事を編集する機能は、一般的に「ブロックエディター」と呼ばれます。

Gutenbergという名称は、開発プロジェクトや公式プラグインを指す場合にも使われます。日常的な記事作成では、ブロックエディターと理解しておけば問題ありません。

1-4. クラシックエディターとの違い

クラシックエディターは、文書作成ソフトのような一つの入力欄で記事全体を編集する方式です。一方、ブロックエディターでは、文章や画像を個別のブロックとして扱います。

主な違いは次のとおりです。

ブロックエディターは、文章中心の記事だけでなく、画像やボタンを組み合わせたページにも適しています。

1-5. 投稿と固定ページでの使い方の違い

投稿と固定ページは、どちらも同じブロックエディターで編集できます。ブロックの追加や移動、装飾方法に大きな違いはありません。

異なるのは記事全体の設定です。投稿ではカテゴリー、タグ、公開日時などを設定し、時系列で情報を発信します。固定ページは会社概要やお問い合わせなど、独立したページの作成に向いており、親ページやテンプレートを設定できる場合があります。

2. WordPressブロックエディターの編集画面と各機能

ブロックエディターの画面は、大きく「上部ツールバー」「編集エリア」「サイドバー」に分かれています。

最初に各機能の位置を把握しておくと、ブロックの追加や設定をスムーズに行えます。

2-1. タイトル・本文を入力する編集エリア

画面中央にある広い部分が編集エリアです。上部の「タイトルを追加」に記事タイトルを入力し、その下に本文のブロックを追加します。

何もない場所をクリックして文字を入力すると、通常は段落ブロックとして文章を作成できます。Enterキーを押すと次の段落ブロックが追加されます。

2-2. ブロックを追加する「＋」ボタン

「＋」ボタンはブロックを追加するためのボタンです。主に次の場所に表示されます。

• 編集画面左上

• 本文の空白部分

• ブロックとブロックの間

• 選択したブロックの前後

左上の「＋」を押すと、利用可能なブロック、パターン、メディアなどを一覧から探せます。

2-3. ブロックを操作するツールバー

ブロックをクリックすると、その周辺または編集画面上部に専用ツールバーが表示されます。

ツールバーでは、ブロックの種類の変換、配置変更、太字、リンク、整列、移動、複製、削除などを操作できます。表示される項目は、選択しているブロックによって変わります。

2-4. 投稿とブロックを設定するサイドバー

画面右上の設定アイコンを押すと、右側にサイドバーが表示されます。

サイドバーには、記事全体を設定する「投稿」または「固定ページ」のタブと、選択中の要素を設定する「ブロック」タブがあります。

記事全体のタブではカテゴリー、タグ、アイキャッチ画像、抜粋、公開状態などを設定します。ブロックタブでは色、文字サイズ、余白、枠線などを変更できます。

2-5. 記事全体を確認できるリストビュー

画面上部のドキュメント概観アイコンを押すと、記事内のブロックが階層構造で表示されます。

リストビューを使うと、カラムやグループの内側にあるブロックも確認しやすくなります。目的のブロックを選択したり、ドラッグして並び替えたりするときに便利です。

見出し構成を確認できる「アウトライン」も利用できるため、H2やH3の順序を確認する際にも活用できます。

2-6. 元に戻す・やり直すボタン

画面上部には、直前の操作を取り消す「元に戻す」と、取り消した操作を再実行する「やり直す」があります。

ブロックを誤って削除した場合や、移動先を間違えた場合に利用できます。キーボードでは、WindowsはCtrl＋Z、MacはCommand＋Zで元に戻せます。

2-7. 下書き保存・プレビュー・公開ボタン

画面右上には、保存や公開に関するボタンがあります。記事の状態やWordPressのバージョンによって表示名が異なる場合があります。

「下書き保存」または保存操作では、記事を一般公開せずに保存できます。「プレビュー」では実際の表示を確認でき、「公開」を押すと記事がサイト上に掲載されます。

公開済みの記事では「公開」ではなく「更新」と表示されます。

2-8. 表示や操作を変更するオプションメニュー

右上の縦3点アイコンを押すと、表示や操作に関するメニューが開きます。

全画面モード、スポットライトモード、トップツールバー、ビジュアルエディターとコードエディターの切り替え、設定画面などを利用できます。

項目が多くて編集しづらいときは、設定画面で不要なパネルを非表示にすると操作しやすくなります。

3. ブロックエディターで記事を作成・公開する基本手順

ここからは、WordPressの管理画面から記事を作成し、公開するまでの基本的な流れを解説します。

3-1. 管理画面から投稿の新規追加を開く

WordPressの管理画面にログインし、左側のメニューから「投稿」→「新規投稿を追加」を選択します。

固定ページを作成する場合は「固定ページ」→「新規固定ページを追加」を選びます。編集画面が開いたら記事作成を開始できます。

3-2. 記事タイトルを入力する

編集画面上部の「タイトルを追加」をクリックし、記事タイトルを入力します。

タイトルは記事の内容が分かるように具体的に付けましょう。検索キーワードを不自然にならない範囲で含め、読者が得られる情報を明確にすることが大切です。

3-3. 段落ブロックで本文を入力する

タイトルの下をクリックして文章を入力すると、段落ブロックが作成されます。

Enterキーを押すと新しい段落が追加され、Shift＋Enterを押すと同じブロック内で改行できます。文章が長くなりすぎないよう、内容の区切りごとに段落を分けましょう。

3-4. 見出しブロックで記事の構成を整える

本文を章ごとに分けるときは、見出しブロックを追加します。

記事タイトルは通常H1として扱われるため、本文の大項目にはH2、その下の小項目にはH3を使用するのが基本です。

構造例

H1：記事タイトル
└ H2：大きなテーマ
　└ H3：詳しい項目
　└ H3：詳しい項目
└ H2：次のテーマ

見出しレベルを飛ばさず、内容の階層に沿って設定しましょう。

3-5. 画像やリンクを挿入する

画像を挿入する場所で「＋」を押し、画像ブロックを選択します。メディアライブラリから選ぶか、パソコンからアップロードしてください。

文章にリンクを設定する場合は、対象の文字を選択してツールバーのリンクアイコンを押します。URLを入力し、Enterキーまたは適用ボタンで確定します。

外部サイトへリンクするときは、必要に応じて新しいタブで開く設定を利用しましょう。

3-6. カテゴリー・タグ・アイキャッチ画像を設定する

右側の投稿設定からカテゴリーとタグを設定します。

カテゴリーは記事を大きなテーマで分類する機能です。タグは記事に関連する個別のキーワードを付けるために使います。分類を増やしすぎると管理しづらくなるため、サイト全体でルールを決めておきましょう。

アイキャッチ画像は、記事一覧やSNSで表示される代表画像として使われることがあります。テーマに適したサイズの画像を設定してください。

3-7. パーマリンクと抜粋を設定する

パーマリンクは記事のURLです。投稿設定にあるスラッグから、URLの末尾を編集できます。

スラッグは短く分かりやすい半角英数字にするのが一般的です。公開後に変更すると既存のリンクが無効になる可能性があるため、できるだけ公開前に決めましょう。

抜粋には、記事の内容を簡潔に説明する文章を入力します。テーマによっては記事一覧や検索結果などに表示されます。

3-8. プレビューで表示を確認する

記事を公開する前にプレビューを開き、実際の表示を確認します。

次の点を重点的に確認しましょう。

• 見出しの順序が正しいか

• 画像が大きすぎないか

• リンク先が正しいか

• 文章が読みにくくないか

• 表やカラムが崩れていないか

• スマートフォンでも読みやすいか

編集画面と公開画面では、テーマのスタイルによって見え方が異なる場合があります。

3-9. 記事を公開・予約投稿する

内容に問題がなければ、右上の「公開」を押します。確認画面が表示された場合は、公開範囲や日時を確認して再度「公開」を選択してください。

将来の日時を指定すると予約投稿ができます。指定した日時になると自動的に公開されるため、計画的な記事配信に便利です。

4. WordPressでブロックを追加する方法

WordPressでブロックを追加する方法は複数あります。慣れるまでは「＋」ボタンを使い、操作に慣れたらスラッシュコマンドを利用すると効率的です。

4-1. 編集画面左上の「＋」から追加する

画面左上の「＋」を押すと、ブロック挿入パネルが開きます。

追加したいブロックをクリックすると、現在選択している位置に挿入されます。テキスト、メディア、デザイン、埋め込みなどのカテゴリーから探すことも可能です。

どのブロックを使えばよいか分からないときは、各ブロックにカーソルを合わせて説明やプレビューを確認しましょう。

4-2. 本文内の「＋」から追加する

本文の空白部分にカーソルを合わせると、小さな「＋」が表示されることがあります。

このボタンを押すと、使用頻度の高いブロックが候補として表示されます。目的のブロックがない場合は「すべて表示」などを選び、一覧から探してください。

4-3. 「/」を入力してブロックを呼び出す

空の段落ブロックで半角の「/」を入力すると、ブロックの候補が表示されます。

続けてブロック名を入力すると候補を絞り込めます。

入力例

/画像
/見出し
/リスト
/ボタン
/テーブル

候補を選び、Enterキーを押すとブロックが追加されます。

4-4. ブロック名を検索して追加する

ブロック挿入パネルの検索欄に、追加したいブロック名を入力します。

正式名称が分からない場合は「画像」「動画」「横並び」など、目的に近い言葉で検索してみましょう。テーマやプラグインによって追加されたブロックも検索結果に表示されます。

4-5. ブロックとブロックの間に挿入する

既存ブロックの間にカーソルを移動すると、境界部分に「＋」が表示されます。

「＋」を押してブロックを選ぶと、その位置に新しいブロックが追加されます。表示されない場合は、前後どちらかのブロックを選択し、オプションメニューから前または後に追加してください。

4-6. 既存ブロックの前後に追加する

対象のブロックを選び、ツールバーの縦3点アイコンを押します。

メニューから「前に追加」または「後に追加」を選択すると、空のブロックが作成されます。複雑なレイアウトで「＋」ボタンを押しにくい場合に便利です。

4-7. よく使うブロックをすばやく追加する

よく使うブロックは、スラッシュコマンドやキーボード操作を利用するとすばやく追加できます。

Enterキーで段落、/hで見出し候補、/imageや/画像で画像ブロックを呼び出すなど、自分が頻繁に使う操作から覚えましょう。

複数のブロックを同じ組み合わせで使う場合は、ブロックパターンとして保存するとさらに効率化できます。

5. WordPressでブロックを移動・並び替えする方法

ブロックエディターでは、文章や画像をコピーし直さなくても、ブロック単位で位置を変更できます。

5-1. 上下の矢印でブロックを移動する

移動したいブロックをクリックし、ツールバーに表示される上向きまたは下向きの矢印を押します。

1回押すごとに、ブロックが一つ上または下へ移動します。近い位置へ移動するときや、配置を少しだけ調整したいときに適した方法です。

5-2. ドラッグ＆ドロップで移動する

ブロックツールバーのドラッグ用ハンドルをつかみ、移動先までドラッグします。

挿入位置を示す線が表示されたら、マウスのボタンを離してください。記事内の離れた場所へ移動するときに便利です。

ドラッグ用ハンドルが表示されない場合は、トップツールバーの設定を確認するか、リストビューを使いましょう。

5-3. リストビューからブロックを並び替える

画面上部からリストビューを開き、移動したいブロック名をドラッグします。

カラムやグループの内部構造を確認しながら操作できるため、複雑なレイアウトの並び替えに向いています。

誤って別のグループ内へ入れないよう、挿入位置を示す線と階層の深さを確認してください。

5-4. 複数のブロックをまとめて移動する

複数のブロックを選択してから、移動ボタンまたはドラッグ操作を使用します。

本文上では、最初のブロックから最後のブロックまで範囲選択する方法があります。リストビューでは、Shiftキーを押しながら対象を選択すると複数選択できます。

選択しにくい場合は、一度グループ化してから移動すると操作が簡単です。

5-5. 親ブロックと子ブロックを選択して移動する

カラム、グループ、ボタンなどは、親ブロックの中に子ブロックが入る構造になっています。

たとえば、カラムブロックの中に画像ブロックと段落ブロックが配置されます。全体を移動したい場合は、個別の画像ではなく親となるカラムブロックを選択してください。

親ブロックはツールバーの親を選択するアイコン、画面下部のパンくず、またはリストビューから選べます。

5-6. ブロックを別の投稿へコピーする

コピーしたいブロックを選択し、通常のコピー操作を行います。複数のブロックを選択してまとめてコピーすることも可能です。

コピー後に別の投稿や固定ページを開き、貼り付けたい場所でペーストします。ツールバーのオプションに「ブロックをコピー」が表示される場合は、その機能も利用できます。

複雑なレイアウトを繰り返し使う場合は、コピーよりもパターンとして登録する方法がおすすめです。

6. WordPressでブロックを編集する方法

追加したブロックは、内容だけでなく種類や色、配置、余白なども変更できます。

6-1. ブロック内の文章や画像を変更する

文章を変更する場合は、段落や見出しをクリックして直接入力します。画像を変更する場合は画像ブロックを選択し、ツールバーの「置換」を押します。

画像を置き換えたあとは、代替テキスト、サイズ、リンク先なども確認してください。画像そのものを削除するのではなく、ブロックを残したまま別の画像へ差し替えられます。

6-2. ブロックツールバーで文字を装飾する

文章の一部を選択すると、太字、斜体、リンクなどの装飾を設定できます。

追加メニューには、インラインコード、上付き文字、下付き文字、ハイライトなどが表示される場合があります。装飾を使いすぎると文章が読みにくくなるため、重要な箇所に絞りましょう。

6-3. ブロックの種類を変換する

ブロックツールバーの左側にあるブロックアイコンを押すと、変換可能な種類が表示されます。

段落を見出しやリストに変換したり、複数のブロックをグループやカラムに変換したりできます。ただし、内容や構造によって変換候補は異なります。

変換後は文字サイズや配置が変わる場合があるため、プレビューで確認してください。

6-4. 文字色・背景色・サイズを変更する

対象のブロックを選択し、右側のブロック設定を開きます。

「色」では文字色や背景色、「タイポグラフィ」ではフォントサイズや行の高さなどを設定できます。選択できる色や項目は、使用しているテーマとブロックによって異なります。

文字と背景の色が近いと読みにくくなるため、十分なコントラストを確保しましょう。

6-5. 幅・余白・配置を調整する

ブロックによっては、ツールバーから左寄せ、中央寄せ、右寄せ、幅広、全幅などを選択できます。

右側の設定に「寸法」や「サイズ」がある場合は、マージンやパディング、ブロック間隔なども調整できます。

すべてのテーマやブロックで同じ設定が使えるわけではありません。項目がない場合は、グループブロックで囲む方法や追加CSSを検討します。

6-6. ブロックを複製する

複製したいブロックを選び、縦3点のオプションメニューから「複製」を選択します。

同じデザインの見出し、ボタン、表などを続けて配置するときに便利です。複製後は文章、リンク先、画像の代替テキストなどを忘れずに変更しましょう。

6-7. ブロックを削除する

削除したいブロックを選択し、オプションメニューから「削除」を選びます。

複数のブロックを選択して、DeleteキーまたはBackspaceキーで削除することもできます。誤って削除した場合は、すぐに「元に戻す」を押してください。

6-8. 複数のブロックをグループ化する

まとめたいブロックを複数選択し、ツールバーまたはオプションメニューから「グループ」を選択します。

グループ化すると、背景色や余白をまとめて設定でき、複数のブロックを一つのまとまりとして移動できます。

囲み枠や記事内の注意書き、CTAエリアなどを作るときに便利です。

6-9. HTMLとして編集する

対象のブロックを選択し、オプションメニューから「HTMLとして編集」を選ぶと、そのブロックのHTMLを確認できます。

細かな調整が必要な場合に便利ですが、タグやブロック用コメントを誤って削除すると、無効なコンテンツとして判定されることがあります。

HTMLに慣れていない場合は、編集前にブロックを複製するか、記事を下書き保存しておきましょう。

6-10. 操作を元に戻す・やり直す

操作を間違えた場合は、画面上部の矢印から元に戻せます。

WindowsではCtrl＋Z、MacではCommand＋Zで元に戻し、WindowsではCtrl＋Shift＋Z、MacではCommand＋Shift＋Zでやり直せます。

画面を閉じたあとや複数回保存したあとに戻したい場合は、リビジョンを確認しましょう。

7. 初心者が覚えておきたい基本ブロックの使い方

WordPressには多くのブロックがありますが、最初からすべて覚える必要はありません。まずは記事作成でよく使う基本ブロックを覚えましょう。

7-1. 段落ブロックで文章を入力する

段落ブロックは、本文を入力するための基本ブロックです。

文章を入力してEnterキーを押すと、次の段落が作成されます。太字やリンクなどは、対象の文字を選択してツールバーから設定します。

一つの段落が長すぎると読みにくくなるため、2〜4文程度を目安に内容を区切るとよいでしょう。

7-2. 見出しブロックでH2・H3を設定する

見出しブロックを追加したら、ツールバーでH2やH3などのレベルを選びます。

H2は記事の大きな章、H3はH2を細分化する項目に使用します。文字を大きくする目的だけで見出しレベルを変更せず、記事の構造に合わせて設定してください。

7-3. 画像ブロックで画像を挿入する

画像ブロックでは、アップロード、メディアライブラリ、URLからの挿入などを選べます。

画像を挿入したら、内容を説明する代替テキストを設定しましょう。装飾目的の画像では空欄が適切な場合もありますが、記事の理解に必要な画像には具体的な説明を入力します。

ファイル容量が大きすぎる画像は表示速度に影響するため、適切なサイズに圧縮して使用しましょう。

7-4. リストブロックで箇条書き・番号付きリストを作る

複数の項目を整理するときはリストブロックを使用します。

順序が関係しない情報には箇条書き、手順や順位には番号付きリストが適しています。ツールバーから両者を切り替えられます。

Tabキーなどを使って項目を入れ子にできますが、階層を深くしすぎないよう注意しましょう。

7-5. ボタンブロックでリンクボタンを作る

ボタンブロックを追加し、ボタン内に「資料をダウンロード」「お問い合わせはこちら」などの文言を入力します。

ツールバーのリンクアイコンから移動先のURLを設定してください。右側の設定では背景色、文字色、枠線、角の丸み、幅などを変更できる場合があります。

クリック後の行動が分かる、具体的な文言にすることが重要です。

7-6. 引用ブロックで引用文を掲載する

第三者の文章を引用するときは、引用ブロックを使用します。

引用文と自分の文章を明確に区別し、出典名や参照先を記載してください。引用部分が記事の中心にならないよう、必要な範囲に限定して使用します。

長い引用にはプルクオートなど別のブロックが使える場合もあります。

7-7. テーブルブロックで表を作成する

テーブルブロックを追加すると、列数と行数を指定して表を作成できます。

作成後はセルを選択して文字を入力し、ツールバーから行や列の追加・削除を行います。右側の設定では、ヘッダーやフッター、縞模様などを設定できる場合があります。

スマートフォンでは横幅が不足しやすいため、列数を増やしすぎないようにしましょう。

7-8. カラムブロックで横並びのレイアウトを作る

カラムブロックを使うと、複数の要素を横並びに配置できます。

カラム数や比率を選択したあと、それぞれの列に画像、文章、ボタンなどを追加します。サービス紹介や料金プラン、画像と説明文を並べるレイアウトに適しています。

スマートフォンでは縦並びになる場合があるため、表示順序も確認してください。

7-9. グループブロックで複数の要素をまとめる

グループブロックは、複数のブロックを一つのまとまりとして扱うためのブロックです。

背景色や余白をまとめて設定したり、エリア全体を移動したりできます。グループのレイアウトを変更すると、縦並びのスタックや横並びの行として配置できる場合もあります。

7-10. スペーサー・区切りブロックで余白や線を入れる

スペーサーブロックは、要素間に任意の高さの空白を入れるために使用します。区切りブロックは、内容の境界に横線などを表示する機能です。

余白を作るために空の段落や大量の改行を入れると、端末によって表示が崩れることがあります。余白はスペーサーやブロックの寸法設定で調整しましょう。

7-11. 動画・音声・SNS投稿を埋め込む

動画や音声を直接アップロードするほか、埋め込みブロックに公開URLを入力する方法があります。

YouTubeなどの対応サービスでは、URLを貼り付けるだけで埋め込み表示に変換される場合があります。SNS投稿を埋め込むときは、公開状態や提供元の仕様変更にも注意してください。

埋め込み後はプレビューを開き、パソコンとスマートフォンの両方で表示を確認しましょう。

8. ブロックのデザインとレイアウトを整える方法

ブロックエディターでは、テーマが対応している範囲で色、文字、余白、横幅などを設定できます。

8-1. ブロックごとのスタイルを変更する

対象のブロックを選択し、右側の設定にある「スタイル」を確認します。

画像の角を丸くする、引用の見た目を変える、ボタンを塗りつぶしまたは枠線にするなど、ブロックごとに選択肢が用意されている場合があります。

サイト全体で同じスタイルを使用すると、デザインに統一感が生まれます。

8-2. テキストと背景の色を設定する

右側のブロック設定から、テキスト、背景、リンクなどの色を変更します。

テーマに登録されたカラーパレットを使うと、サイト全体の色を統一しやすくなります。自由に色を指定できる場合でも、使用色を増やしすぎないようにしましょう。

背景色を設定したときは、文字が十分に読み取れるか確認してください。

8-3. フォントサイズや行間を調整する

「タイポグラフィ」の設定では、フォントサイズ、行の高さ、文字間隔、太さなどを変更できる場合があります。

本文のサイズを頻繁に変えると読みづらくなるため、強調には太字や囲み枠を使い、文字サイズはできるだけ統一しましょう。

設定項目が表示されない場合は、そのブロックまたはテーマが機能に対応していない可能性があります。

8-4. ブロックの横幅と配置を変更する

ブロックツールバーでは、左寄せ、中央寄せ、右寄せ、幅広、全幅などを選択できる場合があります。

幅広や全幅はテーマ側の対応が必要です。設定しても変化がない場合は、テーマのレイアウトや親ブロックの幅を確認してください。

文章は横幅が広すぎると視線移動が大きくなるため、読みやすさを優先しましょう。

8-5. 余白とパディングを設定する

マージンはブロックの外側、パディングはブロックの内側に設ける余白です。

ブロック設定の「寸法」などから変更できる場合があります。囲み枠の内側を広げたいときはパディング、上下の要素との距離を調整したいときはマージンやブロック間隔を使います。

パソコンで適切に見えても、スマートフォンでは余白が大きすぎる場合があるため注意してください。

8-6. アンカーリンク用のHTMLアンカーを設定する

ブロック設定の「高度な設定」にHTMLアンカーがある場合、ページ内リンクの移動先となる名前を設定できます。

たとえば、見出しにcontactというアンカーを設定した場合、リンク先に#contactを指定すると、その見出しまで移動できます。

アンカー名は半角英数字とハイフンを中心に、重複しない分かりやすい名前を付けましょう。

8-7. 追加CSSクラスでデザインをカスタマイズする

高度な設定にある「追加CSSクラス」にクラス名を入力すると、独自のCSSを適用できます。

たとえば、notice-boxというクラスを設定し、テーマや追加CSSに対応するスタイルを記述する方法です。

CSSの知識が必要になるため、初心者は標準の色や寸法設定を優先し、変更前にはバックアップを取っておきましょう。

8-8. スマートフォン表示を確認する

編集画面のプレビューから、モバイル表示を確認できる場合があります。

ただし、編集画面上の確認だけでは実際の端末と完全に同じにならないことがあります。公開前にはプレビューURLをスマートフォンで開き、文字、画像、表、ボタンなどを確認しましょう。

特にカラム、横長画像、テーブル、長いボタン文言は表示崩れが起きやすい部分です。

9. よく使うブロックを再利用する方法

同じレイアウトを何度も作る場合は、ブロックパターンを利用すると作業時間を短縮できます。

9-1. ブロックパターンとは

ブロックパターンとは、複数のブロックを組み合わせたレイアウトを保存し、再利用できる機能です。

見出しと文章、画像とボタン、問い合わせ案内など、よく使う構成をまとめて挿入できます。テーマやWordPress本体に用意されたパターンのほか、自分で作成したパターンも利用できます。

9-2. 登録済みのブロックパターンを挿入する

画面左上の「＋」を押し、パターンの一覧を開きます。

カテゴリーや検索から目的のパターンを探し、クリックすると記事内に挿入されます。挿入後は、文章や画像、リンク先を記事に合わせて変更してください。

9-3. オリジナルのパターンを作成する

保存したいブロックを一つまたは複数選択し、オプションメニューからパターンの作成項目を選びます。

パターン名を入力し、同期するかどうかを設定して保存します。保存後はブロック挿入パネルから呼び出せます。

管理画面の名称や保存場所は、WordPressのバージョンやテーマによって異なる場合があります。

9-4. 同期パターンとして登録する

同期パターンは、同じパターンを挿入したすべての場所で内容を共有する仕組みです。

一つを編集すると、ほかの記事に配置した同じ同期パターンにも変更が反映されます。全記事共通のお知らせ、資料請求ボタン、注意事項などに適しています。

記事ごとに異なる内容を入力したい部分には、通常の同期パターンを使わないよう注意しましょう。

9-5. 同期せず個別に編集できるパターンを作る

同期しないパターンは、挿入した時点で通常のブロックとして扱われます。

元のレイアウトを保ちながら、記事ごとに文章や画像を自由に変更できます。商品紹介、記事末の案内、定型的な比較表など、構造だけを再利用したい場合に向いています。

9-6. 登録したパターンを編集・削除する

登録済みパターンは、パターンの管理画面から編集や削除を行えます。

同期パターンを編集すると使用中の場所にも影響するため、変更前に利用箇所を確認しましょう。不要になったパターンを削除する場合も、既存ページへの影響を確認することが重要です。

9-7. ブロックをコピーして別の記事で使う

一時的に再利用するだけであれば、ブロックをコピーして別の記事に貼り付ける方法が簡単です。

ただし、コピー後のブロックは元のブロックと連動しません。あとからまとめて修正する可能性がある場合は、同期パターンを利用しましょう。

10. ブロックエディターを効率よく使う便利機能

記事作成に慣れてきたら、ショートカットやリストビューを活用すると編集時間を短縮できます。

10-1. キーボードショートカットを活用する

代表的なショートカットは次のとおりです。

使用できるショートカットの一覧は、エディター内のキーボードショートカット画面から確認できます。

10-2. スラッシュコマンドでブロックを追加する

空の段落で「/」を入力し、そのままブロック名を入力すると、マウスを使わずにブロックを追加できます。

文章作成の途中で見出し、画像、リストなどを入れるときに便利です。よく使うブロック名を覚えると、編集の流れを止めずに作業できます。

10-3. リストビューで記事構造を確認する

リストビューでは、記事内のすべてのブロックと親子関係を一覧で確認できます。

長い記事では、目的の見出しを選択して編集位置へ移動できます。カラムやグループが増えた場合も、どのブロックがどこに入っているか把握しやすくなります。

10-4. 複数ブロックを一括選択・編集する

複数のブロックを選択すると、まとめて移動、削除、コピー、グループ化などを実行できます。

すべての設定を一括変更できるわけではありませんが、グループ化してから背景色や余白を設定すると、エリア全体をまとめてデザインできます。

10-5. 全画面モード・スポットライトモードを使う

全画面モードではWordPress管理画面のメニューを隠し、編集エリアを広く表示できます。

スポットライトモードでは、選択中のブロック以外が目立たない表示になります。文章に集中したい場合や、複雑なページで編集対象を分かりやすくしたい場合に便利です。

10-6. 設定パネルの表示項目を整理する

右上のオプションメニューから設定画面を開くと、表示するパネルや編集方法を変更できます。

利用していないカスタムフィールドや投稿設定などを非表示にすると、必要な項目を探しやすくなります。設定はあとから再表示できます。

10-7. コードエディターに切り替える

オプションメニューからコードエディターへ切り替えると、記事全体のブロックマークアップを確認できます。

HTMLをまとめて確認したい場合に便利ですが、ブロック用の記述を変更するとエラーが発生する可能性があります。通常の記事編集ではビジュアルエディターを使用するのが安全です。

10-8. リビジョンや自動保存から内容を復元する

WordPressでは、下書き保存や更新時の内容がリビジョンとして記録されます。

投稿設定にリビジョンが表示されている場合は、過去の内容を比較して復元できます。ブラウザが閉じた場合などには、自動保存された内容を復元する案内が表示されることもあります。

大幅な変更を行う前には、手動で下書き保存または更新しておきましょう。

11. WordPressのブロックを追加・編集できないときの対処法

ブロックエディターが正常に動かない場合は、表示設定、ブラウザ、キャッシュ、テーマ、プラグインなどを順番に確認します。

作業前には記事の内容やサイトデータをバックアップしておきましょう。

11-1. 「＋」ボタンやツールバーが表示されない

ブロックをクリックしてもツールバーが見つからない場合は、編集画面上部に固定されていないか確認します。

オプションメニューのトップツールバーが有効になっていると、ブロックの近くではなく画面上部にツールバーが表示されます。

設定パネルや全画面モードを切り替え、ブラウザの表示倍率も確認してください。

11-2. ブロックを選択できない・移動できない

複雑なグループやカラム内では、目的のブロックを直接クリックしにくいことがあります。

リストビューを開き、ブロック名から選択してください。鍵のアイコンが表示されている場合は、移動や削除がロックされている可能性があります。

親ブロックを選択してロック設定を確認しましょう。

11-3. ブロックの設定項目が見つからない

画面右上の設定アイコンを押し、サイドバーを表示します。そのうえで対象のブロックを選択し、「ブロック」タブを開いてください。

設定項目はブロックやテーマによって異なります。タイポグラフィや寸法のメニューに、追加項目を表示するボタンがないか確認しましょう。

11-4. 「このブロックには、想定されていないか無効なコンテンツが含まれています」と表示される

保存されたHTMLと、ブロックが想定する内容が一致しないときに表示されるエラーです。

まず「ブロックのリカバリーを試行」を実行します。解決しない場合は、現在の内容と変換後の内容を比較するか、HTMLまたはクラシックブロックへ変換します。

独自HTMLを編集していた場合は、必要なコードを別の場所へコピーしてから操作してください。

11-5. 更新・公開ボタンを押しても保存できない

インターネット接続、ログイン状態、ユーザー権限を確認します。

別のタブでWordPress管理画面を開き、ログインが切れていないか確認してください。セキュリティープラグインやサーバー側の設定が通信を遮断している場合もあります。

保存できない状態で再読み込みすると内容を失う可能性があるため、本文をコピーしてから対処しましょう。

11-6. 編集画面が真っ白になる・動作が重い

ブラウザを再読み込みし、不要なタブやアプリを閉じます。別のブラウザやシークレットウィンドウで開く方法も有効です。

高解像度画像、大量のブロック、複雑な埋め込みが多い記事では、動作が重くなることがあります。画像を圧縮し、不要なブロックやプラグインを整理しましょう。

11-7. テーマやプラグインの競合を確認する

不具合が特定の記事だけでなくサイト全体に発生する場合は、テーマやプラグインの競合が考えられます。

バックアップを取ったうえで、検証環境またはメンテナンス可能な時間帯にプラグインを一つずつ停止します。標準テーマへ一時的に切り替えて改善するかも確認してください。

本番サイトでの停止が難しい場合は、ステージング環境を利用しましょう。

11-8. キャッシュを削除して再読み込みする

古いJavaScriptやCSSが残っていると、ボタンが反応しないなどの問題が起こることがあります。

ブラウザキャッシュ、キャッシュプラグイン、サーバーキャッシュ、CDNキャッシュを順番に削除し、編集画面を再読み込みしてください。

キャッシュ削除後も改善しない場合は、ブラウザの開発者コンソールにエラーが出ていないか確認します。

11-9. WordPress・テーマ・プラグインを更新する

古いバージョンを使用していると、ブロックエディターとの互換性問題が発生する場合があります。

バックアップを取得してから、WordPress本体、テーマ、プラグインを更新してください。一度にすべて更新せず、更新後に動作を確認すると原因を特定しやすくなります。

PHPのバージョンやサーバー環境も、利用中のWordPressが推奨する条件を満たしているか確認しましょう。

11-10. クラシックエディターから切り替えられない

クラシックエディター関連のプラグインが有効になっている場合は、設定を確認します。

投稿タイプごとに使用するエディターが指定されていたり、ユーザーがエディターを選べる設定になっていたりすることがあります。

テーマや別のプラグインがブロックエディターを無効化している可能性もあるため、競合を順番に確認してください。

12. WordPressブロックエディターに関するよくある質問

12-1. ブロックエディターは無料で使える？

WordPress本体に含まれる標準ブロックエディターは、追加料金なしで利用できます。

ただし、有料テーマや有料プラグインが提供する独自ブロックを利用する場合は、購入費用や利用料金が必要になることがあります。

12-2. ブロックエディターとGutenbergは同じもの？

一般的な記事作成では、ほぼ同じ意味で使われることがあります。

厳密には、Gutenbergはブロックを中心としたWordPressの編集機能を開発するプロジェクトやプラグインの名称で、ブロックエディターはWordPress本体で利用する編集画面を指します。

12-3. ブロックを一括でコピー・削除できる？

複数のブロックを選択すれば、まとめてコピーや削除ができます。

本文上で範囲選択するか、リストビューでShiftキーを押しながら対象を選択してください。複雑な構成では、グループ化してから操作すると安全です。

12-4. 間違えて削除したブロックを元に戻せる？

削除直後であれば、画面上部の「元に戻す」またはCtrl・Command＋Zで復元できます。

保存後や画面を閉じたあとに戻したい場合は、投稿設定にあるリビジョンから過去の内容を確認してください。

12-5. ブロックを横並びにするには？

カラムブロックまたは行ブロックを使用します。

異なる幅で複数のエリアを作る場合はカラム、ボタンやアイコンなどを一列に並べる場合は行が便利です。スマートフォンでの折り返しも確認しましょう。

12-6. ブロック間の余白を調整するには？

ブロック設定の寸法、マージン、パディング、ブロック間隔などを使用します。

設定項目がない場合は、グループブロックで囲んで余白を設定するか、スペーサーブロックを追加します。空の段落や連続した改行による調整は避けましょう。

12-7. よく使うブロックを保存できる？

ブロックパターンとして保存できます。

全ページで同じ内容を表示したい場合は同期パターン、レイアウトだけを再利用して個別に変更したい場合は同期しないパターンが適しています。

12-8. ブロックエディターからクラシックエディターへ戻せる？

クラシックエディター関連のプラグインを導入すれば、従来の編集画面を利用できる場合があります。

ただし、ブロックエディターで作成した複雑なレイアウトをクラシックエディターで開くと、編集しにくくなったり表示が変わったりする可能性があります。

切り替える前にバックアップやテストを行いましょう。

12-9. テーマによって使えるブロックは変わる？

WordPressの標準ブロックは多くのテーマで利用できますが、対応するデザイン設定やレイアウト機能はテーマによって異なります。

ブロックテーマでは、投稿本文だけでなくヘッダー、フッター、テンプレートなどもブロックで編集できます。テーマ独自のブロックが追加されることもあります。

12-10. ブロックを追加できるプラグインは必要？

文章、画像、見出し、表、ボタン、カラムなどの基本的な記事であれば、標準ブロックだけでも作成できます。

標準機能では実現できないデザインや機能が必要になったときに、ブロック追加プラグインを検討しましょう。

ブロックを増やしすぎると編集画面が複雑になり、表示速度や保守性に影響する場合があります。必要な機能を明確にしてから導入することが大切です。

まとめ

WordPressのブロックエディターは、文章、見出し、画像、ボタンなどをブロック単位で組み合わせて記事やページを作成する機能です。

まずは次の基本操作を覚えましょう。

1. 「＋」ボタンまたは「/」でブロックを追加する

2. ツールバーと右側の設定から内容やデザインを編集する

3. 矢印、ドラッグ、リストビューでブロックを移動する

4. プレビューでパソコンとスマートフォンの表示を確認する

5. 問題がなければ公開または予約投稿する

初心者のうちは、段落、見出し、画像、リスト、ボタンの5種類を使えれば、一般的なブログ記事を作成できます。操作に慣れたら、カラム、グループ、テーブル、ブロックパターンなどを活用して、読みやすく分かりやすいページに整えましょう。

ブロックを追加できない場合や編集画面が正常に動かない場合は、リストビュー、表示設定、キャッシュ、テーマ、プラグイン、WordPress本体の更新状況を順番に確認することが解決への近道です。