WordPressブロックエディタの使い方！基礎操作から効率化の方法も解説

「WordPress（ワードプレス）ブロックエディタの使い方がわからない」「クラシックエディタとの違いが難しい」「記事作成を効率化したい」と悩む方もいるでしょう。

ブロックエディタは基本操作と便利機能を理解すると、初心者でも直感的に記事を作成できます。見出しや画像、表などをブロック単位で管理できるため、完成イメージを確認しながら効率的に編集できる点も魅力です。

本記事では、WordPressブロックエディタの画面構成や基本的な使い方、記事公開までの流れ、作業効率を高める便利機能まで解説します。

本記事を参考にブロックエディタの使い方を理解し、読みやすい記事作成へ活用してください。

WordPressのブロックエディタとは？

WordPressのブロックエディタ（Gutenberg）は、ブロック単位で直感的に編集できる点が特徴です。本章では、ブロックエディタの概要について解説します。

• ブロックエディタの主な仕様と特徴
• クラシックエディタとの違いや注意点

ブロックエディタの特徴を理解するため、詳しく見ていきましょう。

ブロックエディタの主な仕様と特徴

WordPressのブロックエディタは、文章や画像を部品ごとに管理できる構造で、初心者でも操作しやすい仕様が数多く用意されています。

ブロックエディタの主な特徴は、以下のとおりです。

• 文章や画像をブロック単位で追加・編集できる
• ドラッグ操作でレイアウトを調整しやすい
• ボタンや表なども簡単に挿入できる
• デザイン済みパターンを利用して効率化できる

従来のように複雑なコードを入力する場面が少なく、視覚的な操作だけでページを作成しやすい点も魅力です。記事作成だけでなく、固定ページのレイアウト調整も直感的に行えるため、作業効率向上につながります。

クラシックエディタとの違いや注意点

WordPressブロックエディタは、クラシックエディタと比べると編集画面の考え方や操作方法が異なります。

クラシックエディタでは、文章全体を一つの入力欄で編集する形式が一般的でした。一方、ブロックエディタは要素ごとに管理する仕組みとなっており、完成イメージを確認しながら編集できます。

ただし、クラシックエディタからブロックエディタへ移行する際は、以下の点に注意が必要です。

• 表示崩れが発生する場合がある
• 一部プラグインが正常動作しないケースがある
• ショートコードを利用している記事は表示確認が必要になる
• 改行位置や余白表示が変わる場合がある

移行前には、テスト環境で表示確認を行うと安心です。

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

WordPressブロックエディタを活用するには、画面構成の理解が欠かせません。

本章では、編集画面で役割が異なる主要エリアについて解説します。

• 画面上部「ヘッダーツールバー」
• 画面右側「設定サイドバー」
• 画面中央「メインエリア」

各エリアでできる操作や役割について確認していきましょう。

画面上部「ヘッダーツールバー」

ヘッダーツールバーは、記事編集で頻繁に使う操作をまとめた管理エリアです。

WordPressブロックエディタでは、画面上部へ主要機能が集約されています。ブロック追加や下書き保存、編集内容を元に戻す操作も行える、作業効率に影響する重要なエリアといえます。

ブロックエディタの主なボタンの役割は、以下のとおりです。

各ボタンの役割を把握しておくと、編集ミスを減らしながら効率的に記事作成を進められます。

画面右側「設定サイドバー」

設定サイドバーは、記事全体や各ブロックの詳細設定を行う管理エリアです。

WordPressブロックエディタでは、画面右側からカテゴリー設定や装飾変更を行えます。文字サイズや色変更だけでなく、アイキャッチ画像やタグ設定にも対応しているため、記事品質に関わる重要な機能です。

設定サイドバーの「投稿」の主な項目と役割は、以下のとおりです。

また、設定サイドバーの「ブロック」の主な項目と役割は、以下のとおりです。

各項目を活用すると、見やすさを保ちながら記事デザインを調整しやすくなります。

画面中央「メインエリア」

メインエリアは、実際に記事内容を入力しながらページを作成する編集スペースです。

WordPressブロックエディタでは、見出し・文章・画像などをメインエリアへ追加しながら記事を作成します。ブロックを積み上げる形式のため、完成イメージを確認しながら編集を進めやすい点が特徴です。

Enterキーで新しいブロックを追加できるため、直感的に記事構成を組み立てられます。

WordPressブロックエディタの基本的な使い方

WordPressブロックエディタは、基本操作を覚えるだけで記事作成効率が向上します。本章では、記事編集で使用頻度の高いブロックの基本操作について解説します。

