WordPressブロックエディタ(Gutenberg)の使い方ガイド【初心者向けに徹底解説】

「WordPressでブログを始めたけど、新しいエディタの使い方がさっぱりわからない…」「ブロックエディタって、なんだか難しそう…」そんなお悩みはありませんか?

私自身、これまで500件以上のWordPressサイト制作に携わり、多くのお客様がこのブロックエディタでつまずく姿を見てきました。しかし、ご安心ください。ブロックエディタは、初めの「とっつきにくさ」を乗り越えれば、これ以上ないほど強力な記事作成のパートナーになります。

この記事では、WordPress初心者の方に向けて、ブロックエディタの基本的な使い方から、知っていると差がつく応用テクニックまで、専門用語を極力使わずに分かりやすく解説します。この記事を最後まで読めば、ブロックエディタへの苦手意識がなくなり、思い通りのレイアウトで、楽しく記事が書けるようになっているはずです。

この記事を書いた人

Webデザイナー・Webコンサルタント
Web制作会社、Web担当者を経て独立。17年以上の実務経験で培った制作スキルとSEOノウハウを活かし、現在はSTARRY代表としてWordPressサイト制作・集客サポートを提供。ランサーズ認定ランサー。ランキング上位受賞多数。

目次

WordPressのブロックエディタ(Gutenberg)とは?基本を理解しよう

WordPressで記事を書く際に使う新しい編集画面、それが「ブロックエディタ」です。2018年末にリリースされたWordPress 5.0から標準搭載され、それまでの文章作成中心のエディタから大きく進化しました。

文章、見出し、画像、ボタンといったコンテンツの各要素を、「ブロック」という一つの部品のように扱います。これらのブロックを積み木のように組み合わせることで、直感的に記事を作成していくのが最大の特徴です。

クラシックエディタとの決定的な違い

以前のWordPressで標準だった編集画面は「クラシックエディタ」と呼ばれています。Wordのような一つの編集領域に文章や画像を流し込んでいくスタイルでした。

比較項目ブロックエディタクラシックエディタ
編集スタイルブロック単位で要素を組み立てる一つの編集領域に全てを記述
レイアウトカラムなど複雑な配置が容易HTML/CSSの知識が必要
操作性視覚的・直感的文章作成に特化
機能ボタンや表などを標準機能で追加可能プラグインやHTMLで追加が必要

Google スプレッドシートにエクスポート

クラシックエディタが「文章を書く」ことに特化していたのに対し、ブロックエディタは「コンテンツをデザインする」という側面が強く、より表現力豊かなページ作成が可能になった点が決定的な違いです。

ブロックエディタは「Gutenberg(グーテンベルク)」とも呼ばれる

開発時のコードネームから、ブロックエディタは「Gutenberg(グーテンベルク)」という愛称でも呼ばれています。Web上の情報やプラグインを探す際には、この「Gutenberg」というキーワードも知っておくと、より多くの情報にアクセスできます。本記事では、分かりやすく「ブロックエディタ」という名称で統一して解説を進めます。

なぜブロックエディタが標準に?メリットを理解すればもっと便利になる

「前のエディタの方が良かった」という声も聞かれますが、ブロックエディタが標準になったのには明確な理由があります。そのメリットを理解することで、ブロックエディタの本当の価値が見えてきます。

メリット1:見たまま編集できる直感的な操作性

ブロックエディタ最大のメリットは、編集画面で見たレイアウトが、ほぼそのまま公開ページで再現される点です。

例えば、「画像を文章の右側に配置したい」と思った時、クラシックエディタでは複雑な設定が必要でした。しかし、ブロックエディタなら、ブロックの設定項目から数クリックで簡単に実現できます。完成形をイメージしながら記事を作成できるため、初心者の方でも視覚的に分かりやすいのが強みです。

メリット2:表現豊かなレイアウトが自由自在

コンテンツをブロック単位で管理するため、レイアウトの自由度が飛躍的に向上しました。

  • コンテンツを2列や3列に並べる「カラムブロック」
  • 画像の上にテキストを重ねて表示できる「カバーブロック」
  • クリックされやすいデザインの「ボタンブロック」

これらのような、以前はHTMLやCSSの知識がないと難しかった、あるいは専用のプラグインが必要だったデザインが、標準機能だけで誰でも簡単に作成できます。

