初心者編|無料コーディング教材|HTML・CSS・jQueryを実践で学ぶ

WordPressエディターの使い方|ブロック追加・設定・公開まで初心者向けに解説

WordPressブロックエディターで見出し・段落・画像を配置するイメージ

WordPressで記事を書こうとしても、「プラスボタンがいくつもある」「右側の投稿とブロックは何が違うの?」と迷うことがありますよね。

現在のWordPressでは、投稿や固定ページの本文を「ブロックエディター」で編集するのが基本です。段落、見出し、画像などを一つずつブロックとして追加し、並べ替えながらページを作ります。

この記事では、エディターの種類、画面の見方、ブロックの追加・移動・削除、投稿設定、プレビューから公開までを、実際の管理画面を使って初心者向けに説明します。

WordPressエディターは編集する場所で使い分ける

WordPressで「エディター」と呼ばれる画面は一つではありません。まず、次の3つの違いを確認しておくと迷いにくくなります。

ブロックエディター・サイトエディター・クラシックエディターの用途を比較した図
WordPressのエディターは編集対象に合わせて使い分けます

ブロックエディター

投稿や固定ページのタイトル・本文を編集する画面です。「投稿」→「新規追加」または「固定ページ」→「新規追加」から開きます。

Gutenberg(グーテンベルク)と呼ばれることもあります。WordPressの標準エディターとして、文章、画像、表、カラムなどをブロック単位で扱います。

サイトエディター

ヘッダー、フッター、テンプレート、サイト全体の色や文字などを編集する画面です。ブロックテーマを有効にしている場合に、「外観」→「エディター」から利用できます。

記事の本文だけを直したいときは、サイトエディターではなくブロックエディターを開きます。見た目が似ていても、変更の影響範囲が異なるので注意してください。

クラシックエディター

以前のWordPressで使われていた、文書作成ソフトに近い編集画面です。古い記事やプラグインとの互換性が必要な場合は、公式のClassic Editorプラグインで利用できます。

新しく始める場合は、まずブロックエディターを覚えるのがおすすめです。クラシックエディターへ切り替えるのは、現在のテーマやプラグインが必要としている場合に限りましょう。

ブロックエディターを開く

  1. WordPress管理画面へログインする
  2. 新しい記事なら「投稿」→「新規追加」を開く
  3. 固定ページなら「固定ページ」→「新規追加」を開く
  4. 既存の内容を直す場合は一覧からタイトルを選ぶ

投稿は、お知らせやブログ記事のように継続して増える内容に向いています。固定ページは、会社概要や問い合わせなど、独立したページに向いています。

ブロックエディターの画面構成

次の画面では、中央に本文、上部に操作ボタン、右側に設定サイドバーがあります。どこを選択しているかによって、右側に表示される設定が変わります。

WordPressブロックエディターの本文エリア・ツールバー・設定サイドバー
見出しと段落を入力したブロックエディターの画面

中央:タイトルと本文

上の大きな入力欄がタイトル、その下が本文です。本文の空いている場所を選ぶと、基本となる段落ブロックへ文章を入力できます。

上部:追加・取り消し・一覧・保存

  • プラス:段落、見出し、画像などのブロックを追加する
  • 戻る・進む:直前の操作を取り消す、またはやり直す
  • ドキュメント概観:ブロックの構造と見出しの順序を確認する
  • 下書き保存:公開せずに編集内容を保存する
  • プレビュー:公開ページでの見え方を確認する
  • 公開:記事をWeb上で見られる状態にする

右側:投稿設定とブロック設定

「投稿」タブは記事全体、「ブロック」タブは選択中の一つのブロックを設定します。右上の設定ボタンで、サイドバーの表示・非表示を切り替えられます。

ブロックを追加する方法

ブロックを追加する方法は複数あります。初心者は、画面左上のプラスボタンから選ぶ方法を覚えると分かりやすいでしょう。

  1. 左上のプラスボタンを押す
  2. 検索欄へ「見出し」「画像」などを入力する
  3. 使いたいブロックを選ぶ
  4. 本文へ追加されたブロックに内容を入力する
WordPressブロックインサーターで段落・見出し・画像などを選ぶ画面
左上のプラスボタンから追加するブロックを選びます

ブロックインサーターには「ブロック」「パターン」「メディア」のタブがあります。ブロックは一つの要素、パターンは複数ブロックを組み合わせたレイアウト、メディアは画像などの素材です。

本文の空行で半角の/を入力し、続けてブロック名を入力する方法もあります。たとえば「/画像」と入力すると、画像ブロックをすばやく探せます。

最初に覚えたい基本ブロック

ブロック使う場面注意点
段落通常の文章長文を一つに詰めず、話題ごとに分ける
見出し記事の章や節H2の下にH3を置くように順序を保つ
画像写真、画面、図解代替テキストを設定し、サイズを大きくしすぎない
リスト手順や項目の列挙順序がある場合は番号付きリストを使う
引用出典のある文章出典を示し、長い転載を避ける
ボタン問い合わせや次のページへの案内リンク先が分かる文言にする
カラム横並びレイアウトスマートフォンでの並びと読みやすさを確認する

利用できるブロックは、WordPress本体だけでなく、テーマやプラグインによっても増減します。見慣れないブロックを使う前に、どのテーマ・プラグインが追加したものか確認してください。

ブロックを編集・移動・複製・削除する

内容や見た目を変更する

変更したいブロックを選ぶと、すぐ上にツールバーが表示されます。文字の配置、太字、リンクなど、よく使う操作はツールバーから変更できます。

色、文字サイズ、余白などの詳しい項目は、右側の「ブロック」タブに表示されます。設定項目はブロックとテーマによって異なります。

