WordPressグーテンベルクの使い方完全ガイド｜初心者がつまずくブロックエディターの基本と便利機能
はじめに
WordPressでブログ記事や固定ページを作成するとき、現在の標準エディターとして使われているのが「グーテンベルク」と呼ばれるブロックエディターです。以前のWordPressでは、Wordやメール作成画面のように本文を上から順番に入力していくクラシックエディターが主流でした。しかし、グーテンベルクでは文章、画像、見出し、ボタン、表、カラムなどを「ブロック」という単位で組み合わせながらページを作っていきます。
初めてWordPressを触る人にとっては、「ブロックって何？」「文章を入力したいだけなのに操作が多い」「画像の位置が思った通りにならない」と感じることもあるでしょう。特に、これまでクラシックエディターに慣れていた人ほど、最初はグーテンベルクの画面構成や操作方法に戸惑いやすいです。
しかし、基本的な使い方を理解すれば、グーテンベルクは初心者にとっても非常に便利な編集画面です。HTMLやCSSの知識がなくても、見栄えの良い記事や固定ページを作成でき、見出し構成の整理、画像配置、ボタン設置、表作成なども直感的に行えます。
この記事では、WordPressグーテンベルクの基本から、記事作成でよく使うブロック、公開までの流れ、便利機能、初心者がつまずきやすいポイント、SEOに強い記事を作るコツまでをわかりやすく解説します。これからWordPressでブログを始める人や、ブロックエディターをうまく使いこなしたい人は、ぜひ参考にしてください。
1. WordPressグーテンベルクとは？ブロックエディターの基本を初心者向けに解説
WordPressグーテンベルクとは、WordPressに標準搭載されているブロック型の編集画面です。正式には「ブロックエディター」と呼ばれ、文章や画像、見出し、リスト、表などをそれぞれ独立したブロックとして追加し、組み合わせながらページを作成します。
従来のエディターでは、本文エリアの中に文章や画像をまとめて入力していました。一方、グーテンベルクでは「段落ブロック」「画像ブロック」「見出しブロック」「リストブロック」のように、コンテンツの要素ごとにブロックを分けて管理します。
この仕組みにより、文章の途中に画像を追加したり、ブロックを上下に移動したり、同じデザインのパーツを再利用したりしやすくなりました。ブログ記事だけでなく、会社概要ページ、サービス紹介ページ、ランディングページのような固定ページ作成にも活用できます。
1-1. グーテンベルクとブロックエディターの違い
「グーテンベルク」と「ブロックエディター」は、ほぼ同じ意味で使われることが多い言葉です。グーテンベルクは、WordPressにブロック編集機能を導入するために進められたプロジェクト名です。一方、ブロックエディターは、実際にWordPressの投稿や固定ページを編集するときに使うエディター機能の名称です。
初心者のうちは、グーテンベルクは「WordPressの新しい編集画面」、ブロックエディターは「ブロックを使って記事を作る編集機能」と理解しておけば問題ありません。
現在のWordPressでは、標準の編集画面としてブロックエディターが使われています。そのため、WordPressでブログ運営をするなら、グーテンベルクの基本操作を覚えておくことは非常に重要です。
1-2. クラシックエディターとの違い
クラシックエディターは、以前のWordPressで使われていた編集画面です。見た目は一般的な文章作成ソフトに近く、本文入力欄に文章を書き、必要に応じて画像やリンクを挿入していく形式でした。
一方、グーテンベルクではコンテンツをブロック単位で管理します。たとえば、本文を書くときは段落ブロック、画像を入れるときは画像ブロック、箇条書きを作るときはリストブロックを使います。
クラシックエディターはシンプルでわかりやすい反面、複雑なレイアウトを作るにはHTMLやショートコード、テーマ独自の機能に頼ることが多くありました。グーテンベルクでは、カラムやボタン、カバー、テーブルなどのブロックを使うことで、コードを書かなくても見た目を整えやすくなっています。
ただし、単純に文章だけを書きたい人にとっては、最初はグーテンベルクのほうが操作項目が多く感じられるかもしれません。慣れるまでは、まず段落、見出し、画像、リストの基本ブロックから使い始めるのがおすすめです。
1-3. ブロック単位で記事を作る仕組み
グーテンベルクでは、記事を構成する一つひとつの要素がブロックとして扱われます。たとえば、以下のようなイメージです。
文章を書く部分は段落ブロック、章タイトルは見出しブロック、写真は画像ブロック、箇条書きはリストブロック、リンクボタンはボタンブロックとして追加します。
それぞれのブロックは独立しているため、後から順番を入れ替えたり、複製したり、削除したりできます。記事全体を一つの大きな本文として編集するのではなく、小さなパーツを積み上げていく感覚です。
この仕組みは、記事の修正やリライトにも便利です。たとえば、記事の後半にある見出しを前半に移動したい場合、該当する見出しブロックと本文ブロックを選択して移動できます。また、よく使う注意書きやCTAをパターンとして保存しておけば、別の記事でも簡単に呼び出せます。
1-4. グーテンベルクでできること・できないこと
グーテンベルクでは、ブログ記事や固定ページの作成に必要な多くの操作ができます。文章入力、見出し作成、画像挿入、表作成、カラムレイアウト、ボタン設置、YouTube動画の埋め込み、SNS投稿の埋め込み、再利用パーツの作成などが代表的です。
また、対応テーマを使えば、フォントサイズ、色、余白、背景、横幅などもブロックごとに調整できます。ブロックパターンを使えば、あらかじめデザインされたレイアウトを挿入して、短時間で見栄えの良いページを作ることも可能です。
一方で、グーテンベルクだけで何でも自由にデザインできるわけではありません。細かい装飾、独自のアニメーション、高度なレイアウト、テーマ側で用意されていないデザイン調整などは、CSSやプラグイン、ページビルダーが必要になる場合があります。
初心者は、まず標準ブロックでできることを把握し、不足する機能だけをテーマ設定やプラグインで補うのがおすすめです。
1-5. 初心者が最初に覚えるべき画面構成
グーテンベルクの編集画面は、大きく分けて「本文編集エリア」「上部ツールバー」「ブロックツールバー」「設定サイドバー」「リストビュー」で構成されています。
本文編集エリアは、実際に記事のタイトルや本文を入力する場所です。上部ツールバーには、ブロック追加、元に戻す、やり直し、保存、プレビュー、公開などの操作ボタンがあります。
ブロックツールバーは、選択中のブロックの上に表示される小さなメニューです。文字の太字、リンク設定、配置変更、ブロック変換などを行えます。
設定サイドバーは、画面右側に表示される設定欄です。投稿全体の設定と、選択中ブロックの詳細設定を切り替えて使います。カテゴリー、タグ、アイキャッチ画像、パーマリンク、公開状態などは投稿設定から変更します。
リストビューは、記事内にあるブロックを一覧で確認できる機能です。ブロックが多い記事や、カラム・グループなど入れ子構造があるページを編集するときに役立ちます。
2. グーテンベルクを使い始める前の準備
グーテンベルクをスムーズに使うためには、いきなり本文を書き始める前に、編集画面の開き方や基本設定を確認しておくことが大切です。最初に画面の役割を理解しておくと、記事作成中に「どこを操作すればいいかわからない」という状態を防げます。
2-1. WordPressの投稿・固定ページ編集画面を開く方法
ブログ記事を作成する場合は、WordPress管理画面にログインし、左メニューの「投稿」から「新規追加」をクリックします。既存の記事を編集する場合は、「投稿一覧」から該当記事を選び、「編集」をクリックします。
固定ページを作成する場合は、左メニューの「固定ページ」から「新規追加」をクリックします。会社概要、お問い合わせ、サービス紹介、プロフィールページなど、時系列で流れないページは固定ページで作成するのが一般的です。
投稿と固定ページの編集画面は似ていますが、目的が異なります。ブログ記事やお知らせは投稿、サイト内に常設するページは固定ページと覚えておくとよいでしょう。
2-2. ブロックエディターの基本設定を確認する
編集画面を開いたら、まず右上の設定アイコンを確認しましょう。設定サイドバーが閉じている場合は、アイコンをクリックすると表示されます。
設定サイドバーには、「投稿」または「固定ページ」の設定と、「ブロック」の設定があります。投稿設定では、カテゴリー、タグ、アイキャッチ画像、抜粋、パーマリンクなどを設定できます。ブロック設定では、選択中のブロックに応じて、色、サイズ、余白、配置などを調整できます。
また、右上の三点メニューから、表示モードや設定項目を変更できます。フルスクリーンモード、スポットライトモード、トップツールバーなど、自分が編集しやすい表示に調整しておくと作業しやすくなります。
2-3. 表示オプション・設定サイドバーの使い方
グーテンベルクでは、画面右側の設定サイドバーを使う場面が非常に多いです。記事全体の設定を変更したいときは「投稿」タブ、選択中のブロックを調整したいときは「ブロック」タブを使います。
たとえば、記事のカテゴリーを設定したい場合は投稿タブを開きます。画像ブロックの角丸やサイズを調整したい場合は、画像ブロックを選択してブロックタブを開きます。
初心者が混乱しやすいのは、「今、投稿全体を設定しているのか」「選択中のブロックを設定しているのか」がわからなくなることです。設定が反映されないと感じたときは、まず右側のタブが投稿なのかブロックなのかを確認しましょう。
2-4. ビジュアル編集とコード編集の違い
グーテンベルクには、通常の見た目に近い状態で編集するビジュアル編集と、HTMLに近い形で編集するコード編集があります。初心者は基本的にビジュアル編集を使えば問題ありません。
コード編集は、ブロックのHTML構造を確認したいときや、細かい修正を行いたいときに使います。ただし、誤ってブロックのHTMLを壊してしまうと、表示崩れやブロックエラーが起きる場合があります。
HTMLやCSSに慣れていない場合は、無理にコード編集を使う必要はありません。装飾や配置は、ブロックツールバーや設定サイドバーから行うのが安全です。
2-5. 初心者がつまずきやすい初期画面の見方
初めてグーテンベルクを開くと、画面がシンプルすぎて「どこに文章を書けばいいの？」と感じることがあります。基本的には、上部の「タイトルを追加」に記事タイトルを入力し、その下の本文エリアに文章を書き始めます。
本文エリアでEnterキーを押すと、新しい段落ブロックが作成されます。画像や見出しを追加したいときは、左上または本文横の「＋」ボタンからブロックを選びます。
また、ブロックを選択していない状態では、右側のブロック設定が表示されないことがあります。ブロックごとの設定を変更したい場合は、必ず対象のブロックをクリックして選択しましょう。
3. グーテンベルクの基本的な使い方
グーテンベルクを使いこなすには、まず基本ブロックの操作を覚えることが大切です。難しい機能を最初から使う必要はありません。段落、見出し、画像、リスト、引用、ボタンの使い方を理解すれば、一般的なブログ記事は十分に作成できます。
3-1. ブロックを追加する方法
ブロックを追加する方法はいくつかあります。もっとも基本的なのは、編集画面左上の「＋」ボタンをクリックし、追加したいブロックを選ぶ方法です。
本文エリアの空白部分に表示される「＋」ボタンからもブロックを追加できます。また、キーボードで「/」を入力し、続けて「画像」「見出し」「リスト」などと入力すると、目的のブロックを素早く呼び出せます。
たとえば、本文中で「/画像」と入力すれば画像ブロック、「/見出し」と入力すれば見出しブロックを選択できます。慣れてくると、「＋」ボタンよりもスラッシュ入力のほうが効率的です。
3-2. 文章を入力する段落ブロックの使い方
段落ブロックは、本文を書くためのもっとも基本的なブロックです。編集画面で文章を入力すると、自動的に段落ブロックとして扱われます。
Enterキーを押すと新しい段落ブロックが作成されます。文章を自然に区切りたいときは、段落ごとに分けて入力しましょう。長すぎる段落は読みにくくなるため、スマホ表示を意識して2〜4文程度で区切るのがおすすめです。
段落ブロックでは、太字、リンク、文字色、背景色、フォントサイズなどを設定できます。ただし、装飾を使いすぎると読みにくくなるため、重要な部分だけに絞って使いましょう。
3-3. 見出しブロックの使い方とSEOで意識すべき階層
見出しブロックは、記事の構造をわかりやすく整理するために使います。SEOを意識する場合、見出しの階層は非常に重要です。
一般的には、記事タイトルがh1、本文中の大きな章がh2、その中の小見出しがh3、さらに細かい補足がh4という順番になります。h2の次にいきなりh4を使ったり、デザイン目的だけでh2とh3を入れ替えたりするのは避けましょう。
検索エンジンは、見出しから記事の内容や構造を理解します。また、読者も見出しを見ながら必要な情報を探します。そのため、見出しにはキーワードを自然に含めつつ、内容が一目でわかる表現にすることが大切です。
3-4. 画像ブロックを追加・配置する方法
画像を追加するには、画像ブロックを挿入します。画像ブロックでは、メディアライブラリから既存の画像を選ぶか、新しい画像をアップロードできます。
画像を追加したら、配置を左寄せ、中央、右寄せ、幅広、全幅などに変更できます。使用できる配置はテーマによって異なります。画像サイズが大きすぎると表示速度に影響するため、アップロード前に適切なサイズへ圧縮しておくとよいでしょう。
また、SEOを意識するなら、画像のalt属性も設定しましょう。alt属性には、画像の内容を簡潔に説明する文章を入れます。たとえば、グーテンベルクの編集画面の画像であれば、「WordPressグーテンベルクの編集画面」のように具体的に記述します。
3-5. リスト・引用・ボタンなど基本ブロックの使い方
リストブロックは、手順や特徴を整理して伝えたいときに便利です。箇条書きや番号付きリストを使うことで、読者が内容を理解しやすくなります。
引用ブロックは、他者の発言や参考情報を紹介するときに使います。ただし、引用を使う場合は、引用元を明確にし、必要以上に長く引用しないように注意しましょう。
ボタンブロックは、問い合わせページ、資料請求ページ、商品ページなどへ誘導したいときに役立ちます。ブログ記事の最後に「お問い合わせはこちら」「詳しく見る」などのボタンを設置すると、読者の行動につながりやすくなります。
3-6. ブロックを移動・複製・削除する方法
ブロックを選択すると、上部または横にツールバーが表示されます。上下の矢印をクリックすると、ブロックを一つ上または一つ下へ移動できます。ドラッグ操作に対応している場合は、ブロックをつかんで好きな位置へ移動することも可能です。
同じブロックをもう一つ作りたい場合は、ブロックのオプションメニューから「複製」を選びます。不要なブロックは「削除」または「ブロックを削除」で消せます。
複数のブロックをまとめて移動したい場合は、リストビューを使うと便利です。特に、カラムやグループなど入れ子になったブロックは、本文画面上で選択しにくいことがあるため、リストビューから操作するとミスを減らせます。
3-7. ブロックの設定を変更する方法
ブロックの設定を変更するには、対象のブロックを選択し、右側の設定サイドバーを確認します。設定項目はブロックの種類によって異なります。
段落ブロックでは文字サイズや色、画像ブロックではサイズや角丸、ボタンブロックでは背景色やリンク先、カラムブロックでは幅や配置などを設定できます。
設定が見つからない場合は、ブロックを正しく選択できていない可能性があります。たとえば、カラム内の文章を編集しているつもりでも、実際には段落ブロックを選択していることがあります。親ブロックを選択したいときは、リストビューを使うとわかりやすいです。
4. 記事作成でよく使う便利なブロック
グーテンベルクには多くのブロックがありますが、ブログ記事でよく使うものはある程度決まっています。基本ブロックに慣れたら、カラム、テーブル、メディアとテキスト、カバー、スペーサー、埋め込み、パターンなどを覚えると、記事の表現力が大きく広がります。
4-1. カラムブロックで横並びレイアウトを作る
カラムブロックは、コンテンツを横並びに配置したいときに使います。たとえば、サービスの特徴を3つ並べたり、画像と説明文を横に配置したりする場合に便利です。
カラムブロックを追加すると、2カラム、3カラムなどのレイアウトを選べます。それぞれのカラムの中には、段落、画像、ボタンなど別のブロックを入れられます。
ただし、スマホでは横並びが縦並びに変わることがあります。PCではきれいに見えても、スマホで読みにくくなる場合があるため、必ずプレビューで確認しましょう。
4-2. テーブルブロックで表を作成する
テーブルブロックは、比較表や料金表、スペック表などを作成するときに便利です。行数と列数を指定するだけで、簡単に表を挿入できます。
たとえば、クラシックエディターとグーテンベルクの違い、無料プランと有料プランの違い、作業手順の比較などを表にすると、読者が情報を理解しやすくなります。
ただし、列数が多すぎる表はスマホで見づらくなります。スマホ読者が多いブログでは、列数を少なめにする、文章を短くする、必要に応じて横スクロール対応のプラグインを使うなどの工夫が必要です。
4-3. メディアとテキストブロックの使い方
メディアとテキストブロックは、画像と文章を左右に並べて表示できるブロックです。サービス紹介、プロフィール、商品説明、手順解説などに向いています。
画像ブロックと段落ブロックを別々に配置するよりも、レイアウトが整いやすいのが特徴です。画像を左、文章を右に配置したり、その逆にしたりできます。
スマホでは縦並びになることが多いため、画像と文章の順番にも注意しましょう。読者に最初に見せたい情報が上に来るように調整すると、読みやすい構成になります。
4-4. カバーブロックで目立つデザインを作る
カバーブロックは、背景画像や背景色の上にテキストを重ねて表示できるブロックです。記事の冒頭、キャンペーン告知、重要なメッセージ、固定ページのファーストビューなどに使われます。
背景画像を設定し、その上に見出しやボタンを配置すると、視覚的に目立つデザインを作れます。画像の暗さやオーバーレイ色を調整すると、文字が読みやすくなります。
ただし、カバーブロックは使いすぎるとページが重くなったり、情報が目立ちすぎて本文の流れを妨げたりします。ブログ記事では、重要な箇所に絞って使うのがおすすめです。
4-5. スペーサー・区切りブロックで余白を調整する
スペーサーブロックは、ブロック同士の間に余白を作るためのブロックです。区切りブロックは、横線などでセクションを分けるときに使います。
文章が詰まりすぎていると読みにくくなるため、適度な余白は大切です。ただし、スペーサーを多用すると、スマホ表示で余白が大きくなりすぎることがあります。
余白調整は、テーマ側のデザインやブロック設定で対応できる場合もあります。毎回スペーサーブロックを入れるのではなく、必要な箇所だけに使うようにしましょう。
4-6. 埋め込みブロックでYouTubeやSNSを表示する
埋め込みブロックを使うと、YouTube動画、Xの投稿、Instagram投稿、WordPress記事などをページ内に表示できます。URLを貼り付けるだけで自動的に埋め込み表示される場合もあります。
動画解説やSNS上の口コミを紹介したいときに便利ですが、埋め込みコンテンツが多すぎるとページ表示が遅くなることがあります。必要なものだけを厳選して使いましょう。
また、外部サービスの投稿を埋め込む場合は、投稿が削除されたり非公開になったりすると表示されなくなる可能性があります。重要な情報は、本文でも補足しておくと安心です。
4-7. パターン・再利用ブロックで作業を効率化する
パターンは、複数のブロックを組み合わせたレイアウトを保存・呼び出しできる機能です。たとえば、CTA、プロフィール欄、注意書き、サービス紹介など、よく使う構成をパターン化しておくと作業時間を短縮できます。
以前は「再利用ブロック」と呼ばれていた機能は、現在では同期パターンとして扱われます。同期パターンを編集すると、同じパターンを使っている他の場所にも変更が反映されます。
全記事共通のお知らせや問い合わせ導線には同期パターンが便利です。一方、記事ごとに内容を変えたいパーツは、同期しない通常のパターンとして使うとよいでしょう。
5. グーテンベルクで記事を公開する流れ
グーテンベルクで記事を書くときは、本文を入力するだけでなく、見出し、画像、カテゴリー、パーマリンク、プレビュー確認なども重要です。公開前の流れを決めておくと、ミスを減らせます。
5-1. タイトルと本文を入力する
まず、編集画面上部のタイトル欄に記事タイトルを入力します。タイトルは検索結果やSNSシェアでも表示される重要な要素です。狙っているキーワードを自然に含め、記事の内容が一目でわかるタイトルにしましょう。
本文は、段落ブロックを使って入力していきます。最初にいきなり細かく装飾するのではなく、まずは見出しと本文を一通り作成し、その後で画像やボタン、装飾を追加すると効率的です。
5-2. 見出し構成を整える
本文を書いたら、見出し構成を確認します。h2とh3の階層が正しくなっているか、見出しだけを読んでも記事の流れがわかるかをチェックしましょう。
見出しが長すぎると読みにくくなりますが、短すぎても内容が伝わりません。SEOを意識する場合は、検索キーワードや関連語を自然に含めながら、読者の疑問に答える見出しにすることが大切です。
5-3. 画像・アイキャッチ画像を設定する
本文中に必要な画像を追加したら、アイキャッチ画像も設定しましょう。アイキャッチ画像は、記事一覧ページやSNSシェア時に表示されることが多い画像です。
画像は、内容に合ったものを選び、必要に応じて圧縮してからアップロードします。ファイル名も「wordpress-gutenberg-editor.jpg」のように内容がわかる名前にすると管理しやすくなります。
本文画像にはalt属性を設定し、画像の内容を簡潔に説明しましょう。装飾目的の画像に無理やりキーワードを詰め込む必要はありません。
5-4. カテゴリー・タグを設定する
カテゴリーは、記事を大きなテーマごとに分類するためのものです。たとえば、WordPressの使い方に関する記事なら「WordPress」や「ブログ運営」などのカテゴリーに設定します。
タグは、記事の細かい話題を補足するために使います。「グーテンベルク」「ブロックエディター」「SEO」など、記事の内容に関連するタグを設定するとよいでしょう。
ただし、タグを増やしすぎると管理が難しくなります。似たようなタグを乱立させず、サイト全体でルールを決めて使うことが大切です。
5-5. パーマリンクを確認する
パーマリンクは、記事ごとのURLです。記事を公開する前に、URLがわかりやすい形になっているか確認しましょう。
日本語URLはそのままだと長くなったり、コピーしたときにエンコードされて読みにくくなったりすることがあります。英数字で簡潔に設定するのがおすすめです。
たとえば、WordPressグーテンベルクの記事なら「wordpress-gutenberg-guide」のようなパーマリンクにすると、内容がわかりやすく管理もしやすくなります。
5-6. プレビューで表示崩れを確認する
記事を公開する前に、必ずプレビューで表示を確認しましょう。特に、画像のサイズ、カラムの並び、表の見え方、ボタンの位置、スマホ表示での読みやすさは重要です。
編集画面上では問題なく見えても、実際の公開画面ではテーマのCSSや画面幅の影響で見え方が変わることがあります。PCだけでなく、スマホやタブレットの表示も確認しておくと安心です。
5-7. 下書き保存・予約投稿・公開の違い
下書き保存は、記事をまだ公開せずに保存する機能です。途中まで書いた記事や、確認待ちの記事に使います。
予約投稿は、指定した日時に自動で記事を公開する機能です。決まった曜日や時間に記事を公開したい場合に便利です。
公開は、記事をすぐにサイト上へ表示する操作です。公開ボタンを押す前に、タイトル、本文、画像、カテゴリー、パーマリンク、プレビューを確認しましょう。
6. グーテンベルクの便利機能と時短テクニック
グーテンベルクには、記事作成を効率化する機能が多く用意されています。基本操作に慣れてきたら、ショートカットキー、スラッシュ入力、ブロックパターン、リストビューなどを活用しましょう。
6-1. ショートカットキーでブロックを素早く操作する
ショートカットキーを使うと、マウス操作を減らして効率よく編集できます。たとえば、コピー、貼り付け、元に戻す、やり直しなどは一般的なショートカットと同じ感覚で使えます。
ブロックエディター独自のショートカットもあります。編集画面のメニューからキーボードショートカット一覧を確認できるため、よく使う操作から覚えていきましょう。
すべてを暗記する必要はありません。まずは、元に戻す、保存、見出し作成、ブロック検索など、使用頻度の高いものだけで十分です。
6-2. 「/」入力でブロックをすぐ呼び出す
本文中で「/」を入力すると、ブロックを素早く検索して追加できます。たとえば、「/画像」「/見出し」「/リスト」「/テーブル」と入力すれば、目的のブロックをすぐに呼び出せます。
この方法を覚えると、毎回「＋」ボタンをクリックしてブロックを探す必要がなくなります。記事作成のスピードが上がるため、グーテンベルクを使うならぜひ覚えておきたい操作です。
6-3. ブロックパターンを活用する
ブロックパターンは、あらかじめ用意されたブロックの組み合わせです。デザイン済みのレイアウトを挿入できるため、初心者でも整ったページを作りやすくなります。
たとえば、プロフィール欄、サービス紹介、料金表、CTA、よくある質問などのパターンを使えば、一からレイアウトを作る手間を省けます。
テーマによって利用できるパターンは異なります。ブロックエディター対応テーマを使うと、豊富なパターンを活用できることがあります。
6-4. 再利用ブロック・同期パターンを使う
何度も使うパーツは、同期パターンとして保存すると便利です。たとえば、記事下の問い合わせ案内、プロフィール、キャンペーン告知、メルマガ登録ボックスなどです。
同期パターンを使うと、1か所を編集するだけで、同じパターンを使っているすべての場所に変更が反映されます。全記事共通の案内文を変更したいときに非常に便利です。
ただし、記事ごとに内容を変えたい部分まで同期パターンにしてしまうと、意図せず他の記事の内容まで変わってしまうことがあります。共通で使うものは同期、個別に編集するものは非同期と使い分けましょう。
6-5. リストビューで記事全体の構造を確認する
リストビューを使うと、記事内のブロックを一覧で確認できます。長い記事や複雑なレイアウトを編集するときに役立ちます。
特に、グループ、カラム、メディアとテキストなどの入れ子構造では、本文画面上で目的のブロックを正確に選択しにくいことがあります。リストビューから選択すれば、どのブロックを編集しているのかがわかりやすくなります。
ブロックの順番を入れ替えるときにも、リストビューは便利です。記事全体の構造を確認しながら移動できるため、編集ミスを減らせます。
6-6. ドキュメント概観で文字数や見出しを確認する
ドキュメント概観では、記事の文字数、段落数、ブロック数、見出し構造などを確認できます。長文記事を書くときや、SEOを意識した記事を作るときに役立ちます。
見出しの階層が崩れている場合、ドキュメント概観で気づきやすくなります。h2の下にh3が正しく配置されているか、見出しの順番が不自然でないかを確認しましょう。
文字数だけを増やすことがSEOに直結するわけではありませんが、検索意図に十分答えられているかを確認する目安になります。
6-7. テンプレート編集とサイトエディターの違い
テンプレート編集は、投稿や固定ページの表示テンプレートを編集する機能です。サイトエディターは、対応テーマでサイト全体のデザインやテンプレートを編集する機能です。
投稿本文を編集しているつもりでテンプレートを変更してしまうと、複数ページの表示に影響する場合があります。初心者は、通常の記事編集とテンプレート編集を混同しないように注意しましょう。
サイトエディターは便利ですが、テーマ全体のデザインに関わるため、変更前にバックアップを取ることをおすすめします。
7. 初心者がグーテンベルクでつまずきやすいポイントと解決策
グーテンベルクは便利な反面、初心者がつまずきやすいポイントもあります。多くの場合、原因はブロックの仕組みや画面構成に慣れていないことです。よくあるトラブルと解決策を知っておくと、安心して記事作成を進められます。
7-1. 改行・段落・スペースの違いがわからない
グーテンベルクでは、Enterキーを押すと新しい段落ブロックが作成されます。単なる改行をしたい場合は、Shiftキーを押しながらEnterキーを押します。
文章と文章の間を空けたいからといって、空の段落やスペースを大量に入れるのはおすすめしません。表示崩れやスマホでの読みにくさにつながる場合があります。
余白を調整したい場合は、テーマの余白設定やスペーサーブロックを必要最小限で使いましょう。
7-2. 画像のサイズや配置がうまくいかない
画像が大きすぎる、小さすぎる、中央に配置できないといった問題はよくあります。まず、画像ブロックを選択し、ブロックツールバーや右側の設定サイドバーを確認しましょう。
画像サイズは、アップロード前の元画像サイズにも影響されます。極端に大きい画像をそのまま使うと、ページ表示速度が遅くなる可能性があります。
また、テーマによっては「幅広」や「全幅」に対応していない場合があります。思った通りに配置できないときは、テーマの仕様も確認しましょう。
7-3. ブロックが選択できない・移動できない
ブロックがうまく選択できないときは、リストビューを使うのが有効です。特に、カラムやグループの中にあるブロックは、本文画面上で親ブロックを選択しにくいことがあります。
リストビューを開くと、記事内のブロック構造が階層で表示されます。目的のブロックをクリックすれば、正確に選択できます。
移動できない場合は、ロックされているブロックやテンプレート側のブロックを編集しようとしている可能性もあります。ブロックのオプションメニューやテーマの設定を確認しましょう。
7-4. 表示が崩れる原因と確認方法
表示崩れの原因は、テーマ、プラグイン、追加CSS、ブロック設定、画像サイズ、キャッシュなどさまざまです。まずは、編集画面だけで判断せず、プレビュー画面で実際の表示を確認しましょう。
特定のブロックだけ崩れている場合は、そのブロックの設定を見直します。全体的に崩れている場合は、テーマやプラグインの影響も考えられます。
直前に追加したプラグインやCSSが原因になることもあります。問題が起きたタイミングを確認し、一つずつ原因を切り分けることが大切です。
7-5. 見出しデザインが反映されないときの対処法
見出しブロックを使っているのにデザインが反映されない場合、テーマ側のCSSが影響している可能性があります。WordPressの見出しデザインは、使用中のテーマによって大きく変わります。
また、見出しに見えるデザインを作りたいだけで、段落ブロックを太字や大きな文字にしている場合、SEO上の見出しとしては認識されません。記事構造として見出しを使いたい場合は、必ず見出しブロックを使いましょう。
デザインを変更したい場合は、テーマのカスタマイザー、ブロック設定、追加CSS、装飾系プラグインなどを確認します。
7-6. 使いたいブロックが見つからないときの探し方
使いたいブロックが見つからない場合は、まずブロック追加画面の検索欄でキーワードを入力します。「画像」「リスト」「表」「ボタン」など、日本語で検索できる場合もあります。
「/」入力でもブロックを検索できます。目的のブロック名がわからない場合は、似た機能のキーワードを入力して探してみましょう。
また、テーマやプラグインによって追加されるブロックもあります。装飾ボックス、吹き出し、ランキング、FAQなどは、標準ブロックではなくテーマやプラグイン独自のブロックとして提供されることがあります。
7-7. クラシックエディターに戻したい場合の注意点
グーテンベルクが使いにくい場合、クラシックエディターに戻すこともできます。ただし、今後のWordPress運用を考えると、ブロックエディターに慣れておくメリットは大きいです。
クラシックエディターに戻すと、ブロックを前提としたテーマ機能やパターン、サイトエディターの活用が制限される場合があります。また、複数人でサイトを運営している場合、編集環境が混在すると管理が複雑になることもあります。
どうしても戻したい場合は、既存記事への影響や使用中テーマ・プラグインとの相性を確認してから導入しましょう。
8. グーテンベルクを使いやすくするおすすめ設定・プラグイン
グーテンベルクは標準機能だけでも多くのことができますが、テーマやプラグインを組み合わせることでさらに使いやすくなります。ただし、便利そうだからといってプラグインを入れすぎると、管理が難しくなったり表示速度に影響したりすることがあります。
8-1. ブロックエディター対応テーマを選ぶ
グーテンベルクを快適に使うには、ブロックエディターに対応したテーマを選ぶことが重要です。対応テーマでは、ブロックの幅、色、余白、見出しデザイン、ボタンデザインなどが整いやすくなっています。
特に、サイトエディターやブロックパターンを活用したい場合は、ブロックテーマやフルサイト編集対応テーマを検討するとよいでしょう。
初心者は、デザインの自由度だけでなく、マニュアルのわかりやすさ、更新頻度、表示速度、SEO設定のしやすさも確認してテーマを選ぶのがおすすめです。
8-2. よく使うブロックを増やせるプラグイン
グーテンベルク用のブロック追加プラグインを使うと、標準にはない便利なブロックを追加できます。たとえば、FAQ、吹き出し、タブ、アコーディオン、評価ボックス、プロフィール、料金表などです。
ブログ運営では、読者の理解を助ける装飾ブロックがあると便利です。ただし、プラグイン独自のブロックを使いすぎると、将来そのプラグインを停止したときに表示が崩れる可能性があります。
長く使う予定のプラグインを選び、必要なブロックだけを使うようにしましょう。
8-3. 装飾・吹き出し・ボックスを追加できるプラグイン
ブログ記事では、補足、注意点、ポイント、会話形式の説明などを見やすくする装飾が役立ちます。吹き出しブロックやボックスデザインを使えば、文章だけの記事よりも読みやすくなります。
ただし、装飾を多用しすぎると、かえって読みにくくなることがあります。重要な箇所、読者に注目してほしい箇所、比較や注意喚起に絞って使いましょう。
装飾はデザイン性だけでなく、読みやすさを高めるために使うことが大切です。
8-4. SEO対策に役立つプラグイン
SEO対策を効率化するには、SEOプラグインの活用も有効です。タイトルタグ、メタディスクリプション、XMLサイトマップ、noindex設定、構造化データなどを管理しやすくなります。
ただし、SEOプラグインを入れたからといって自動的に上位表示されるわけではありません。重要なのは、検索意図に合った記事構成、読みやすい本文、適切な内部リンク、画像の最適化、ページ表示速度などです。
SEOプラグインは、記事品質を高めるための補助ツールとして使いましょう。
8-5. プラグインを入れすぎるデメリット
プラグインを入れすぎると、サイトの表示速度が遅くなる、管理画面が重くなる、プラグイン同士が干渉する、セキュリティリスクが増えるなどのデメリットがあります。
また、似た機能のプラグインを複数入れると、設定が重複してトラブルの原因になることもあります。たとえば、SEOプラグイン、キャッシュプラグイン、画像最適化プラグインなどは、設定内容を理解して使うことが重要です。
初心者は、必要最小限のプラグインから始め、足りない機能だけを追加していくのがおすすめです。
8-6. 初心者におすすめの最小構成
初心者におすすめなのは、ブロックエディター対応テーマ、SEOプラグイン、セキュリティ対策プラグイン、バックアッププラグイン、画像圧縮プラグイン程度の最小構成です。
装飾系プラグインやブロック追加プラグインは、標準ブロックで足りないと感じてから導入しても遅くありません。
まずは、WordPress本体、テーマ、最低限のプラグインを安定して使える状態に整え、そのうえでグーテンベルクの基本操作を覚えていきましょう。
9. グーテンベルクでSEOに強い記事を作るコツ
グーテンベルクは、SEOに強い記事構成を作るうえでも役立ちます。見出し、段落、画像、内部リンク、表、リストなどを整理しやすいため、読者にも検索エンジンにも伝わりやすい記事を作成できます。
9-1. 検索意図に合わせて見出しを設計する
SEOで重要なのは、検索キーワードを入れることだけではありません。読者がそのキーワードで何を知りたいのかを考え、見出し構成に反映することが大切です。
たとえば、「ワードプレス グーテンベルク」で検索する人は、グーテンベルクの意味、基本操作、クラシックエディターとの違い、使い方、トラブル対処法などを知りたい可能性があります。
そのため、見出しには読者の疑問に答える内容を順番に配置しましょう。検索意図に合った構成は、読者の満足度を高め、結果的にSEOにも良い影響を与えます。
9-2. h2・h3を正しい順番で使う
見出しは、h2、h3、h4の順番を意識して使います。h2は大きな章、h3はその中の詳しい項目、h4はさらに細かい補足です。
デザイン目的で見出しレベルを選ぶのは避けましょう。たとえば、h3のデザインが好きだからといって、h2を使うべき箇所にh3を使うと、記事構造がわかりにくくなります。
見出しの見た目を変えたい場合は、テーマ設定やCSSで調整し、構造としての見出し階層は正しく保つことが大切です。
9-3. 読みやすい段落と余白を意識する
SEOに強い記事は、検索エンジンだけでなく読者にとって読みやすい記事です。長い文章が詰まっていると、読者は途中で離脱しやすくなります。
段落は短めに区切り、必要に応じてリストや表を使いましょう。スマホで読んだときに、画面いっぱいに文字が詰まって見えないようにすることが大切です。
グーテンベルクでは、段落、リスト、見出し、画像をブロック単位で整理できるため、読みやすい記事構成を作りやすくなります。
9-4. 画像のalt属性を設定する
画像を使う場合は、alt属性を設定しましょう。alt属性は、画像が表示されないときの代替テキストであり、検索エンジンやスクリーンリーダーにも画像内容を伝える役割があります。
alt属性には、画像の内容を具体的かつ簡潔に記述します。たとえば、グーテンベルクのブロック追加画面の画像なら、「WordPressグーテンベルクでブロックを追加する画面」のように書きます。
キーワードを不自然に詰め込む必要はありません。画像の内容を正確に説明することを優先しましょう。
9-5. 内部リンクを自然に配置する
内部リンクは、同じサイト内の関連記事へ読者を案内するリンクです。グーテンベルクでは、段落内のテキストリンクやボタンブロックを使って内部リンクを設置できます。
たとえば、グーテンベルクの記事から「WordPressの初期設定」「おすすめテーマ」「SEO対策」「ブログの書き方」などの関連記事へリンクすると、読者が次に知りたい情報へ移動しやすくなります。
ただし、関係のない記事へ無理にリンクするのは逆効果です。読者の流れに沿って、自然な位置に内部リンクを配置しましょう。
9-6. スマホ表示で読みやすさを確認する
多くの読者はスマホで記事を読みます。そのため、PC画面だけでなくスマホ表示での読みやすさを確認することが重要です。
カラム、テーブル、画像、ボタン、余白などは、スマホで見たときに印象が大きく変わることがあります。特に、横幅の広い表や横並びレイアウトは注意が必要です。
公開前にプレビューでスマホ表示を確認し、文字が小さすぎないか、画像がはみ出していないか、ボタンが押しやすいかをチェックしましょう。
9-7. 公開後にリライトしやすい構成にする
SEO記事は、公開して終わりではありません。検索順位やアクセス状況を見ながら、定期的にリライトすることが大切です。
グーテンベルクでは、ブロック単位で記事を管理できるため、特定の見出しだけを追加したり、古い情報を差し替えたりしやすいです。
後から修正しやすいように、見出し構成を整理し、関連情報をブロックごとに分けておきましょう。表やリストを使って情報を整理しておくと、更新作業もスムーズになります。
10. グーテンベルクに関するよくある質問
ここでは、WordPressグーテンベルクに関して初心者が疑問に感じやすいポイントをまとめます。
10-1. グーテンベルクは無料で使える？
グーテンベルクは、WordPress本体に標準搭載されているブロックエディターです。WordPressを利用していれば、基本的に追加料金なしで使えます。
ただし、有料テーマや有料プラグインの独自ブロックを使う場合は、別途費用がかかることがあります。標準ブロックだけでも、一般的なブログ記事や固定ページは十分に作成できます。
10-2. グーテンベルクとクラシックエディターはどちらがおすすめ？
これからWordPressを始めるなら、グーテンベルクがおすすめです。現在のWordPressはブロックエディターを前提に機能が拡張されており、テーマやプラグインもグーテンベルク対応が進んでいます。
クラシックエディターはシンプルで使いやすい面もありますが、長期的にWordPressを運営するなら、ブロックエディターに慣れておくほうが安心です。
10-3. グーテンベルクでHTMLやCSSは使える？
グーテンベルクでもHTMLやCSSは使えます。カスタムHTMLブロックを使えばHTMLを入力できますし、テーマや追加CSS機能を使えばデザインを調整できます。
ただし、初心者が無理にHTMLやCSSを使う必要はありません。まずは標準ブロックとテーマ設定で対応し、必要になったときだけコードを使うのがおすすめです。
10-4. ブロックエディターが使いにくいときはどうすればいい？
まずは、段落、見出し、画像、リストの基本ブロックだけに絞って使ってみましょう。すべての機能を一度に覚えようとすると、かえって混乱します。
また、リストビューやスラッシュ入力を覚えると、操作がかなり楽になります。テーマやプラグインの影響で使いにくい場合もあるため、編集画面が重い、表示が崩れるなどの問題がある場合は環境も見直しましょう。
10-5. グーテンベルクで固定ページも作れる？
グーテンベルクでは、投稿だけでなく固定ページも作成できます。会社概要、プロフィール、サービス紹介、お問い合わせ、ランディングページなどもブロックを組み合わせて作成できます。
固定ページでは、カラム、カバー、ボタン、メディアとテキスト、パターンなどを活用すると、ブログ記事よりもデザイン性の高いページを作りやすくなります。
10-6. グーテンベルク対応テーマでないと使えない？
グーテンベルク自体は多くのテーマで使えますが、テーマがブロックエディターに十分対応していない場合、ブロックの幅やデザイン、色設定、余白などが思った通りに反映されないことがあります。
快適に使うなら、ブロックエディター対応を明記しているテーマを選ぶのがおすすめです。特に、サイトエディターやブロックパターンを活用したい場合は、対応テーマかどうかを確認しましょう。
10-7. 初心者はどのブロックから覚えるべき？
初心者は、まず段落ブロック、見出しブロック、画像ブロック、リストブロック、ボタンブロックを覚えれば十分です。この5つを使えるようになれば、基本的なブログ記事は問題なく作成できます。
次に、テーブルブロック、カラムブロック、メディアとテキストブロック、カバーブロックを覚えると、記事や固定ページの表現力が広がります。
最初からすべてのブロックを覚える必要はありません。記事を作りながら、必要なブロックを少しずつ覚えていくのが一番効率的です。
まとめ
WordPressグーテンベルクは、ブロックを組み合わせながら記事や固定ページを作成できる便利な編集画面です。文章、見出し、画像、リスト、表、ボタン、カラムなどをブロック単位で管理できるため、初心者でも見やすい記事を作りやすくなります。
最初はクラシックエディターとの違いや、ブロックの選択・移動・設定に戸惑うかもしれません。しかし、段落、見出し、画像、リストといった基本ブロックから覚えれば、ブログ記事の作成は十分に可能です。
慣れてきたら、カラム、テーブル、カバー、埋め込み、パターン、同期パターンなどを活用することで、作業効率を高めながらデザイン性のあるページを作れるようになります。
また、SEOを意識するなら、見出し階層を正しく使う、検索意図に合った構成にする、読みやすい段落にする、画像のalt属性を設定する、内部リンクを自然に配置することが大切です。グーテンベルクはブロック単位で整理しやすいため、SEO記事の作成や公開後のリライトにも向いています。
WordPressでブログを運営するなら、グーテンベルクの基本操作は必ず身につけておきたいスキルです。まずは基本ブロックを使って1記事作成し、少しずつ便利機能を取り入れながら、自分に合った編集スタイルを作っていきましょう。