• ブロックを追加する
• ブロックを削除する
• ブロックを移動する
• ブロックタイプを変換する
• ブロックを複製する
• ブロックをパターン化する

効率的に記事作成を進める方法を確認していきましょう。

ブロックを追加する

「＋」ボタンを押すと、見出しや画像などの新しいブロックを追加できます。

検索欄へブロック名を入力すると、目的の機能を素早く追加可能です。

ブロックを削除する

ブロックメニューから「削除」を選択すると、不要なブロックを消去できます。

削除したいブロックのツールバー右端の「︙」の中に、「削除」の選択肢があります。

ブロックを移動する

移動したいブロックの上下矢印またはドラッグ操作で配置を変更できます。

上下矢印を押すと、ブロックを一つ上下へ移動できます。点が並んだ移動アイコンをドラッグすれば、任意の位置へ並び替え可能です。

ブロックタイプを変換する

変換アイコンから別の形式へ切り替えできます。

左側の変換アイコンを押すと、変更可能な形式一覧が表示されます。段落を見出しやリスト形式へ変更したい場合に便利な機能です。

ブロックを複製する

ブロックの「︙」メニューから「複製」を押すと同じ内容のブロックを作成できます。

見出し装飾やボタン配置を繰り返し使いたい場合に便利な機能です。

ブロックをパターン化する

ブロックを選択し、「︙」メニューから「パターンを作成」を押すと装飾や文章をテンプレートとして登録できます。

WordPressブロックエディタでは、パターン登録した内容を別の記事でも呼び出せます。同じ見出し装飾や定型文を繰り返し使いたい場合に便利な機能です。

WordPressブロックエディタで記事公開するまでの手順

WordPressブロックエディタは、以下の手順で記事公開まで進められます。

• 手順1：記事のタイトルを入力する
• 手順2：「見出し」ブロックで記事の構成を作る
• 手順3：「段落」ブロックで本文を執筆する
• 手順4：「リスト」ブロックで要点を箇条書きに整理する
• 手順5：「テーブル」ブロックで表を作成し情報を比較する
• 手順6：「画像」ブロックで視覚的に伝わる記事にする
• 手順7：パーマリンクやアイキャッチなどの投稿設定をする
• 手順8：実際の表示を「プレビュー」確認して「公開」する

本章では、記事公開までの具体的な手順について解説します。

関連記事

WordPressの使い方を徹底解説！初心者向けの始め方と操作の基本

WordPressを初めて開くと、なにから触ればいいのか分からず戸惑う方が多いものです。画面に見慣れない言葉が並び「自分に扱えるのだろうか」と不安を感じることもあるのではないでしょうか。ですが、WordPressは順番に覚えていけ[…]

手順1：記事のタイトルを入力する

画面上部の「タイトルを追加」欄へ入力し、記事タイトルを設定しましょう。

入力した内容は検索結果や記事一覧にも表示されるため、内容が伝わるタイトル設定が重要です。検索されやすいキーワードを前半へ入れると、記事テーマを伝えやすくなります。

一方、タイトル文字数が長すぎると検索結果で途中表示になる場合もあるため、簡潔にまとめることも大切です。

手順2：「見出し」ブロックで記事の構成を作る

「見出し」ブロックを追加し、h2やh3を設定して記事構成を整理しましょう。

WordPressブロックエディタでは、本文を書く前に見出し構成を作成すると、記事全体を整理しやすくなります。h2は大項目、h3は詳細内容というように役割を分けると、論理的な構成を作成可能です。

また、見出し内容へ検索キーワードを含めると、記事テーマも伝わりやすくなります。

関連記事

WordPressの記事の書き方を完全網羅！初心者でも迷わない投稿手順と読まれるコツ

「WordPress（ワードプレス）でブログを書きたいけれど、記事作成の手順がわからない」「投稿画面の使い方や公開前の設定が不安」と感じる方もいるでしょう。WordPressは機能が多いため、基本構造や記事作成の流れを理解せずに進めると、[…]

手順3：「段落」ブロックで本文を執筆する

「段落」ブロックへ文章を入力し、本文を執筆しましょう。

WordPressブロックエディタでは、見出しごとに本文を入力しながら記事を作成します。Enterキーを押すと以下のように新しい段落ブロックが追加されるため、文章を区切りながら読みやすく整理が可能です。

また、改行を詰め込みすぎると読みにくくなるため、内容ごとに段落を分けることも重要です。必要に応じて画像やリストへ切り替えると、より見やすくなります。

手順4：「リスト」ブロックで要点を箇条書きに整理する

「リスト」ブロックを追加し、要点を箇条書きで整理しましょう。