上下へ移動する

ブロックツールバーの上下矢印、またはドラッグ操作で位置を変更できます。複雑なレイアウトでは、次に説明するリストビューから移動すると選択しやすくなります。

複製・削除する

ブロックツールバーの三点メニューを開き、「複製」または「削除」を選びます。誤って削除した場合は、上部の「戻る」ボタンで直前の操作を取り消せます。

リストビューでブロック構造を確認する

ブロックが増えて目的の場所を選びにくくなったら、上部の「ドキュメント概観」を開きます。「リストビュー」には、ページ内のブロックが上から順に表示されます。

WordPressブロックエディターでページ内のブロック構造を確認するリストビュー
リストビューから目的のブロックを選択できます

グループやカラムの中に入ったブロックも階層で確認できます。目的のブロック名を選ぶと本文の該当位置へ移動でき、ドラッグによる並べ替えも可能です。

「アウトライン」では文字数や見出し構造を確認できます。見出しレベルがH2からH4へ飛んでいないか、同じ見出しが続いていないかを公開前に確認しましょう。

投稿設定とブロック設定の違い

右側の「投稿」タブでは、記事全体の公開状態や分類を設定します。次の画面では、ステータス、公開日時、スラッグ、投稿者、カテゴリー、タグなどを確認できます。

WordPressエディターで公開状態・スラッグ・投稿者・カテゴリーを確認する画面
投稿タブでは記事全体の公開設定を管理します
  • ステータス:下書き、公開、予約などの状態
  • 公開:すぐ公開するか、日時を指定するか
  • スラッグ:URLの末尾に使われる文字列
  • アイキャッチ画像:記事一覧やSNS共有などで使われる代表画像
  • カテゴリー:記事を大きなテーマで整理する
  • タグ:記事を横断する細かな話題で整理する

一方の「ブロック」タブは、現在選んでいる段落や画像など一つの要素だけに影響します。記事全体の設定が見つからないときは「投稿」、文字色や画像サイズが見つからないときは対象ブロックを選んで「ブロック」を確認してください。

下書き・プレビュー・公開の手順

  1. タイトルと本文を入力する
  2. カテゴリー、スラッグ、アイキャッチ画像を確認する
  3. 「下書き保存」を押す
  4. 「プレビュー」でPC・タブレット・スマートフォンの見え方を確認する
  5. 誤字、リンク、画像、見出し構造を確認する
  6. 問題がなければ「公開」を押す
  7. 公開ページを別タブで開き、実際の表示と操作を確認する

エディター内の表示と公開ページは、テーマのCSSによって見え方が異なる場合があります。エディターだけで判断せず、最後は公開側のプレビューで確認してください。

公開前に確認したい表示とアクセシビリティ

  • スマートフォンで横方向にはみ出していないか
  • 見出しがH2→H3のように自然な順序になっているか
  • 画像に内容を表す代替テキストがあるか
  • リンク文だけで移動先が分かるか
  • 文字色と背景色の差が小さすぎないか
  • ボタンやリンクが指で押しやすい大きさか
  • 表は狭い画面で横スクロールできるか

色だけで意味を伝えると、色の違いを判断しにくい読者へ情報が伝わりません。アイコン、ラベル、文章も組み合わせて状態を示しましょう。

ブロックエディターでよくある問題

右側の設定が表示されない

右上の設定ボタンを押して、サイドバーを開きます。選択中のブロックの設定を探している場合は「ブロック」、記事全体の設定なら「投稿」を選んでください。

追加したいブロックが見つからない

ブロックインサーターの検索欄へ名前を入力します。テーマやプラグインの説明で見たブロックが出ない場合は、その機能が有効になっているか確認してください。

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

保存されたHTMLと、現在のブロックが想定する内容が一致していない状態です。すぐに「HTMLに変換」せず、まずバックアップを取り、「ブロックの復旧を試行」やプレビューで内容を確認します。

公開ページでレイアウトが違う

テーマのスタイル、キャッシュ、画面幅の影響が考えられます。プレビューを更新し、キャッシュを削除してから、PCとスマートフォンの両方で確認してください。

クラシックエディターへ戻したい

古い編集画面が必要な場合は、公式のClassic Editorプラグインを検討できます。テーマや他のプラグインとの互換性を確認し、バックアップ後に試してください。

WordPressエディターについてよくある質問

Gutenbergとブロックエディターは別物ですか?

記事編集の文脈では、Gutenbergとブロックエディターは同じ意味で使われることが多い言葉です。Gutenbergは、ブロックを使う編集体験を開発するプロジェクト名でもあります。

投稿と固定ページで操作は違いますか?

本文ブロックの操作はほぼ同じです。投稿にはカテゴリーやタグがあり、固定ページには親ページやテンプレートなど、用途に合わせた設定が表示されます。

エディターの画面が記事の画像と違います

WordPress、テーマ、プラグインの構成によって、ボタンや設定項目が変わります。まず「投稿」か「サイトエディター」かを確認し、右上の設定ボタンと三点メニューも開いてみてください。

詳しい公式操作は、WordPress Block EditorWork with blocksList viewでも確認できます。

WordPressでできることも確認したい場合

記事編集以外に、テーマ、プラグイン、ユーザー管理で何ができるかは、次の記事でまとめています。

まとめ

WordPressのブロックエディターでは、段落、見出し、画像などをブロックとして追加し、並べ替えながら記事や固定ページを作れます。まずは本文エリア、ブロックインサーター、設定サイドバーの3か所を覚えましょう。

編集が終わったら、下書き保存、プレビュー、PC・スマートフォンの表示確認を行ってから公開します。ブロックが増えたときはリストビューを使うと、構造を見失わずに編集できます。