メリット3:プラグイン不要で実現できることが増えた

上記で挙げたカラムやボタンに加え、シンプルな「表(テーブル)」や「区切り線」なども標準のブロックとして用意されています。

これにより、サイトの表示速度を低下させる一因となりうるプラグインの導入を、最小限に抑えることができます。サイトの健全性を保ちながら、豊かな表現が可能になる点は、サイト運営者にとって大きなメリットと言えるでしょう。

ブロックエディタは使いにくい?初心者がつまずく3つのポイントと解決策

メリットが多い一方で、「ブロックエディタは使いにくい」という声が絶えないのも事実です。500件以上のサイト制作を通じて見えてきた、初心者がつまずきやすいポイントとその解決策を伝授します。

つまずきポイント1:「どこで何をすればいいか分からない」

クラシックエディタのシンプルな画面に慣れていると、ブロックエディタの画面は情報量が多く、戸惑うかもしれません。右側のサイドバーや、ブロックごとに出現するツールバーなど、どこを触ればいいか分からなくなってしまうケースです。

解決策: まずは焦らず、画面全体の構成を把握することから始めましょう。基本的に操作するのは、「①ブロックを追加する『+』ボタン」「②選択したブロックのツールバー」「③右側のサイドバー設定」の3箇所です。最初はこれだけ意識すれば十分です。

つまずきポイント2:「文章を書くのに集中できない」

文章の途中でブロックの追加や設定を行うため、「執筆の流れが途切れてしまう」と感じる方もいます。これもクラシックエディタとの使用感の違いからくる典型的な悩みです。

解決策: まずは文章を書き切ることに集中し、装飾や画像の挿入は後から行うのがおすすめです。ブロックエディタには、文章を書きやすくするための「スポットライトモード」(編集中のブロック以外を半透明にする)や「フルスクリーンモード」(サイドバーなどを非表示にする)といった集中力を高める機能も用意されています。

つまずきポイント3:「ブロックの種類が多すぎて混乱する」

ブロックを追加しようと「+」ボタンを押すと、非常に多くのブロックが表示され、どれを使えばいいか分からなくなってしまうことがあります。

解決策: 最初から全てのブロックを覚える必要は全くありません。記事作成で頻繁に使うブロックは限られています。まずは本記事の後半で紹介する「必須ブロック7選」だけを使えるようになりましょう。それだけで、クオリティの高い記事のほとんどは作成可能です。

【完全ガイド】WordPressブロックエディタの基本的な使い方

ここからは、実際の操作方法を具体的に解説していきます。これさえ押さえれば、今日からあなたもブロックエディタを使いこなせます。

まずは覚えたい!エディタ画面の全体像

記事の新規投稿画面を開くと、ブロックエディタが表示されます。画面は大きく分けて以下のエリアで構成されています。

  1. トップツールバー: 下書き保存やプレビュー、公開ボタンなどがあります。
  2. コンテンツエリア: ここにブロックを配置して記事を作成します。
  3. ブロック追加ボタン(インサーター): クリックすると様々なブロックを選べます。
  4. 設定サイドバー: 記事全体の設定や、選択したブロックの詳細設定を行います。

ブロックの追加・移動・削除の基本操作

ブロックエディタの最も基本的な操作です。

  • 追加: コンテンツエリアの「+」ボタンをクリックし、使いたいブロックを選択します。
  • 移動: 移動したいブロックを選択すると表示されるツールバーの「↑」「↓」矢印で上下に移動できます。また、ドラッグ&ドロップでも直感的に移動可能です。
  • 削除: 削除したいブロックを選択し、ツールバーの「︙(オプション)」から「ブロックを削除」を選びます。

文章の入力と装飾(段落・見出し・リストブロック)

記事の基本となるテキスト関連のブロックです。

文字のサイズや色を変更する方法

文字のサイズや色を変えたいブロックを選択します。すると、右側の設定サイドバーに「タイポグラフィ」や「カラー」といった設定項目が表示されます。ここでフォントサイズをS, M, Lから選んだり、文字色や背景色を自由に変更したりできます。読みやすさを損なわない配色を心がけるのがポイントです。

太字やマーカーでテキストを強調する方法