WordPressブロックエディタでは、以下のように箇条書きや番号付きリストを使い分けながら情報を整理可能です。項目を並べるだけで内容を視覚的に把握できるため、長文記事でも情報を分かりやすく整理できます。

順番説明には番号付きリスト、特徴整理には箇条書きを使うと、内容が伝わりやすくなります。情報量が多い場面では、積極的に活用したい機能です。

手順5：「テーブル」ブロックで表を作成し情報を比較する

「テーブル」ブロックを追加し、比較情報を表形式で整理しましょう。

WordPressブロックエディタでは、以下のように行数と列数を指定するだけで表を作成できます。

テーブルは、文字では伝わりにくい料金比較や機能一覧などを、分かりやすくまとめたい場合に便利です。また、項目名を1行目に入力すると、内容を把握しやすくなります。

関連記事

WordPressで表を作る方法！テーブルブロックとプラグインの選び方を解説

「WordPressに表を作りたいのに、スマホで横に崩れてしまった…」「セル結合ができなくてプラグインを探しているけど、どれを選べばいいかわからない」。そんな悩みを持つ方は多いのではないでしょうか。WordPressにはブロックエ[…]

手順6：「画像」ブロックで視覚的に伝わる記事にする

「画像」ブロックを追加し、記事内へ画像を挿入しましょう。

WordPressブロックエディタでは、以下のようにパソコン内の画像をアップロードして記事に配置できます。

画像を加えると文章だけでは伝わりにくい内容を補足でき、読者も記事内容を理解しやすくなります。

また、「alt属性」と呼ばれる画像説明欄へ内容を入力すると、検索エンジンへ内容を伝えられます。画像検索からの流入も期待できるため、画像を配置する際に設定しておきたい項目です。

手順7：パーマリンクやアイキャッチなどの投稿設定をする

設定サイドバーから、パーマリンクやアイキャッチ画像などの投稿設定を行いましょう。

WordPressブロックエディタでは、公開前にURLやカテゴリー情報を整える必要があります。パーマリンクは、記事内容が分かる短い英単語で設定するのがおすすめです。

また、アイキャッチ画像を設定すると、記事一覧やSNS共有時に視認性が向上します。加えて、適切なカテゴリー分類は、読者の利便性と検索エンジンからの評価を高めます。

関連記事

WordPressのパーマリンクのおすすめ設定は？種類と変更リスクも解説

WordPressのパーマリンク設定で、失敗しないか不安に感じている方は多いのではないでしょうか。WordPressのパーマリンクには6つの種類がありますが、おすすめなのは投稿名（英語表示）です。本記事では、パーマリンクの種類や設[…]

関連記事

WordPressのアイキャッチ画像とは？作り方からサイズ設定も解説

「WordPress（ワードプレス）でアイキャッチ画像とは何かわからない」「ブログやホームページで設定する意味があるのか迷う」と悩む方も多いでしょう。記事作成に慣れていない場合、画像の役割や適切な設定方法がわかりにくいのは自然なこ[…]

手順8：実際の表示を「プレビュー」確認し「公開」する

「プレビュー」で表示確認を行い、問題がなければ「公開」を押しましょう。

公開前には、プレビューで実際の表示を確認することが重要です。改行崩れや画像サイズの乱れがないかをチェックすると、公開後の修正が減ります。また、スマホ表示ではレイアウトが変わる場合もあるため、あわせて確認が必要です。

プレビューで問題がなければ「公開」を押し、記事を公開しましょう。

作業効率アップ！WordPressブロックエディタの便利機能と使い方

WordPressブロックエディタの便利機能を活用すると、効率的に記事が作成できます。本章では、執筆速度や編集効率を高める便利機能について解説します。

• スラッシュコマンドでブロックを追加する
• ショートカットキーを活用する
• 集中モードと全画面表示で執筆作業に没頭する
• 複数ブロックをグループ化してまとめて設定する

作業時間を短縮しながら、快適に記事作成を進める方法を確認していきましょう。

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

「/」を使用したスラッシュコマンドからは、ブロックの追加が可能です。

WordPressブロックエディタでは、「＋」ボタンを押さなくても「/」でブロックを呼び出せます。文章入力欄に「/」を入力し、続けてブロック名を入力すると候補一覧が表示されます。

よく使うブロックのスラッシュコマンドは、以下のとおりです。

マウス操作を減らせるため、長文記事を執筆する際に便利です。

ショートカットキーを活用する

ショートカットキーを活用すると、キーボード操作だけで記事が編集できます。

WordPressブロックエディタでは、特定の文字を入力すると、自動的にブロック形式へ変換されます。マウス操作を減らせるため、作業効率を高められます。

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

