WordPressブロックエディターの使い方｜記事作成・配置・崩れの直し方

※本記事にはPRを含む場合があります。

こんにちは。『脱会社員』脱サラを応援し続けるブログ、運営者の『なかびー』です。

WordPressのブロックエディターでは、文章、見出し、画像、表などを別々の部品として編集します。慣れないうちは「文章を直したいのに枠が選ばれる」「設定が見つからない」「コピーしたらほかの記事も変わった」と迷いやすいものです。操作を覚える前に、いま何を選び、どこまで変わるのかを確認すると、編集が進めやすくなります。

ここでは、自分のブログ記事を下書きで作る人に向けて、基本の挿入、リストビューでの整理、グループとパターン、保存前後の確認を説明します。記事内の制作例は架空の練習用で、図版は説明用の生成イメージです。WordPress本体の版、テーマ、追加機能、権限によって項目名や表示が変わるため、特定画面を全環境共通のものとは扱いません。

ブロックエディターで編集する範囲を先に見分ける

投稿全体の設定と、選択中のブロックの設定

記事タイトル、公開状態、カテゴリーなどは投稿全体に関わる設定です。一方、段落の文字色、画像の代替テキスト、グループの余白などは、選択したブロックの設定です。同じ右側の領域に表示されることがあるため、どちらの設定を見ているか確かめましょう。

「画像を大きくしたいのにカテゴリーしか出てこない」という場合、必要な設定が消えたのではなく、投稿側の設定を表示している可能性があります。まず本文中の画像を選び、ブロック名や設定の見出しを確認します。逆に記事全体の項目を変えたいときは、選択中の段落だけを探し続けないようにします。

編集の最初に「対象は一記事全体か、その中の一部か」を声に出せると、操作の範囲が整理できます。複数人で作業する場合も、「この記事のアイキャッチを変更」「本文の三つ目の画像の幅を変更」と対象を具体的に伝えると、思い違いを減らせます。

ツールバーと設定パネルは役割で探す

ブロックを選ぶと、文字の強調や配置などに使うツールバーが表示されます。さらに詳しい設定はサイドバー側にある場合があります。表示位置はエディターの設定によって変わるため、「いつも文章のすぐ上にあるはず」と決めつけないことが大切です。

WordPressのブロックエディター公式ガイドでは、ブロックの挿入、設定、プレビューなどの基本領域が整理されています。見本と画面が違うときは、まず同じ機能を探しているか、本体の版や表示設定が違わないかを確認してください。

アイコンの意味が分からないときは、いきなり押して試すより、ポインターを重ねた説明やメニュー名を見ます。削除や変換のように内容へ影響する項目は、下書きの練習範囲で試しましょう。見つからない機能を追加するために、すぐプラグインを増やす必要はありません。

記事本文とサイト全体のデザインを混同しない

通常の投稿編集では、一つの記事の本文を整えます。ブロックテーマのサイトエディターなどでは、ヘッダー、フッター、テンプレートといったサイト全体に関わる部分を扱うことがあります。同じブロックが見えていても、変更が及ぶ範囲は異なります。

例えば一記事の末尾へ案内文を入れることと、全記事に使われるテンプレートへ案内文を入れることは別です。後者を変更すると、意図していない記事にも影響する可能性があります。画面に記事名が表示されているか、テンプレート名が表示されているかを確認してください。

まず本文の編集を覚えたい人は、投稿一覧から対象の下書きを開く流れに固定すると分かりやすくなります。サイト全体のデザイン変更は別の作業として扱い、何が表示されているか分からないまま保存しないようにしましょう。戻すための記録も、記事単位と全体設定で分けて考えます。

※表は横にスクロールできます。

練習用の下書きで完成条件を決める

最初の練習は、公開中の記事を直接いじるより、練習用の下書きで行うと安心です。題材は「自宅の作業スペースを整える」など、自分で内容を管理できるものにします。見出し二つ、段落数個、画像一枚、小さな表一つがある程度で十分です。

完成条件は「見た目がかっこいい」ではなく、「見出しが正しい順序」「本文を読める」「画像の意味が伝わる」「表の項目が比較できる」「保存して開き直せる」と具体化します。機能を全部使うことを目標にしなければ、何から覚えるかが決めやすくなります。