強調したいテキストをドラッグで選択すると、その場にツールバーが表示されます。このツールバーの「B」アイコンで太字に、「ハイライト」機能でマーカー(背景色)を引くことができます。重要なキーワードや伝えたい箇所に絞って使うと、読者に意図が伝わりやすくなります。

画像やメディアの挿入(画像・ギャラリー・動画埋め込み)

記事を華やかにし、情報を分かりやすく伝えるためのメディア関連ブロックです。

画像の回り込み設定

「画像ブロック」で画像を挿入した後、ブロックのツールバーにある配置アイコン(左寄せ、中央揃え、右寄せなど)を選択します。「左寄せ」や「右寄せ」を選ぶと、後続のテキストが画像の横に回り込みます。これにより、雑誌のような洗練されたレイアウトが簡単に作れます。

YouTube動画の埋め込み方法

「YouTubeブロック」を選択し、共有したいYouTube動画のURLを貼り付けるだけで、簡単に動画を記事内に埋め込むことができます。関連動画の解説などで非常に役立つ機能です。

記事作成が捗る!最初に覚えたい必須ブロック7選

数あるブロックの中から、これだけは覚えておきたいという特に使用頻度の高いブロックを厳選してご紹介します。

段落ブロック:基本の文章入力

記事の本文を入力するための最も基本的なブロックです。改行(Enterキー)を押すと、新しい段落ブロックが自動的に作成されます。

見出しブロック:記事の骨子を作る

H2, H3といった見出しを作成するブロックです。記事に階層構造を持たせることで、読者にとっても検索エンジンにとっても分かりやすい構成になります。SEOの観点からも非常に重要なブロックです。

画像ブロック:記事に彩りを加える

パソコンやスマートフォンのライブラリから画像をアップロードして挿入できます。記事の内容を視覚的に補足し、読者の理解を助けます。

リストブロック:情報を整理して伝える

箇条書き(・)や番号付きリスト(1. 2. 3.)を作成できます。手順の説明や要点の整理に使うと、情報がスッキリとまとまり格段に読みやすくなります。

カラムブロック:コンテンツを横並びに配置

ブロックを2列や3列に並べることができます。例えば、商品の画像を左に、説明文を右に配置する、といったレイアウトが可能です。

ボタンブロック:読者の行動を促す

「詳しくはこちら」「お申し込みはこちら」といった、クリック可能なボタンを設置できます。公式サイトへの誘導や、お問い合わせページへのリンクなど、読者に次の行動を促したい場合に非常に有効です。

スペーサーブロック:余白を調整する

ブロックとブロックの間に、任意の高さの空白(余白)を挿入できます。コンテンツの間に適度な余白を入れることで、窮屈な印象をなくし、記事全体のデザイン性と可読性を向上させます。

もっと便利に!ブロックエディタの応用テクニックで差をつける

基本操作に慣れてきたら、次は作業効率と記事のクオリティをさらに高める応用テクニックに挑戦してみましょう。

繰り返し使うパーツは「再利用ブロック」で一括管理

記事の末尾にいつも挿入する定型文や、商品紹介のフォーマットなど、繰り返し使うブロックの組み合わせは「再利用ブロック」として登録できます。

一度登録しておけば、次回からはその再利用ブロックを呼び出すだけで、同じコンテンツを瞬時に挿入可能です。さらに、元の再利用ブロックを編集すれば、それを使っている全ての箇所が一括で更新されるため、修正の手間を大幅に削減できます。

おしゃれなレイアウトを瞬時に作成「ブロックパターン」

「ブロックパターン」は、あらかじめデザインされたブロックの組み合わせです。例えば、「画像とテキストを組み合わせたプロフィール紹介」や「料金表」といった複雑なレイアウトがプリセットとして用意されています。

これを使えば、デザインの知識がなくても、プロが作ったような洗練されたレイアウトを自分の記事にワンクリックで取り入れることができます。

複数のブロックをまとめて扱う「グループ化」

複数のブロックを選択して「グループ化」すると、それらを一つのブロックとして扱えるようになります。グループ全体で背景色を設定したり、まとめて移動したりできるため、複雑なレイアウトを組む際に非常に便利です。カラムブロックと組み合わせることで、より凝ったデザインも可能になります。

読者の目を引く「カバーブロック」の活用術