頻繁に使うショートカットを覚えておくと、よりスムーズな記事作成が可能です。

集中モードと全画面表示で執筆作業に没頭する

集中モードや全画面表示を有効化すると、執筆作業へ集中しやすくなります。

集中モード・全画面表示の役割は、以下のとおりです。

WordPressブロックエディタでは、不要なメニューやサイドバーを非表示にできます。画面内の情報量を減らせるため、集中して執筆に打ち込めます。

集中モードや全画面表示は、画面右上の「︙」メニューから変更可能です。執筆環境を整理すると、不要な画面移動や誤操作が減らせるため、状況に応じて活用しましょう。

複数ブロックをグループ化してまとめて設定する

複数ブロックを選択し、「グループ化」を押すと一括管理できます。

WordPressブロックエディタでは、見出し・文章・画像などを一つのまとまりとして扱えます。複数ブロックを個別に移動したり、装飾したりする手間が省ける点がメリットです。

グループ化の方法は、複数ブロックをまとめて選択した後、「︙」メニューから「グループ化」を選択すると設定できます。背景色や余白をまとめて変更できるため、関連情報を統一デザインで整理したい場面にも便利です。

記事を魅力的に！WordPressブロックエディタのおすすめ機能と使い方

WordPressブロックエディタは、便利機能を活用すると視覚的に伝わる記事を作成できます。本章では、記事デザインを強化できるおすすめ機能を解説します。

• 「カラム」で画像とテキストを横並びに配置
• 「ギャラリー」で複数の写真を美しく並べる
• 「引用」で外部サイトの文章を紹介する
• 「埋め込み」でYouTubeやSNSを挿入する

各ブロックの使い方を理解し、読みやすく魅力的な記事へ仕上げましょう。

「カラム」で画像とテキストを横並びに配置

「カラム」を使うと、画像と文章を横並びで配置できます。

画面を2分割・3分割したレイアウトが簡単に作成可能で、商品説明や手順説明する際に便利です。情報を整理しながら、視覚的にも分かりやすく伝えられます。

「カラム」を利用する手順は、以下のとおりです。

1.「＋」ボタンから「カラム」を追加

2.表示したいレイアウトを選択

3.各カラムへ画像や文章を入力

パソコンでは横並び表示となり、スマホでは縦並びへ自動調整されるため、表示崩れも起こりにくくなっています。

「ギャラリー」で複数の写真を美しく並べる

「ギャラリー」を使うと、複数画像の一覧表示が可能です。

WordPressブロックエディタでは、画像をタイル状に並べて表示できます。商品紹介や施工事例などを掲載する際に活用すると、視覚的に内容を伝えられます。

「ギャラリー」を利用する手順は、以下のとおりです。

1.「＋」ボタンから「ギャラリー」を追加

2.表示したい画像を複数選択して挿入

3.設定サイドバーの「ブロック」から列数や間隔を調整

以上の手順で画像を整理して並べると、記事全体の視認性も高めやすくなります。

「引用」で外部サイトの文章を紹介する

「引用」ブロックを使うと、外部サイトの文章を区別しながら掲載可能です。

WordPressブロックエディタでは、通常文章と引用文を分けて表示できます。引用元を明記することで、著作権に配慮しながら引用部分も読者へわかりやすく伝えられます。

「引用」を利用する手順は、以下のとおりです。

1.「＋」ボタンから「引用」ブロックを追加

2.引用したい文章を入力し、引用元サイト名やURLを記載

引用文は必要最小限にとどめ、自分の解説を中心に構成することが重要です。

「埋め込み」でYouTubeやSNSを挿入する

「埋め込み」ブロックを使うと、YouTubeやSNSを記事内に表示できます。

方法は、動画やSNS投稿のURLを貼り付けるだけです。外部コンテンツを視覚的に掲載できるため、文章だけでは伝わりにくい情報を補足できます。

「埋め込み」を利用する手順は、以下のとおりです。

1.「＋」ボタンから「埋め込み」ブロックを追加

2.YouTubeやSNSのURLを入力して「埋め込む」を押す

対応サービスであれば、自動的に動画や投稿が表示されるため、専門知識がなくても簡単に設定できます。

WordPressブロックエディタでアフィリエイト広告を貼る方法

WordPressブロックエディタの機能を活用すると、アフィリエイト広告も簡単に設置できます。本章では、広告タグの貼り付け方法やリンク作成手順について解説します。

• カスタムHTMLブロックで広告タグを挿入する
• ボタンブロックでリンクを作る
• 広告リンクの動作をプレビュー画面で最終確認する

クリック導線を整えながら、見やすく広告を配置する方法を確認していきましょう。