練習した下書きが不要になった場合も、他の記事と取り違えないようタイトルで区別しておきます。共有サイトなら、削除や公開の権限を勝手に広げず、担当者へ扱いを確認してください。安全に試せる場所を用意することも、編集の技能の一部です。

基本のブロックを使って、一つの記事を形にする

文章は意味のまとまりごとに段落へ分ける

文章を書き始めるときは、段落ブロックを使います。一つのブロックに何千字も詰めるより、一つの話題や説明の区切りで段落を分けた方が、後から順序を変えやすくなります。画面上の行数だけで区切るのではなく、読み手が理解するまとまりを基準にしましょう。

例えば「机を片付ける理由」「残す道具の決め方」「作業後の戻し方」を別の段落にします。同じ内容の途中で細かく切りすぎると、選択や移動の回数が増えます。一段落一文に統一する必要もなく、内容と読みやすさの両方で判断してください。

行末の位置を揃えるために、たくさんの空白や手動改行を入れるのは避けます。パソコンで揃っていても、スマートフォンでは不自然な折り返しになりやすいためです。本文の幅が変わっても読めるよう、文章の流れを優先します。

見出しは文字の大きさではなく、内容の階層で選ぶ

見出しブロックは、記事の章や節を表すために使います。大きく目立たせたいという理由だけで、段落を見出しへ変えたり、階層を飛ばしたりしないようにします。記事タイトルと本文中の見出しの役割も分けてください。

一般的なブログ記事なら、本文の大きな章をH2、その章の中の説明をH3として整理する方法があります。ただし、テーマのタイトル出力も関係するので、本文へ記事タイトルをもう一度H1として置くことを当然の前提にしないようにしましょう。まず既存の構造を確かめます。

練習記事なら、H2を「残す道具を決める」、その下のH3を「毎日使う物」「週に一度使う物」とします。「週に一度使う物」は前の項目と同じ階層です。見出しだけを読んで内容の順番が分かるかを確認すると、装飾より先に整えるべき点が見つかります。

画像は挿入した後の説明と表示まで確認する

画像ブロックを追加したら、アップロードするか、メディアライブラリから選びます。似たファイル名や古い版がある場合は、見た目だけでなく対象の画像かを確認してください。記事に不要な個人情報や権利上使えない素材が含まれていないかも、挿入前に点検します。

画像を選んだ後は、幅、配置、代替テキスト、必要なキャプションなどを整えます。代替テキストは画像が伝える意味を補うもので、キーワードを並べる欄ではありません。出典や生成イメージであることなど、読者に見える必要がある説明は本文やキャプションへ書きます。

画像を目立たせることだけに集中せず、前後の文章と対応しているかも確認しましょう。「下の図」の直後に別の画像を移動してしまうと、文章の指示が合わなくなります。ブロックは簡単に移動できますが、関連する説明まで自動で書き換わるわけではありません。

表は比較する項目を揃えてから作る

表を入れる前に、何を比較するのか、列の見出しを決めます。たとえば道具の整理なら「道具」「使う頻度」「置き場所」「残す理由」という列が考えられます。同じ列に金額と期間が混在するなど、比較の基準が揺れていないかを確認してください。

WordPressの表ブロック公式ガイドには、行や列の追加・削除、見出し部分などの機能が説明されています。表はデータの整理に使い、単に文章や画像を横へ並べるためのレイアウト道具として使わない方が、構造を理解しやすくなります。

列を増やしすぎると、スマートフォンで読みにくくなります。短い言葉へ直す、表を分ける、横スクロールを利用できるテーマ設定を確認するなど、読み方も含めて調整しましょう。編集画面で収まったことと、実際の記事で読めることは同じではありません。

※表は横にスクロールできます。

リンクと箇条書きは、読者の行動に合わせる

リンクを付けるときは、どの文字を押すと何が開くのかが分かるようにします。「こちら」だけより、「机上整理のチェックリスト」のように内容を示した方が、前後の文章を細かく読まなくても判断しやすくなります。設定した後はリンク先を実際に確認しましょう。

箇条書きは、持ち物や同じ立場の選択肢などを並べるときに向いています。順番がある作業なら番号付きのリストが役立ちます。見た目を箇条書きにしたいだけで段落の先頭へ記号を手入力するより、リストブロックを使うと項目の追加や移動が整理しやすくなります。

