WordPressの編集画面は、2018年12月以降「ブロックエディター（Gutenberg）」という新しい形式が標準となりました。それまでの「クラシックエディター」とは操作方法も見た目も大きく異なっているため、初めて触れる方はもちろん、以前から使っていた方でも戸惑うことが少なくありません。
しかし、ブロックエディターは一見複雑そうに見えて、実は「誰でも見た目どおりにページを作れる」ように設計された、初心者にこそやさしいツールです。
この記事ではWordPress初心者の方や、「編集画面の使い方がわからないから先に進めない…」という方向けに
- ブロックエディターとは何か（専門用語なしで解説）
- 従来のクラシックエディターとの違い
- 初心者でもすぐに使える基本操作
- 実際の編集画面の見方・使い方
を丁寧にわかりやすく解説していきます。
目次
OUTLINE
ブロックエディター（Gutenberg）とは？【超基礎知識】
「ブロックエディター」はWordPressに標準で搭載されているとても便利な編集ツールです。
ここでは、ブロックエディターの基本的な考え方や、従来のエディターとの違い、実際の使い方のイメージを簡単に説明していきます。
ブロックエディターとは？
WordPressのブロックエディターとは「積み木のようにパーツ（＝ブロック）を組み合わせて、ページを作っていく編集機能」です。
ブロックエディター以前のWordPressでは、文章や画像などのコンテンツを1つのエリアにまとめて書き込むスタイルでしたが、ブロックエディターでは「段落」「見出し」「画像」「ボタン」など、それぞれの要素が「ブロック」として独立しています。
そのため、HTMLやCSSの知識がなくても、視覚的にページを組み立てることができるのが最大の特長です。
ブロックエディターは、2018年12月にリリースされたWordPress 5.0から標準搭載されており、今後のWordPressの主流になる編集方法です。
なぜブロックエディターが生まれたのか？
従来のクラシックエディターは、テキスト中心でのコンテンツ作成には適していましたが、見た目の自由度が低く、デザインに凝りたい場合はHTMLやCSSの知識が必要でした。
しかし、今やWebサイトはただテキストを並べるだけでなく、写真・動画・ボタン・表・アイコンなどを使って、視覚的に訴えることが求められています。
そこで誕生したのがブロックエディターです。
ブロックエディターなら、パーツ（ブロック）を選んで並べるだけで、簡単に見た目の整ったページが作れるようになりました。さらに、スマホやタブレットでの表示も自動で最適化されるので、モバイル対応の心配も軽減されます。
ブロックって具体的に何？
「ブロック」とは、ページを構成する各パーツのことです。以下は代表的なブロックの例です。
- 段落ブロック：文章を書く
- 見出しブロック：タイトルを付ける
- 画像ブロック：写真や画像を表示
- リストブロック：箇条書きをつくる
- ボタンブロック：リンク付きのボタンを設置
それぞれのブロックは、自由に追加・削除・並べ替えができます。
また、後ほど詳しく解説しますが、すべてのブロックには「設定パネル」があり、文字サイズ・色・配置などがブロック単位で調整可能です。
クラシックエディターとの違いは？
ここでは、従来の「クラシックエディター」との編集画面の見た目や操作方法の違いを整理して、初心者にとってどちらが使いやすいか、導入前に知っておきたいポイントなど、ブロックエディターのメリット・特徴をわかりやすく紹介します。
見た目の違い
まずは、編集画面の見た目の違いを比較します。
クラシックエディター
- Wordのような文書作成画面
- HTMLタグを意識する必要があった
- デザイン調整は別途必要
ブロックエディター
- ブロック単位で編集できる画面構成
- 実際の見た目に近い状態で編集可能
- デザインも同時に整えられる
操作の違い
実際の操作に関しても、2つのエディターでは考え方が大きく異なります。
| クラシックエディター | ブロックエディター | |
|---|---|---|
| 文章入力 | 1つの枠内で連続して入力 | ブロック単位で独立して入力 |
| 画像挿入 | 「メディアを追加」ボタンで挿入 | 「画像ブロック」を選んで配置 |
| レイアウト | 基本的に制限あり | ブロックを並べ替えることで自在 |
クラシックエディターは「タイトル」と「本文」という2つの入力欄から構成されており、「文章 → 画像 → 改行」などを一括で本文欄に入力していきます。
一方、ブロックエディターでは直感的にブロックを追加したり並べることができるため、自由度が高く、失敗しにくいのが特長です。
初心者におすすめなのはどっち？
結論として、これから始める方には「ブロックエディター」が断然おすすめです。その理由は次のとおりです。
- 視覚的にページを組み立てられるため、思い通りのデザインにしやすい
- 各要素（画像、文章、ボタンなど）を個別に調整・再配置できる
- クラシックエディターは将来的にサポート終了予定であるため、今のうちに慣れておくのが得策
WordPressブロックエディター編集画面【基本】
ここでは、WordPressブロックエディターの基本的な操作方法を説明します。
画面構成と各エリアの役割、どこを操作すればいいのか、よく使うボタンはどこにあるのかなど、ブロックエディターの基本をここで押さえておきましょう。
画面の構成要素
ブロックエディターの編集画面は、大きく3つのエリアに分かれています。
- 上部ツールバー：保存や公開、設定の切り替えなど、作業全体に関わる操作
- 中央編集エリア：実際にブロックを追加して編集するスペース
- 右サイドバー：投稿全体の設定（公開状態・カテゴリーなど）と、選択中ブロックの個別設定
よく使うボタン・アイコンの説明
画面上には多くのアイコン・ボタンがありますが、このうち最初に覚えておくべき基本操作にかかわるものを紹介します。
- +（プラス）：新しいブロック（見出し・画像・段落など）を追加します。上部ツールバーと各ブロックの間に表示されます
- サイドバー：サイドバーの表示／非表示を切り替えるボタンです。見えなくなった場合はここで再表示できます
- プレビュー：実際の画面表示がどのように見えるかを確認できます
- 公開：記事を公開したり、更新内容を保存したりするためのボタンです。記事の状態によって表示内容が変わります
基本ブロックの使い方【実践編】
ブロックエディターでは、「ブロック」と呼ばれる単位で文章や画像を追加していきます。
ここでは、よく使う基本ブロックの操作方法を実際の手順と合わせて紹介します。
まずは、段落や見出し、画像、リストといった基本ブロックを使いこなせれば、ほとんどのブログ記事を問題なく書けるようになります。
ブロックの追加は非常に簡単です。次のいずれかの操作でよく使う要素を挿入できます。
- ＋（ブロック追加ボタン）をクリック → 挿入したいブロックを選ぶ
- 「/（スラッシュ）」を入力 →
/画像/見出しなどと打つと候補が出る
段落ブロック（文章を書く）
段落ブロックではいわゆる普通のテキスト入力が可能です。文字を入力すれば、自動的に段落ブロックとして認識されます。
太字、斜体、リンク挿入などの基本装飾も上部ツールバーから選択できます。
見出しブロック（タイトルを作る）
見出しブロックは、文章の区切りに使う「見出し」を作成するためのブロックです。見出しを正しく使うことで、読みやすさもSEO評価も上がります。
- H1〜H6の設定方法：見出しブロックを追加後、上部ツールバーから「H2」「H3」などを選ぶことで、見出しの階層を変更できます。通常、記事タイトルが「H1」になるため、本文内では「H2」や「H3」を使います
- SEO的に正しい見出しの使い方：見出しは順番に使うのが基本です。たとえば、H2の中にH3、その中にH4…といった具合に「論理的な階層構造」を意識して使いましょう。見出しの多用や飛び級（たとえばH2の中にH4がくる、など）には注意が必要です
- 見出しデザインの変更：テーマによってデザインは異なりますが、右側の設定パネルで太さ・色・配置を調整できる場合もあります。見出しはデザイン面でも記事の印象を左右する重要な要素です
画像ブロック（写真を挿入）
画像ブロックを使えば、写真やイラストを記事中に簡単に挿入できます。「アップロード」または「メディアライブラリ」から画像を選択します。
- 画像のアップロード方法：ブロック追加（＋）から「画像」を選び、「アップロード」「メディアライブラリ」「URLから挿入」のいずれかで画像を挿入できます。自分のPCから直接アップロードするのが一般的です
- サイズ調整の仕方：画像を選択すると、上下左右にある「丸いハンドル」でサイズ調整できます。また、右サイドバーで数値指定も可能です
- 代替テキスト（alt属性）の設定：「代替テキスト」は、画像が表示されない場合に表示されるテキストで、SEOやアクセシビリティに重要です。画像ブロックを選択し、右側の設定パネルに入力欄があります
リストブロック（箇条書きを作る）
箇条書きは、情報を整理して伝えるのに便利な表現方法です。
- 番号なしリスト（・）：「箇条書きリスト」を選ぶと「・」で始まる項目を並べられます。箇条書きは短いポイントを並べるのに最適です
- 番号ありリスト（1.2.3…）：「番号付きリスト」を選ぶと、自動的に番号が付きます。手順やランキングなど、順番が重要な情報に適しています
- 入れ子構造の作り方：リスト内でTabキーを押すと、サブ項目としてインデントされます（Shift + Tabで戻す）。階層構造のある情報を表現したいときに活用しましょう
ブロックの基本操作【移動・複製・削除】
ブロックエディターを使いこなすうえで欠かせないのが、「選択」「移動」「複製」「削除」といった基本操作です。ページの構成を整えるときや、同じパターンのブロックを繰り返すときに、これらの操作がスムーズにできると作業効率が一気に上がります。
ブロックの選択方法
ブロックを編集するには、まずそのブロックを「選択」する必要があります。
- 単一選択：ブロックをクリックすると選択状態になります。テーマによっては選択中は枠線が表示されることがあります。上部にツールバーが現れます
- 複数選択：Shiftキーを押しながら上下のブロックをクリックすると、複数のブロックを一度に選択できます
複数選択は、見出し＋本文＋画像といった一連の内容をまとめて移動したいときに便利です。
ブロックの移動
配置を調整したいときは、ブロックを自由に動かすことができます。主な移動方法は以下のとおりです。
- ドラッグ＆ドロップ：ブロック左側にある「6つの点」をドラッグして、任意の位置へ移動
- 上下の矢印ボタン：同じく左側の矢印アイコンで、1つずつ上下に移動
- ショートカットキー：キーボードでの操作も可能です
- Windows：
Ctrl + Shift + Alt + T or Y - Mac：
⌘+ Shift + Option + T or Y
- Windows：
ブロックの複製・削除
同じ内容を繰り返したいときや、不要になったブロックを削除したいときも、数クリックで対応可能です。
誤って削除してしまった場合は、Ctrl + Z（Windows）や⌘ + Z（Mac）で元に戻すことができます。
- 複製：ブロック右上の「︙（三点）」メニューから「複製」を選択すると、すぐ下に同じブロックがコピーされます
- 削除：同じく三点メニューから「ブロックを削除」を選べばOKです
よくある初心者の疑問・トラブル解決
ブロックが多くなって、全体がごちゃごちゃ…整理するには？
記事を書き進めているうちに、気づけばブロックだらけで編集しづらくなることもあります。そんなときは、次の方法で構成を整理してみましょう。
- 左上メニューの「ドキュメント概観」（3本線アイコン）から
- 「リストビュー」を選択すると、すべてのブロックが一覧で見られます
- 「アウトライン」の表示で、見出し構成を確認すれば、記事の流れもつかみやすくなります
- 関連するブロックはグループ化してまとめると、移動や装飾が一括でできます
昔書いた記事がうまく表示されない
以前のクラシックエディターで作成した記事は、開くと「クラシックブロック」として表示されます。これを「ブロックへ変換」すればブロックエディター形式に対応できます。ブロック化することで、より柔軟なレイアウトや装飾が可能になります。
変換前に一度バックアップを取ることを推奨します。万が一に備えておきましょう。
スマホで見るとレイアウトが崩れてる…大丈夫？
編集画面できれいに見えても、スマホでは意図しない表示になることがあります。まずは「プレビュー」機能を使って、モバイル表示で確認してみましょう。
カラムやボタンを横並びにしている場合、スマホでは自動的に縦並びになります。詰まりすぎていないか注意が必要です。必要に応じて余白ブロックやスペーサーを使って、見やすく調整しましょう。
まとめ｜ブロックエディターは難しくない
ここまで、WordPressのブロックエディターについて、基本から実践操作、よくある疑問まで解説してきました。最初は「難しそう」と感じていた方も、実はそれほどハードルが高くないことに気付いていただけたのではないでしょうか？
ブロックエディターの基本まとめ
- ブロックエディターは、文章や画像、ボタンなどを積み木のように並べていく感覚で操作できる
- HTMLやCSSの専門知識がなくても、見たままで編集ができるため、誰でも簡単に見栄えの良いページがつくれる
- 最初はよく使う基本ブロックさえ扱えれば、十分に記事を仕上げられる
ブロックエディターは、使えば使うほど「こういうこともできるのか！」と発見があるツールです。
焦らず、自分のペースで少しずつ使い方に慣れていけば、あなたのWordPressサイト運営がもっと自由で楽しいものになります。
「自分でやってみたいけど、ここだけがうまくいかない…」
そんな時は、必要なところだけ頼れる「伴走型サポート」を活用してみませんか？
こんな方におすすめ
- サイト制作をできるだけ自力で進めたい
- 途中でつまずいた時だけ、スポットで相談したい
- 操作や設定、デザインのカスタマイズについて聞きたい