カスタムHTMLブロックで広告タグを挿入する

「カスタムHTML」を使うと、ASPで取得した広告タグを記事内に直接貼り付けできます。

通常の段落ブロックへ貼ると広告が表示されない場合があるため、必ず専用ブロックを使用しましょう。

「カスタムHTML」を利用する手順は、以下のとおりです。

1.「＋」ボタンから「カスタムHTML」ブロックを追加

2.ASPで取得した広告タグを貼り付け

この後に、プレビューで広告が表示されているか確認します。広告タグを一部削除すると正常表示されない場合もあるため、コードは変更せず貼り付けましょう。

ボタンブロックでリンクを作る

「ボタン」を使うと、アフィリエイトリンクを目立たせながら設置できます。

ボタンは通常のテキストリンクよりも視認性が高いため、読者をスムーズにリンク先へ誘導可能です。

「ボタン」を利用する手順は、以下のとおりです。

1.「＋」ボタンから「ボタン」ブロックを追加

2.ボタンへ表示する文章を入力し、リンク設定から広告URLを貼り付け

3.背景色や文字色を調整

「公式サイトはこちら」など行動を促す文章を設定すると、よりクリック率が向上します。

広告リンクの動作をプレビュー画面で最終確認する

広告リンク設置後は、公開前にプレビュー画面で必ず動作確認を行いましょう。

WordPressブロックエディタでは、編集画面上で広告が正常表示されないケースがあります。広告タグの貼り付けミスやリンク切れに気付かず公開すると、収益機会損失につながります。

特にアフィリエイト広告は、画像崩れやボタンサイズの乱れが発生する場合もあるので、パソコン・スマホの両方でプレビュー確認が欠かせません。

また、実際にリンクを押して正しいページへ移動するか確認し、広告URLの設定ミスを防ぎましょう。

WordPressブロックエディタの使い方でよくある質問

WordPressブロックエディタの使い方で、よくある質問について回答します。

• ブロックエディタはカスタマイズできる？
• ブロックエディタが表示されない場合の対処法は？
• 固定ページと投稿ページでブロックエディタの使い方は違う？

疑問点は早めに解決しておきましょう。

ブロックエディタはカスタマイズできる？

WordPressブロックエディタは、テーマやプラグインで機能を拡張できます。

標準機能だけでも記事作成は可能ですが、カスタマイズするとデザイン性や操作性を強化できます。吹き出しや装飾ボックスなどを追加できるテーマやプラグインを活用して、より読みやすく洗練された記事を作成しましょう。

WordPressの代表的なカスタマイズ例は、以下のとおりです。

用途に合った機能を追加すると、WordPressブロックエディタをさらに使いやすく調整できます。

ブロックエディタが表示されない場合の対処法は？

WordPressブロックエディタが表示されない場合、設定やプラグイン競合の確認が必要です。

WordPressでは、旧エディタ用プラグインやテーマ設定が原因でブロックエディタが開かない場合があります。更新不具合やブラウザ拡張機能の影響で、編集画面が正常表示されないケースも少なくありません。

ブロックエディタが表示されない場合の主な原因と対処法は、以下のとおりです。

WordPressブロックエディタが表示されない場合でも、原因を順番に確認すると解決に近づきます。

固定ページと投稿ページでブロックエディタの使い方は違う？

基本的に、固定ページと投稿ページで操作に違いはありません。

見出しや画像、表などの追加方法も共通しているため、一度操作を覚えると両方のページ作成に活用できます。

ただし、固定ページと投稿ページでは用途が異なる点に注意が必要です。固定ページは会社概要やお問い合わせなど更新頻度が低いページ向けであり、投稿ページはブログ記事のように定期更新する用途で利用されます。

固定ページと投稿ページを用途に応じて使い分けると、WordPressサイト全体を整理しやすくなります。

まとめ

WordPressブロックエディタは、見出しや画像、表などをブロック単位で管理できる編集機能です。

初心者でも直感的に記事が作成できる操作性が魅力で、カラムやギャラリー、スマッシュコマンド、アフィリエイト広告の設置などの、便利機能も充実しています。

一方、ブロックエディタが表示されない場合は、プラグイン競合や設定不具合が原因となるケースもあるため、原因を順番に確認することが重要です。

本記事を参考に、WordPressブロックエディタの使い方を理解し、読みやすく魅力的な記事を作成してください。

なお、WordPressブロックエディタを利用するなら、ロリポップ！レンタルサーバーが便利です。レンタルサーバー契約と共にWordPressを簡単に使い始められるため、これからWebサイト構築を検討している方は、ロリポップ！レンタルサーバーを検討してみましょう。