WordPressで記事を書こうとして、画面に並ぶ「＋」や右側の設定欄を見て戸惑っていませんか。現在のWordPressでは、文章・見出し・画像などを「ブロック」という単位で追加し、組み合わせながら記事を作ります。仕組みが分かれば、専門的なコードを書かなくても、読みやすい記事を自分で整えられます。
この記事では、初めてブロックエディターを使う人に向けて、画面の見方、ブロックの追加・移動・削除、よく使うブロック、公開前の確認までを実際の作業順に解説します。すでに記事を書き始めていて操作に迷っている人も、必要な箇所から確認してください。
WordPressのブロックエディターとは
ブロックエディターは、投稿や固定ページの内容をブロック単位で編集するWordPressの標準エディターです。段落、見出し、画像、リスト、ボタンなどがそれぞれ独立したブロックになっています。
従来の文書作成ソフトのように一枚の編集欄へすべてを書くのではなく、内容ごとに部品を積み重ねるイメージです。たとえば、記事の冒頭は段落ブロック、章のタイトルは見出しブロック、写真は画像ブロックとして配置します。
ブロックが分かれているため、文章の途中に画像を差し込む、見出しの順番を入れ替える、特定の段落だけ背景色を変えるといった編集をしやすいのが特徴です。各ブロックは個別に選択でき、ほかの部分を崩さず操作できます。
投稿編集とサイト編集は目的が異なる
WordPressには、投稿や固定ページの本文を作る編集画面のほか、対応テーマではサイト全体のテンプレートを編集する画面もあります。見た目が似ていることがありますが、初心者がブログ記事を書くときに使うのは、通常「投稿」から開く編集画面です。
記事を書きたいのにヘッダーやフッターが編集対象になっている場合は、サイト編集画面を開いている可能性があります。管理画面へ戻り、「投稿」の「新規投稿を追加」から始めると混乱を避けられます。
記事を書く前に準備しておくこと
操作を覚えながら内容まで考えると、作業が止まりやすくなります。最初は短い練習記事でもよいので、タイトル、伝えたい結論、見出し、使う画像を大まかに準備しておきましょう。
本番の記事では、次の材料を先にそろえておくと編集が進みます。
- 記事タイトルの案
- 読者が知りたいことと記事の結論
- 内容を分ける見出し
- 掲載する画像と代替テキスト
- 参照先や関連ページのURL
- 記事に設定するカテゴリー
画像はアップロード前にファイル名と容量を確認します。大きすぎる画像をそのまま使うと、記事の表示が遅くなる原因になります。また、使用許可のない写真やイラストを掲載しないよう、権利関係も確認してください。
編集画面の基本的な見方
投稿の編集画面は、大きく分けて上部のツールバー、中央のコンテンツエリア、右側の設定サイドバーで構成されます。画面幅やWordPressの状態によって表示位置や名称が少し異なる場合がありますが、役割を知っていれば迷いにくくなります。
上部のツールバー
上部には、ブロックを追加するボタン、元に戻す・やり直す、ドキュメント概観、下書き保存、表示確認、設定、公開などの操作があります。作業中によく使うのは、元に戻す、下書き保存、表示確認です。
公開ボタンは記事を一般に見られる状態へ進める操作です。練習中や内容確認中は急いで押さず、下書きとして保存します。公開前には、別画面で実際の見え方を確認してください。
中央のコンテンツエリア
中央はタイトルと本文を入力する場所です。空の行へ文字を入力すると、通常は段落ブロックとして扱われます。ブロックを選択すると、その近くにツールバーが表示され、太字、配置、リンクなど、そのブロックで使える操作を選べます。
右側の設定サイドバー
右側には、投稿全体の設定と選択中ブロックの設定が表示されます。投稿側では公開状態、カテゴリー、アイキャッチ画像、抜粋などを確認します。ブロック側では文字サイズ、色、余白などを設定できます。
設定欄が見えない場合は、上部にある設定の表示切り替えを確認します。また、何も選択していないときとブロックを選択したときで内容が変わります。「設定したいブロックを先に選ぶ」と覚えておきましょう。
リストビューとアウトライン
ブロックが増えて選びにくくなったら、ドキュメント概観を開きます。リストビューでは記事内のブロックが順番に並び、入れ子になった構造も確認できます。アウトラインでは見出し構成などを確認できます。
画像の上に文字を重ねたブロックや、複数のブロックをまとめたグループは、中央の画面だけでは目的の部分を選びにくいことがあります。その場合はリストビューから対象を選ぶと確実です。
新しい記事を下書きする基本手順
管理画面の「投稿」から新しい投稿を追加し、まず記事タイトルを入力します。タイトルを入力したら、すぐに下書き保存しておくと安心です。続いて本文エリアを選択し、導入文を段落として入力します。
導入文の次に見出しブロックを追加し、その下へ段落ブロックを置きます。この「見出しと本文」の組み合わせを繰り返すと、基本的な記事構成ができます。必要な場所へ画像やリストを追加してください。
本文ができたら、カテゴリー、アイキャッチ画像、抜粋などの記事設定を行います。最後に下書きを保存し、表示確認を使ってパソコンとスマートフォンで読みやすいかを確認します。
ブロックを追加する方法
ブロックの追加方法は一つではありません。最初は画面上の「＋」から探し、慣れたら本文中の追加ボタンやスラッシュ入力を使うと効率的です。
ブロック挿入ツールから選ぶ
上部のブロック挿入ボタンを押すと、利用できるブロック、パターン、メディアなどを探せます。名前が分かる場合は検索欄へ「画像」「リスト」のように入力します。どのブロックを使うか分からないときは、一覧を見ながら選べる方法です。
本文中の追加ボタンを使う
ブロックとブロックの間へマウスポインターを移動すると、追加ボタンが現れることがあります。挿入したい位置で押し、ブロックを選びます。目的の場所へ直接追加できるため、長い記事でも位置を間違えにくい方法です。
スラッシュ入力で検索する
空の段落で半角の「/」を入力し、続けてブロック名を入力すると候補が表示されます。たとえば、見出しを入れたい場合は「/見出し」、画像なら「/画像」と入力して選択します。
スラッシュ入力は速く操作できますが、文章の途中で使うと単なる文字として入力されることがあります。新しい空の段落から始めるのがポイントです。
初心者が最初に覚えたいブロック
WordPressには多数のブロックがありますが、ブログ記事で最初からすべてを使う必要はありません。段落、見出し、リスト、画像、ボタン、引用を使えれば、多くの記事を組み立てられます。
段落ブロック
通常の文章を書くための基本ブロックです。空の本文エリアへ文字を入力すると、多くの場合は段落ブロックになります。改行キーを押すと次の段落ブロックが作られるため、話題が変わる位置で段落を分けます。
一つの段落が長すぎると、スマートフォンで画面が文字だらけに見えます。一つの段落では一つの要点を伝え、数文ごとに区切ると読みやすくなります。ただし、短く切りすぎて文章の流れが途切れないようにします。
見出しブロック
記事の内容を章や節に分けるブロックです。本文を太字にして見出しの代わりにするのではなく、見出しブロックを使います。見出しには階層があり、記事タイトルの下では大きな章、その中の小さな項目という順番で整理します。
見た目を小さくしたいという理由だけで階層を飛ばすと、記事構造が分かりにくくなります。見た目の調整と文章構造を分けて考え、意味に合う見出しレベルを選びます。
リストブロック
複数の項目、確認事項、特徴などを並べるときに使います。順番に意味がない項目は箇条書き、作業順や順位を示す場合は番号付きリストが向いています。
長い説明を無理にリストへ詰め込むより、先に結論を短く並べ、その後に段落で補足すると読みやすくなります。リストの各項目で文末表現をそろえることも大切です。
画像ブロック
写真や図を記事へ掲載します。メディアライブラリから既存画像を選ぶ方法と、新しい画像をアップロードする方法があります。挿入後は、画像が伝える内容を簡潔に表す代替テキストを必要に応じて設定します。
装飾だけが目的の画像に不自然なキーワードを詰め込む必要はありません。画像を見られない読者へ何を伝えるべきかを考え、意味のある画像には内容に合う説明を書きます。
ボタンブロック
読者に関連ページを見てもらうなど、明確な行動を案内するときに使います。ボタンには「詳しくはこちら」だけでなく、「関連記事を読む」のように移動先が想像できる文言を付けます。
一つの画面にボタンを多く置くと、どれを押せばよいか分かりにくくなります。記事の目的に必要なものだけを置き、リンク先が公開済みで正しいことを確認してください。
引用ブロック
ほかのサイトや資料の文章を引用するときに使います。引用部分と自分の文章を区別し、出典を示します。引用は必要な範囲にとどめ、記事の大部分を他者の文章で構成しないようにします。
テーブルブロック
複数の項目を同じ観点で比較するときに便利です。単純な二列や三列の表から始め、情報を詰め込みすぎないようにします。横に項目が多い表はスマートフォンで読みにくくなるため、表示確認が欠かせません。
区切りブロックとスペーサーブロック
内容のまとまりを視覚的に分けるために使います。ただし、文章の区切りは基本的に見出しと余白で作ります。区切り線や大きな空白を多用すると、記事の流れが途切れて見えるため、必要な場所だけに使いましょう。
選択したブロックを編集する方法
変更したいブロックをクリックすると、ブロックツールバーと設定サイドバーが利用できます。ツールバーには頻繁に使う操作、サイドバーにはより細かな設定が並ぶのが基本です。
段落ブロックなら文字の配置やリンク、画像ブロックなら切り抜きや置換など、表示される項目はブロックごとに異なります。テーマやWordPressの構成によって使える設定も変わるため、別のサイトと画面が完全に同じとは限りません。
文字の一部を太字にする
強調したい文字だけを選択し、ツールバーの太字を使います。一段落すべてを太字にすると強調箇所が分からなくなるので、結論や重要語に絞ります。色や下線も使いすぎず、サイト全体で表現をそろえます。
リンクを設定する
リンクにする文字を選び、リンク操作からURLを入力します。設定後は、リンク先が正しいか、別の記事を誤って指定していないかを確認します。URLを本文へそのまま貼るより、移動先の内容が分かる文字へリンクを設定する方が読みやすくなります。
ブロックの種類を変換する
段落を見出しに変えるなど、対応するブロック同士は変換できる場合があります。文章を書いてから見出しにしたくなったときは、削除して作り直す前に変換メニューを確認してください。
変換先によっては一部の設定が引き継がれないことがあります。変換後は、文字、リンク、配置が意図どおりかを確認します。
ブロックを移動・複製・削除する方法
構成を直すときは、文章をコピーして貼り直すよりブロック自体を移動した方が安全です。対象ブロックを選択し、ツールバーや追加メニューから移動操作を選びます。
上下へ一つずつ移動する
短い距離なら、ブロックを上または下へ移動する操作が分かりやすい方法です。移動後に見出しと本文の組み合わせが崩れていないか確認します。
リストビューで並べ替える
離れた位置へ移動する場合や、グループの内側にあるブロックを扱う場合はリストビューが便利です。ブロックの階層を見ながら対象を選び、目的の位置へ移動します。
複製してから内容を変える
同じ設定のブロックを続けて使いたい場合は複製します。たとえば、同じデザインの案内を作るときに便利です。ただし、複製したリンクや文章を変更し忘れると誤案内になるため、内容を一つずつ確認します。
削除は追加メニューから行う
不要なブロックを選択し、追加メニューから削除します。画像ブロックを記事から削除しても、メディアライブラリの元画像は残るのが一般的です。完全に不要な画像の整理は、記事編集とは別の作業として慎重に行います。
複数のブロックをまとめて扱う方法
複数のブロックへ同じ背景や余白を設定したいときは、グループブロックを使います。見出し、段落、ボタンを一つのグループにまとめれば、まとまりを保ったまま移動できます。
ただし、入れ子を増やしすぎると選択が難しくなります。単に文章を続けて書くだけなら、無理にグループ化する必要はありません。背景を付ける、横並びにする、まとめて再利用するなど、目的がある場合に使います。
選択がうまくいかないときは、リストビューで親のグループと内側のブロックを見分けます。右側の設定が期待した内容と違う場合も、別の階層を選択している可能性があります。
パターンは繰り返すレイアウトに使う
パターンは、複数のブロックを組み合わせたレイアウトをまとめて挿入する仕組みです。画像と文章の組み合わせや案内部分などを、最初から整った形で追加できます。
挿入後に個別の内容を変更して使うものと、変更を共有できるものがあるため、作成時の選択を確認してください。仕組みを理解しないまま共有されるパターンを編集すると、別の場所の表示にも影響する可能性があります。初心者はまず通常のブロックと通常のパターンから使い、共有の仕組みは必要になってから覚えると安全です。
下書き保存と元に戻す操作
WordPressは編集内容を保存する仕組みを備えていますが、通信状態や操作のタイミングによって保存が完了していない場合があります。作業の区切りで下書き保存を行い、保存済みの表示を確認しましょう。
直前の編集を取り消したいときは「元に戻す」を使います。取り消しすぎた場合は「やり直す」で戻せます。大きな変更の直後は、別の操作を重ねる前に表示を確認すると修正しやすくなります。
長文を編集するときは、本文を別の場所へ無計画にコピーして版が増えるより、WordPressのリビジョンやバックアップの運用を確認する方が管理しやすくなります。ただし、利用環境によって保存数やバックアップ方法が異なるため、自分のサイトの設定を確認してください。
短い練習記事を作って操作を覚える
次の流れで練習用の下書きを一つ作ると、基本操作をまとめて試せます。公開せず、下書きのまま練習してください。
- 新しい投稿を追加し、練習用と分かるタイトルを入力する
- 段落ブロックで二つの短い文章を書く
- 段落の間に見出しブロックを追加する
- 見出しの下に三項目のリストを追加する
- 権利を確認した画像を一枚挿入する
- 画像の代替テキストと必要な設定を確認する
- 関連ページを想定したリンクを設定する
- リストビューから見出しと本文の順番を確認する
- 下書きを保存し、表示確認を開く
練習ではデザインを完成させる必要はありません。ブロックを選択したときに、ツールバーと設定欄がどう変わるかを観察することが目的です。
操作でよく起きるトラブルと対処法
設定サイドバーが表示されない
上部の設定表示が閉じていないか確認します。表示しても目的の設定がない場合は、投稿全体ではなく対象ブロックを選択し、ブロック側の設定へ切り替えます。
追加したい場所にブロックが入らない
挿入位置が選べていない可能性があります。追加したい位置の前後にあるブロックを確認し、本文中の追加ボタンを使います。複雑な構造ではリストビューから位置を確認してください。
画像の上の文字ばかり選択される
画像と文字を含むブロックでは、内側の文字が選択されている場合があります。リストビューを開き、外側のブロックを選ぶと全体の設定へ移れます。
文字を貼り付けたら見た目が崩れた
文書作成ソフトやWebページからコピーした文字には、不要な書式が含まれることがあります。貼り付け後に見出し、太字、リンク、改行を確認します。必要に応じて書式を整え、サイト内で一貫した見た目にします。
ブロックが無効または壊れていると表示される
ブロックを提供していたテーマやプラグインが停止している、保存内容と現在の出力が合わないなどの可能性があります。すぐに復旧操作やHTML変換を進めず、先に下書きやバックアップを確保します。その後、変更前後のテーマ・プラグイン、更新履歴を確認してください。
更新したのに表示が変わらない
まず編集画面で保存が完了したか確認し、表示しているページが正しいかを確かめます。そのうえでキャッシュの影響を検討します。サイト側、サーバー側、閲覧ブラウザなど複数のキャッシュが関係することがあるため、むやみに設定を削除せず、利用中の仕組みを確認してから対処します。
使いたいブロックが見つからない
ブロック名の検索、カテゴリー一覧、設定の表示項目を確認します。テーマやプラグイン専用のブロックは、その機能が有効なサイトだけに表示されます。似た名前の追加機能をすぐ導入する前に、標準ブロックで目的を達成できないか検討しましょう。
読みやすさを保つ編集のコツ
ブロックエディターは自由に装飾できますが、使える機能をすべて使う必要はありません。読者が内容を理解しやすいことを優先します。
- 見出しで内容のまとまりを示す
- 段落を適度に分ける
- 強調色や太字を使いすぎない
- 画像は説明に役立つ場所へ置く
- 同じ役割の要素は同じ見た目にそろえる
- パソコンだけでなくスマートフォンでも確認する
編集画面で整って見えても、公開側ではテーマのスタイルが適用されます。特に横並び、表、大きな画像、長いボタン文言は画面幅によって見え方が変わるため、表示確認が重要です。
作業を速くするための基本操作
ブロックの扱いに慣れてきたら、同じ操作を何度もメニューから探すのではなく、検索やキーボード操作も取り入れます。ただし、最初からすべてのショートカットを暗記する必要はありません。自分が頻繁に行う操作から一つずつ覚えましょう。
ブロック名で検索する
ブロック挿入ツールを開いたら、一覧を毎回スクロールするより名前で検索した方が早く見つかります。正式な名称が分からない場合も、「画像」「表」「引用」のように目的に近い言葉を入力して候補を確認できます。
コマンドパレットを活用する
利用中のWordPressでコマンドパレットが表示される場合は、編集画面内の操作を検索して実行できます。目的の操作がメニューのどこにあるか分からないときに便利です。候補の内容を確認し、公開や削除など意図しない操作を選ばないよう注意します。
複数選択は範囲を確認してから使う
複数のブロックをまとめて選ぶと、移動やグループ化を一度に行えます。一方で、見出しだけを移動するつもりが本文まで含めてしまうことがあります。選択後は、リストビューや選択範囲を見て、対象が過不足なく含まれているか確認してください。
集中モードは表示が消えたときにも確認する
編集に集中するための表示モードを有効にすると、サイドバーやツールバーの一部が隠れることがあります。いつも見えていた操作が突然なくなったと感じたら、上部の追加メニューにある表示関連の設定を確認します。故障だと判断してブラウザやプラグインを変更する前に、編集画面のモードを確かめるのが先です。
アクセシビリティを意識したブロックの使い方
記事は、画面を目で見る人だけが読むとは限りません。音声読み上げ、キーボード操作、小さな画面など、さまざまな環境でも内容を理解できるようにすると、より多くの読者へ情報を届けられます。
見た目ではなく役割に合うブロックを選ぶ
章のタイトルは見出しブロック、列挙はリストブロック、引用は引用ブロックというように、内容の役割に合うブロックを使います。段落を大きくして見出しに見せたり、記号を手入力して箇条書きに見せたりすると、文書の構造が正しく伝わらない場合があります。
リンクの文字だけで移動先を分かるようにする
「こちら」だけをリンクにすると、リンク部分だけを拾い読みしたときに移動先が分かりません。「ブロックエディターの公式説明を確認する」のように、リンク先の内容が想像できる文字へ設定します。同じ文言のリンクが複数ある場合も、行き先を区別できるようにします。
色だけで意味を伝えない
注意事項を赤、完了を緑のように色だけで区別すると、色を判別しにくい読者へ意味が伝わらないことがあります。「注意」「完了」などの言葉も添え、色がなくても理解できるようにします。文字色と背景色の差が小さすぎないかも、公開側で確認してください。
ボタンやリンクを詰め込みすぎない
クリックできる要素が近すぎると、小さな画面で押し間違えやすくなります。複数のボタンを横並びにしたときは、スマートフォンで十分な間隔があるか、文言が途中で切れていないかを確認します。目的の違う案内を一か所へ集めすぎないことも大切です。
公開前に確認したい項目
操作に慣れるまでは、公開ボタンを押す前にチェック項目を順番に確認します。内容だけでなく、リンクや画像、記事設定も対象です。
- タイトルと本文の内容が一致している
- 見出しの順番が自然で、階層が飛んでいない
- 誤字、変換ミス、不要な仮文章が残っていない
- 画像が正しく表示され、必要な代替テキストがある
- リンク先が正しく、未公開ページへ誤って案内していない
- カテゴリーとアイキャッチ画像が適切である
- パソコンとスマートフォンで読みにくい箇所がない
- 公開状態と公開日時が意図どおりである
不安がある場合は、下書きのまま別の人に確認してもらう方法もあります。公開後に直せる項目でも、最初に確認する習慣を付けると誤公開やリンク間違いを減らせます。
ブロックエディターに関するよくある質問
HTMLやCSSを知らなくても使えますか
基本的な記事作成は、HTMLやCSSを書かなくても進められます。段落、見出し、画像、リストなどを選び、設定欄で調整できます。独自の細かなデザインが必要な場合はコードの知識が役立ちますが、初心者は標準機能で読みやすい記事を作ることから始めましょう。
クラシックエディターとどちらを使うべきですか
新しくWordPressを学ぶなら、まず標準のブロックエディターに慣れるのが自然です。既存サイトでは運用方法や使用中の機能によりクラシックエディターを使っている場合があります。既存記事を編集するときは、サイトの担当者や運用ルールを確認し、勝手に編集方式を切り替えないでください。
ブロックを増やすプラグインは必要ですか
最初から必須ではありません。標準ブロックだけでも一般的なブログ記事を作れます。追加ブロックは便利ですが、選択肢が増えて迷いやすくなり、更新や互換性の管理も必要です。標準機能で不足する目的が明確になってから検討しましょう。
記事のデザインがテーマによって違うのはなぜですか
ブロックの基本構造が同じでも、文字サイズ、余白、色、ボタンの形などはテーマのスタイルに影響されます。ほかのサイトの手順どおりに設定しても同じ見た目にならないことがあります。自分のサイトで表示確認を行い、テーマの設定範囲で整えます。
編集画面と公開画面の見た目が違う場合はどうしますか
まず表示確認で公開側の見え方を基準に判断します。大きく崩れている場合は、追加CSSを急いで書く前に、ブロックの入れ子、配置、幅、テーマやプラグインの影響を確認します。原因が分からない状態で複数の設定を同時に変えると切り分けが難しくなります。
基本ブロックから少しずつ覚えよう
ブロックエディターは、文章や画像を独立した部品として扱う編集画面です。最初は機能が多く見えますが、段落、見出し、リスト、画像を追加し、選択したブロックを設定する流れが分かれば記事を作れます。
まず短い下書きで、追加、選択、移動、削除、表示確認を一通り試してください。慣れてからボタン、グループ、パターンなどを加えると、必要な機能だけを無理なく覚えられます。装飾を増やすことより、見出し構成と読みやすさを優先するのが、長く使える記事作成の基本です。
参考：WordPress Block Editor（WordPress.org）、Work with blocks（WordPress.org）、Blocks list（WordPress.org）