「カバーブロック」は、画像や動画の上にテキストを重ねて表示できるブロックです。章の扉ページのように使ったり、読者の注意を引きたいメッセージを伝えたりするのに効果的です。テキストの色や背景の透明度も調整できるため、アイキャッチとして非常に高い効果を発揮します。

それでもブロックエディタが合わない…そんな時の対処法

様々なテクニックを試しても、どうしてもブロックエディタに馴染めないという場合もあるかもしれません。その際の代替案もご紹介します。

Classic Editorプラグインで元に戻す方法と注意点

WordPressの公式プラグイン「Classic Editor」をインストールして有効化すると、記事編集画面を以前のクラシックエディタに戻すことができます。

ただし、このプラグインはWordPress本体の進化とは別の流れになるため、将来的にサポートが終了する可能性も考慮しておく必要があります。あくまで一時的な措置、あるいはブロックエディタへの移行期間中の補助として利用するのが賢明です。

ブロックエディタとクラシックエディタを併用する選択肢

Classic Editorプラグインの設定で、ユーザーごとにデフォルトのエディタを選択したり、投稿ごとにエディタを切り替えたりすることも可能です。例えば、「普段のブログ記事はブロックエディタ、定型的なお知らせはクラシックエディタ」といった使い分けもできます。自分にとって最適な使い方を見つけるのが良いでしょう。

WordPressブロックエディタに関するよくある質問(FAQ)

ここでは、ブロックエディタに関してよく寄せられる質問とその回答をまとめました。

Q. ブロックエディタで作成した記事はSEOに効果がありますか?

A. はい、適切に使えばSEOに良い影響を与えると考えられます。ブロックエディタは見出し構造を正しく設定しやすく、HTML的にもクリーンなコードが出力される傾向があります。これにより、Googleなどの検索エンジンが記事の内容を正確に理解しやすくなるため、結果としてSEO評価の向上に繋がる可能性があります。

Q. おすすめのブロック追加プラグインはありますか?

A. ブロックエディタの機能をさらに拡張するプラグインも多数存在します。例えば、「CoBlocks」や「Kadence Blocks」といったプラグインは、より多彩なデザインブロックを追加でき、無料で使える範囲も広いため人気があります。ただし、プラグインの入れすぎはサイトの動作を重くする原因にもなるため、本当に必要な機能か見極めてから導入しましょう。

Q. ブロックエディタの動作が重いのですが、どうすればいいですか?

A. いくつかの原因が考えられます。まずは、利用しているレンタルサーバーのスペック、PHPやWordPressのバージョンが最新かを確認しましょう。また、記事内に画像やブロックを多用しすぎると重くなることがあります。不要なプラグインを停止したり、画像のファイルサイズを圧縮したりすることも有効な対策です。

Q. スマホやタブレットでもブロックエディタは問題なく使えますか?

A. はい、使用可能です。WordPressの公式アプリや、ブラウザ経由でサイトにアクセスすることで、スマートフォンやタブレットからも記事の編集ができます。画面はパソコン版より小さくなりますが、基本的なブロック操作や文章の修正は問題なく行えるため、外出先での急な修正や下書き作成に便利です。

まとめ

この記事では、WordPressのブロックエディタについて、基本的な概念から具体的な使い方、応用テクニック、そして初心者がつまずきやすいポイントの解決策まで、網羅的に解説しました。

最初は戸惑うかもしれませんが、ブロックエディタは間違いなく、あなたの情報発信をより豊かで効率的なものにしてくれる強力なツールです。今回ご紹介した「必須ブロック7選」から少しずつ試していくことで、その便利さをきっと実感できるはずです。食わず嫌いをせずに、ぜひチャレンジしてみてください。

もし、「記事の書き方は分かったけれど、サイト全体のデザインや集客について相談したい」「自分一人でWordPressサイトを構築・運用していくのは不安だ」と感じられたら、いつでも専門家にご相談ください。500件以上のWordPressサイト制作を手掛けてきた経験を基に、あなたのビジネスや目的に最適なWebサイトの構築・活用をサポートいたします。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

Hara Daizo Hara Daizo STARRY代表、Webデザイナー、Webコンサルタント

Web制作会社、Web担当者を経て独立。17年以上の実務経験で培った制作スキルとSEOノウハウを活かし、現在はSTARRY代表としてWordPressサイト制作・集客サポートを提供。ランサーズ認定ランサー。ランキング上位受賞多数。

目次