練習記事を一度読み返し、画像、表、リストを使った理由を説明してみてください。すべて段落の方が理解しやすい部分を、機能を使うためだけに変える必要はありません。伝える内容が先にあり、ブロックはそれに合う形を選ぶ道具です。

リストビューとグループで、記事の構造と配置を整える

選びにくい場所はリストビューから探す

ブロックが増えると、画面をクリックするだけでは目的の部分を選びにくくなります。画像の枠、グループ、段落が入れ子になっていると、何度クリックしても外側の箱を選んでしまうことがあります。そんなときは、記事の構造を一覧で見られるリストビューを使います。

WordPressのリストビュー公式説明では、階層を見ながらブロックの選択や移動ができること、アウトラインで見出し構造などを確認できることが示されています。画面上の見た目だけでなく、構造から対象を特定するための道具と考えると使いやすくなります。

「グループの中の画像」を選びたいなら、グループを展開し、画像の行を選びます。右側の設定が画像用に変わったかも確かめましょう。選択対象が分かると、幅や余白をどの階層で変えているかが見え、同じ操作を繰り返す迷いが減ります。

章を動かすときは、一緒に移す範囲を決める

記事の順番を入れ替えるときは、見出しだけ動かして終わりにしないようにします。見出しの下の文章、対応する画像、表、注意書きまでが一組かを確認してください。範囲がずれると、別の章の説明が混ざる原因になります。

たとえば「置き場所の決め方」を先に読みたい構成へ変える場合、その章に属するブロックを選び、前後のつながりまで見ます。「次に」「先ほど紹介した」といった表現は、移動後に意味が合わなくなることがあります。配置を変えたら、境目の文章も読み直します。

移動操作に不慣れなうちは、一度に記事全体を大きく並べ替えず、一章ずつ確認します。移動前の状態を保存し、操作後にアウトラインと本文を照合すると、どこで順番が崩れたかを追いやすくなります。ドラッグの見かけだけで完了を判断しないようにしましょう。

グループは、意味のあるまとまりに使う

グループブロックは、複数のブロックをまとめて扱うために便利です。例えば「注意」という見出しと説明文を一つにして、背景や内側の余白を揃えられます。すべてをグループ化すればよいわけではなく、一緒に扱う理由がある範囲に使います。

グループブロックの公式ガイドでは、子ブロックを含む構造や、背景・間隔・レイアウトなどの設定が説明されています。子の段落を選ぶか、親のグループを選ぶかで調整対象が変わる点を意識してください。

グループの中へさらにグループを何重にも追加すると、初心者には選択が難しくなります。必要なまとまりを作った後は、同じ役割の箱が重複していないか見直します。名前を付けられる環境なら、「注意事項」「比較表」など役割が分かる名前にすると、後の修正で役立ちます。

※表は横にスクロールできます。

余白は空行の積み重ねで調整しない

見出しの上を空けたいとき、空の段落を何個も入れると、その場では整ったように見えるかもしれません。しかし端末や文字サイズが変わると、不自然な空白が残りやすくなります。まずテーマの標準の間隔や、選択したブロックの余白設定を確認しましょう。

内側の余白と、外側のブロックとの間隔も区別します。色付きの注意枠で文字が端へ寄りすぎているなら、枠の内側の余白を見ます。枠と次の見出しが近すぎるなら、外側の間隔を確認します。似た見た目でも調整する対象が異なります。

スペーサーを使う場合も、置いた理由と影響を確かめます。大きな空白を作ったら、スマートフォンで本文が必要以上に分断されないか見てください。余白は装飾ではなく、まとまりと読む順番を伝えるために使うと判断がぶれにくくなります。

カラムや横並びは、狭い画面での順番を確かめる

左右に画像と説明を並べるレイアウトは便利ですが、パソコンだけで判断しないことが大切です。狭い画面で縦に並んだとき、説明が画像の前後どちらに来るのか、ボタンや注記が離れていないかを確認します。

表、カラム、グループは似た見た目を作れる場合がありますが、役割が違います。データの比較は表、複数の内容を横に並べるならカラムなど、目的に合う構造を選びます。見た目を再現するために無理な入れ子を増やすより、少ない部品で理解できる配置を目指しましょう。

最初の練習では、本文を一列で完成させてから、一か所だけ横並びを試す方法が有効です。元の読み順が明確なので、横並びによって本当に分かりやすくなったかを比較できます。複雑さを増やす前に、読者にとっての利点があるかを確かめます。

ブロックを使い回すときは、複製と同期パターンを区別する

普通の複製は、似た形を個別に作る出発点

同じ形の案内を何度か作りたいとき、ブロックの複製が役立ちます。例えば「道具名・写真・説明」のまとまりを複製し、それぞれ別の道具へ書き換える使い方です。毎回一から背景や配置を設定する手間を減らせます。

ただし、複製元に古いリンクや代替テキストが残っていると、見た目だけを変えても情報が合わなくなります。コピーした後は、文字、画像、リンク、注記を順番に確認してください。同じ見た目の箱ほど、間違いに気づきにくいものです。

普通の独立したブロックを複製することと、同期パターンをもう一か所へ配置することは区別します。後者は共有される内容への参照を増やしている場合があります。「複製したから別物」と思い込まず、元の対象が何かを先に確かめましょう。

同期パターンは、使っている場所への変更を考える

同期パターンは、複数の場所で同じ内容を維持したいときに役立ちます。共通の案内文を直した際に、利用している場所も同じ内容へ更新する用途などが考えられます。その便利さは、変更範囲が広いという注意点と表裏一体です。

WordPressの同期パターン公式説明では、同期パターンの変更が利用先へ反映されることや、通常のブロックへ切り離して編集する方法が説明されています。以前の教材で「再利用ブロック」と呼ばれるものとの関係も、公式の現行名称で確認できます。

一記事だけの文言を変えたいなら、その部分が同期されていないかを見てください。同期元を直接修正する前に、ほかの記事でも同じ変更が必要か考えます。共通の申込先を一記事の話題へ書き換えてしまうなどの事故は、編集前の範囲確認で防ぎやすくなります。

同期しない形が向くものを判断する

同じデザインを使いたいだけで、内容は記事ごとに違う場合、常に同期する必要はありません。作品紹介、商品ごとの補足、記事別の要点などは、見た目を参考にしながら個別に編集したいことが多いはずです。

例えば「この記事のまとめ」という箱の形は共通でも、中の文章は記事ごとに変わります。このような部分を内容まで同期させると、一つ直しただけでほかの記事のまとめが変わる原因になります。逆に全記事で同じ案内を出したいなら、共通管理が向いている可能性があります。

迷ったら「一つを直したとき、ほかも変わる方が便利か」という質問で判断します。使い回す仕組みの名前を覚える前に、変更を共有したいかを決めると分かりやすくなります。共有していることを知らない人が編集する可能性も踏まえ、管理担当を決めておきましょう。

※表は横にスクロールできます。

使い回す部品には、用途と変更時の確認を残す

パターンや共通部品を増やす際は、名前に用途を入れます。「パターン1」だけでは、何に使い、どこへ影響するかが分かりません。「全記事共通の相談案内」「記事別に書き換える要点枠」といった名前の方が、編集者が判断しやすくなります。

作るときに、使用場所、内容の責任者、更新する条件を簡単に残します。共通案内のリンクを変更するなら、本文表示だけでなくリンク先、スマートフォンの見え方、複数の記事での反映まで確認します。管理しやすくするための部品が、誰も把握していない共有設定にならないようにします。

削除も同じです。記事から一つの配置を外すことと、元のパターン自体を削除することを混同しないでください。不要かどうか分からない場合は、利用箇所を調べてから判断します。日々の本文編集で使わない部品まで、まとめて整理しようとしなくて構いません。

崩れや保存の問題を切り分け、読み手の画面で仕上げる

貼り付けた文章が崩れたら、構造を確認する

別の文書ソフトから文章を貼り付けると、予想しない書式や空白が入ることがあります。色や大きさを一つずつ直す前に、段落、見出し、リストがどのブロックになっているかを確認しましょう。見た目の問題に見えても、構造が違っている場合があります。

不自然な空行が多いなら、空の段落が連続していないか、段落の中に不要な改行が入っていないかを調べます。見出しが本文扱いなら、適切な見出しブロックへ直します。元の文章を控えたうえで、短い部分を貼り付け直して比較すると原因を絞りやすくなります。

書式を引き継がない貼り付け方法を利用する場合も、リンクや強調が失われる可能性に注意します。全部の書式を落とせば必ず正解というわけではありません。本文に残すべき意味と、不要な装飾を分けて確認してください。

ブロックを選べない・動かせない場合の順番

選べないときは、まずリストビューで対象を探します。画面では重なって見えていても、階層から選べることがあります。次に親グループを選んでいるのか、子の画像や段落を選んでいるのかを確かめます。

動かせない場合は、ロック設定や編集権限が関係している可能性もあります。管理されたサイトでは、レイアウトを守るために意図的に操作を制限していることがあります。権限やロックを自己判断で解除しようとせず、どこをどう変えたいかを管理担当へ伝えてください。

操作できない理由を切り分けるときは、「一つのブロックだけか」「その記事だけか」「同じ権限の他の人でも同じか」を記録します。ただし、調査のために他人のアカウントを使ったり、必要のない権限を取得したりする必要はありません。確認できた範囲を正確に共有します。

無効なブロックの警告は、内容を控えてから対応する

HTMLを直接変えたり、追加機能の出力が変わったりした後に、ブロックの内容を認識できない警告が出る場合があります。意味が分からないまま復旧や変換のボタンを押し続けると、元の内容との差が分かりにくくなります。

まず文章や必要な設定を控え、どの操作の後に警告が出たかを確認します。公開中の重要な記事なら、バックアップや履歴の確認ができる担当者へ相談しましょう。見た目が一時的に戻っただけで、リンクや画像まで正しく保たれたと判断しないことが大切です。

追加機能が作ったブロックの場合は、配布元の説明や対応版も確認します。標準ブロックと同じ名前に見えても、独自の設定を持つことがあります。原因を特定せずサイト全体のプラグインを一斉に止めるより、影響を限定した検証方法を管理担当と考えます。

※表は横にスクロールできます。

プレビューで見る項目を、文章・配置・操作に分ける

プレビューでは、最初に文章だけを読み、見出しと内容の対応を確認します。次に画像や表、余白を見て、説明に必要な情報が隠れていないかを点検します。最後にリンクやボタンを操作し、想定した場所へ移動するかを確かめると、見落としを減らせます。

スマートフォンの確認では、文字が読めることに加え、横にはみ出す表、細すぎるボタン、画像と説明の離れ方にも注目します。エディターの端末切替表示は便利ですが、実際の端末や公開先の条件と完全に同じとは限りません。可能なら実機でも重要な部分を確かめましょう。

投稿本文の編集とは別に、記事への入口や固定ページの表示を整えたい方は、WordPress固定ページの作り方で、投稿との違いやメニューの役割を確認できます。本文の部品操作だけで、サイト全体の導線が自動的に完成するわけではありません。

保存後に開き直し、編集した内容が残ったかを見る

保存を押した後は、完了表示や保存状態を確認します。通信が不安定なときや警告が出ているときに、そのままタブを閉じないようにしてください。長い文章を編集した場合は、必要に応じて外部の控えも残しておくと安心です。

一度保存できたら、投稿一覧から同じ記事を開き直し、最後の変更が残っているか見ます。プレビューで見えていた内容と、実際に保存された内容を区別するためです。複数のタブで同じ記事を開いていると、古い画面から上書きする危険があるため、作業するタブを整理します。

公開中の記事で変更が見えない場合は、保存失敗だけでなく、表示しているURL、キャッシュ、編集対象の違いも調べます。確認のために公開状態を何度も切り替えるのではなく、どこまで正常かを記録して一段階ずつ追いましょう。

次の記事でも再現できる編集手順を残す

練習が終わったら、自分がつまずいた点と直し方を短く残します。「画像が選べないときはリストビュー」「共通案内を変える前に同期を確認」「表はスマートフォンで点検」のように、次に使える言葉にします。画面の座標だけでは、更新で位置が変わると役に立たなくなります。

ブログ全体をこれから作る人は、副業ブログの始め方で、テーマ選びや記事運用の順番も整理できます。ツール操作ができることと、読者に必要な記事を作ることは別の技能ですが、小さな下書きを正しく仕上げる経験は両方をつなぐ土台になります。

ブロックエディターは、全部の機能を暗記してから使う必要はありません。編集範囲を見分け、基本の部品を選び、構造を整理し、使い回しの影響を確認する。そのうえで保存後の状態まで確かめれば、自分で原因を探しながら記事を作る力を少しずつ増やしていけます。