WordPressブロックエディター（Gutenbergチュートリアル）の使い方

WordPressで美しいコンテンツを作成することは、圧倒される必要はありません。

ブロックエディター（Gutenbergとしても知られています）は、ブロックを配置するだけで、技術的なスキルを必要とせずに、ページや投稿の作成を簡単にするために特別に設計されました。

デジタルレゴブロックで組み立てるようなものだと考えてください。テキスト、画像、ボタンなど、コンテンツの各ピースはブロックになり、簡単に移動したりカスタマイズしたりできます。

私たちは早い段階でGutenbergに切り替え、長年使用してきました。これにより、何千ものWPBeginnerユーザーがこのシステムをマスターできるよう支援してきました。

このチュートリアルでは、WordPressのブロックエディターがどのように機能するかを正確にご紹介します。

コーディングの知識なしに、コンテンツ作成をより速く、より楽しくするための簡単なテクニックを学び、ウェブサイトに洗練された外観を与える機能を発見できます。

ブロックエディター（Gutenberg）とクラシックエディターの違いは何ですか？

ブロックエディタに入る前に、Gutenbergブロックエディタと古いクラシックエディタの違いを比較して理解しましょう。

WordPressのクラシックエディターは次のようでした：

いくつかの基本的な書式設定オプションを備えたテキストエディターボックスがありました。機能と視覚的な外観はかなり限定されていました。

WordPressにおけるブロックエディターの外観は以下の通りです:

ご覧のとおり、これらはWordPressでコンテンツを作成するための全く異なる2つのエディターです。

古いクラシックエディターは、Microsoft Wordに似たフォーマットボタンを備えたテキストエディターでした。

新しいエディターは「ブロック」（したがって、ブロックエディターという名前）と呼ばれる異なるアプローチを使用しています。

ブロックは、レイアウトを作成するために編集画面に追加できるコンテンツ要素です。投稿やページに追加する各項目はブロックです。

例えば、段落、画像、動画、ギャラリー、音声、リストなどのブロックを追加できます。一般的なコンテンツ要素のブロックはすべて用意されており、WordPressプラグインでさらに追加することも可能です。

WordPressブロックエディターはクラシックエディターより優れているのはなぜですか？

WordPressのブロックエディターは、投稿やページにさまざまな種類のコンテンツを追加するための簡単な方法を提供します。

例えば、以前はクラシックエディターを使用してコンテンツにテーブルを追加したい場合、個別のテーブルプラグインが必要でした。

ブロックエディタを使用すると、テーブルブロックを簡単に追加し、列と行を選択してコンテンツの追加を開始できます。

コンテンツ要素を上下に移動したり、個別のブロックとして編集したり、メディアリッチなコンテンツを簡単に作成したりできます。

最も重要なのは、WordPressブロックエディターは使いやすく学習しやすいということです。

これは、最初のブログを始めたばかりのWordPress初心者や、DIYのビジネスウェブサイトを構築しているすべての人に計り知れない利点をもたらします。

それでは、WordPressのブロックエディターを使用して、プロのように素晴らしいコンテンツを作成する方法を見ていきましょう。

このGutenbergチュートリアルでは、以下の内容を扱います:

• Gutenberg – WordPressブロックエディターの使用
• ブロックエディターを使用した新しいブログ投稿またはページの作成
• ブロックエディターにブロックを追加する方法
• 新しいエディターでブロックを操作する
• ブロックのグループ化と列
• 同期パターン（再利用可能なブロック）を使用してコンテンツを保存および再利用する
• Gutenbergブロックエディターでの公開と管理オプション
• Gutenbergのプラグイン設定
• ブロックエディターで一般的なブロックを追加する
• ブロックエディターで他のコンテンツブロックを探る
• Gutenbergをプロのように使用するためのボーナスのヒント
• WordPressのGutenbergブロックエディタにブロックを追加する方法
• Gutenbergに関するFAQ – WordPressのブロックエディター
• 動画チュートリアル
• ボーナスリソース

準備はいいですか？始めましょう。

Gutenberg – WordPressブロックエディターの使用

ブロックエディターは直感的で柔軟になるように設計されています。古いWordPressエディターとは見た目が異なりますが、クラシックエディターでできたことはすべて実行できます。

まず、クラシックエディターで行っていた基本的なことと、ブロックエディターでそれらがどのように行われるかをカバーすることから始めましょう。

ブロックエディターを使用した新しいブログ投稿またはページの作成

新しいブログ投稿またはページは、通常どおり作成を開始します。WordPress管理画面で、投稿 » 新規追加メニューをクリックするだけです。

ページを作成する場合は、代わりにページ » 新規追加メニューに移動してください。

これにより、ブロックエディターが起動します。

ブロックエディターにブロックを追加する方法

すべての投稿またはページの最初のブロックはタイトルです。

タイトルの下にマウスを移動するか、キーボードのTabキーを押してカーソルを下に進め、書き込みを開始できます。

デフォルトでは、次のブロックは段落ブロックです。これにより、ユーザーはすぐに書き始めることができます。

ただし、何か別のものを追加したい場合は、エディターの左上隅にある追加ブロックボタン[+]をクリックするか、既存のブロックの下、またはブロックの右側にクリックします。

ボタンをクリックすると、上部に検索バー、下部によく使われるブロックが表示される「ブロック追加」メニューが表示されます。

タブをクリックしてブロックカテゴリを閲覧したり、キーワードを入力して特定のブロックをすばやく検索したりできます。

ボタンをクリックするためにマウスを使いたくない場合は、キーボードショートカットを使用することもできます。

まず、/を入力してブロックを検索し、キーボードのEnterキーを押して挿入します。

新しいエディターでブロックを操作する

各ブロックの上部にはツールバーが表示されます。ツールバーのボタンは、編集中のブロックによって異なります。

たとえば、以下のスクリーンショットでは、テキストの配置、太字、斜体、リンクの挿入などの基本的な書式設定ボタンが表示され、3点メニューからさらにオプションが利用できる段落ブロックを扱っています。

ツールバーに加えて、各ブロックには独自のブロック設定があり、編集画面の右側の列に表示されます。

これらの設定は、編集しているブロックによって異なります。たとえば、段落ブロックでは、テキスト、背景、リンクの色、およびタイポグラフィを編集できます。

ブロックを上下に移動して並べ替えることができます。

これを行いたい場合は、ドラッグアンドドロップをクリックするか、ブロックツールバーの上下ボタンをクリックしてください。

関連: WordPressでブロックを削除する方法に関するガイドをご覧ください。

ブロックのグループ化と列

ブロックエディターには、コンテンツレイアウトを管理および整理するための便利なツールも付属しています。

キーボードのShiftキーを押しながらクリックすると、複数のブロックを選択できます。

その後、ツールバーのブロックタイプボタンをクリックして、選択したブロックをグループまたはカラムに変換します。

その後、配置や間隔の変更など、スタイルをグループブロック全体に適用できます。

ブロックエディターでは、空のグループブロックまたはカラムブロックを追加することもできます。

その後、他のブロックで埋めることができます。

必要に応じて、各列に任意の種類のブロックを追加できます。

これにより、さまざまなユースケースに対応する美しいレイアウトを作成できます。

同期パターン（再利用可能なブロック）を使用してコンテンツを保存および再利用する

ブロックエディターの最も強力な機能の1つは、サイト全体でコンテンツを保存して再利用できることです。これは、以前はリユーザブルブロックとして知られていた同期パターンを使用して行われます。

同期パターンとは、複数の投稿やページで使用できるブロック、またはブロックのグループです。

最も良い点は、パターンを編集すると、使用したすべての場所で自動的に更新されることです。これは、行動喚起ボックス、著者プロフィール、連絡先情報など、一貫性を保つ必要があるコンテンツに最適です。

保存したいブロックを選択するだけです。次に、ブロックツールバーの3点ドットメニューアイコンをクリックし、「パターンを作成」オプションを選択します。

ポップアップウィンドウが表示されます。ここで、パターンに名前を付け、整理のためにカテゴリに割り当てることができます。

最も重要なのは、「同期済み」オプションがオンになっていることを確認することです。 これにより、パターンが一度にすべて更新されます。

「作成」をクリックすると、新しい同期パターンが保存されます。

他の投稿やページで使用するには、ブロックインサーター（+）ボタンをクリックして「パターン」タブの下で検索するか、名前で検索するだけです。

パターンを使用すると、サイトオーナーは、行動喚起、ソーシャルメディアボタン、バナーなどの一般的に使用される要素をレイアウトに簡単に追加できます。

WordPressテーマやプラグインには独自のパターンが含まれている場合もありますし、WordPressのブロックパターンライブラリで他の人が作成したパターンを見つけることもできます。

さらにヘルプが必要な場合は、WordPressブロックパターンの見つけ方と使い方に関する初心者向けガイドで、別のガイドを用意しています。WordPressブロックパターンの見つけ方と使い方。

Gutenbergブロックエディターでの公開と管理オプション

WordPressの各投稿には、多くのメタデータが含まれています。これには、公開日、カテゴリとタグ、アイキャッチ画像などの情報が含まれます。

これらのオプションはすべて、エディター画面の右側の列にきれいに配置されています。

Gutenbergのプラグインオプション

WordPressプラグインは、ブロックエディターのAPIを利用して、編集画面内に設定を統合できます。

一部の人気のプラグインには、独自のブロックが付属しています。

例えば、最高のWordPress問い合わせフォームプラグインであるWPFormsでは、ブロックを使用してコンテンツにフォームを追加できます。

他のWordPressプラグインも、ブロックエディター画面に設定を追加する場合があります。

例えば、WordPress用オールインワンSEOでブロックエディタの下部にあるSEO設定を編集する方法は次のとおりです。

同様に、WooCommerceを使用してオンラインストアを運営している場合、それ自体にも独自のブロックがあることに気づくでしょう。

これらのブロックを使用すると、WordPressの投稿やページに商品を簡単に追加できます。

ブロックエディターで一般的なブロックを追加する

ブロックエディターは、古いクラシックエディターができたことはすべてできます。

ただし、以前よりも迅速かつエレガントに作業できるようになります。さらに、多くのノーコードオプションでコンテンツをスタイル設定できるなど、さらに多くのことができます。

ここで利用できる一般的なブロックをいくつかご紹介します。

1. WordPressブロックエディターに画像を追加する

WordPressブロックエディターには、すぐに使用できる画像ブロックがあります。ブロックを追加してから、画像ファイルをアップロードするか、メディアライブラリから選択するだけです。

コンピューターから画像をドラッグアンドドロップすることもできます。エディターが自動的に画像ブロックを作成します。

画像を追加すると、ブロック設定が表示され、画像のaltテキスト、画像解像度サイズ、画像へのリンク追加などのメタデータを追加できるようになります。

詳細については、WordPressで画像を正しく追加する方法に関するチュートリアルをご覧ください。WordPressで画像を正しく追加する方法。

2. ブロックエディターでリンクを追加する

ブロックエディターには、テキストを追加できるいくつかのブロックが用意されています。最も一般的に使用されるのは段落ブロックで、ツールバーにリンク挿入ボタンがあります。

その他、一般的に使用されるテキストブロックにも、ツールバーにリンクボタンがあります。

キーボードショートカットを使用してリンクを挿入することもできます。Macの場合はCommand + K、Windowsコンピューターの場合はCTRL + Kです。

3. Gutenbergで画像ギャラリーを追加する

ギャラリーブロックは画像ブロックのように機能します。追加してから画像ファイルをアップロードまたは選択します。

詳細については、WordPressで画像ギャラリーを作成する方法に関するガイドをご覧ください。

4. Gutenbergを使用してWordPress投稿にショートコードを追加する

すべてのショートコードは、クラシックエディターで機能したのと同じように機能します。段落ブロックに追加するか、ショートコードブロックを使用できます。

ブロックエディターで他のコンテンツブロックを探る

Gutenbergエディターは、新しいブロックを導入することで、WordPressにおける長年のユーザビリティの問題を解決することを約束しました。

以下は、ユーザーが非常に役立つと感じるであろうお気に入りのいくつかです。

1. WordPressでテキストの横に画像を追加する方法

以前のエディターでは、テキストの横に画像を配置できなかったユーザーが多くいました。メディア＆テキストブロックを使用すると、それが可能になります。

このシンプルなブロックは、2つのブロックが横並びに配置されており、テキストの横に簡単に画像を追加できます。

2. WordPressの投稿とページにボタンを追加する

旧エディターのもう一つの煩わしさとして、ブログ投稿やページにボタンを追加することがありました。ボタンのショートコードを作成するプラグインを使用するか、HTMLモードに切り替えてコードを記述する必要がありました。

幸いなことに、Gutenbergにはボタンブロックがあり、任意の投稿やページにボタンをすばやく追加できます。

ボタンにリンクを追加したり、色を変更したりできます。詳細については、WordPressにコールトゥアクションボタンを簡単に追加する方法に関する記事をご覧ください。

3.ブログ投稿やランディングページに美しいカバー画像を追加する

試してみたいもう1つのクールな機能は、カバーブロックです。これにより、投稿やページにカバー画像やカラー背景カバーを追加できます。

カバー画像は、ページ上の新しいセクションやストーリーの始まりによく使用される、より幅の広い画像です。美しく、魅力的なコンテンツレイアウトを作成できます。

カバーブロックを追加して、使用したい画像をアップロードするだけです。カバーのオーバーレイカラーを選択したり、固定の背景画像にしたりして、ユーザーがページをスクロールしたときにパララックス効果を作成できます。

詳細については、WordPressのカバー画像とアイキャッチ画像の違いに関する記事をご覧ください。

4. 記事内にテーブルを作成する

クラシックエディターには、WordPressの投稿にテーブルを追加するボタンがありませんでした。プラグインを使用するか、カスタムCSSとHTMLを記述してテーブルを作成する必要がありました。

現在、ブロックエディターにはデフォルトのテーブルブロックが搭載されており、投稿やページにテーブルを追加するのが非常に簡単になりました。ブロックを追加して、挿入したい列数と行数を選択するだけです。

これで、テーブル行にデータを追加できるようになりました。必要に応じていつでも行や列を追加でき、2つの基本的なスタイルオプションが利用可能です。

5. 複数列のコンテンツを作成する

複数列のコンテンツ作成は、クラシックエディターでは全く対応できなかった別の問題でした。

幸いなことに、ブロックエディターでは、2つの段落ブロックの列を追加する列ブロックを追加できます。

このカラムブロックは非常に柔軟です。1行に最大6つのカラムを追加でき、各カラム内に他のブロックを使用することもできます。

Gutenbergをプロのように使用するためのボーナスのヒント

ブロックエディターを見ると、実際のコンテンツを作成するよりもブロックの追加や調整に時間を費やすのではないかと疑問に思うかもしれません。

ブロックエディターは非常に高速で、数分間の基本的な使用でも、考えずにすぐにブロックを追加できるようになります。

このアプローチでワークフローがどれほど速くなるか、すぐに実感できるでしょう。

WordPressブロックエディターをさらに速く使うための、パワーユーザー向けの追加ヒントをいくつかご紹介します。

1. ブロックツールバーを上部に移動

上記のスクリーンショットで、すべてのブロックの上部にツールバーが表示されていることに気づいたかもしれません。このツールバーをエディターの上部に移動できます。

「トップツールバー」オプションにアクセスするには、画面右上にある3つの点のボタンをクリックしてください。

2. キーボードショートカットを使用する

Gutenbergには、ワークフローをさらに迅速かつ簡単にできる便利なショートカットがいくつか付属しています。すぐに使い始めるべき最初のものは / です。

/を入力し、入力を開始すると、エディターが一致するブロックを表示し、すぐに挿入できます。

その他のショートカットについては、画面右上にある3点メニューをクリックし、「キーボードショートカット」を選択してください。

これにより、使用できるすべてのキーボードショートカットのリストが表示されるポップアップが表示されます。リストには、WindowsユーザーとMacユーザーで異なるショートカットが表示されます。

3. メディアをドラッグアンドドロップしてメディアブロックを自動作成

Gutenbergを使用すると、ファイルを画面上のどこにでもドラッグアンドドロップでき、自動的にブロックが作成されます。

例えば、単一の画像またはビデオファイルをドロップすると、ブロックが自動的に作成されます。または、複数の画像ファイルをドロップしてギャラリーブロックを作成することもできます。

4. YouTube、Twitter、Vimeo、その他の埋め込みコンテンツの追加

ブロックエディターを使用すると、サードパーティのコンテンツをWordPressコンテンツに簡単に埋め込むことができます。すべての一般的なサードパーティサービス用のブロックがあります。

ただし、埋め込みURLをいつでもコピー＆ペーストすれば、自動的にブロックが作成されます。

例えば、YouTube動画のURLを追加すると、自動的にYouTube埋め込みブロックが作成され、動画が表示されます。

URLを直接貼り付けても、FacebookやInstagramの投稿では機能しませんが、回避策は簡単です。

Smash Balloon Social Photo Feed を使用して「oEmbeds」機能を有効にし、URL を「埋め込み」ブロックに貼り付けるだけです。

詳細については、WordPressでFacebookおよびInstagramの投稿を埋め込む方法に関する記事をご覧ください。WordPressでFacebookおよびInstagramの投稿を埋め込む方法。

WordPressのGutenbergブロックエディタにブロックを追加する方法

WordPressのブロックエディターにより、開発者は独自のブロックを作成できます。優れたWordPressプラグインの中には、新しいエディター用のブロックバンドルを提供しているものもあります。

いくつかご紹介します。

1. Spectra WordPress Gutenberg Blocks

Spectra WordPress Gutenberg Blocksは、コンテンツにさらに多くのデザイン要素を追加するのに役立つ多くの高度なブロックを備えたブロックライブラリです。

人気のAstra WordPressテーマの開発者が作成したSpectraは、コードを書かずに美しいデザインを作成するのに役立ちます。

詳細については、当社の完全なSpectraレビューをご覧ください。

2. PublishPress Blocks

PublishPress Blocksは、Gutenbergブロックエディターを拡張するための追加ブロックを備えた、もう1つの強力なブロックライブラリです。

美しいレイアウトオプション、スライダー、ボタン、アイコン、画像ギャラリー、マップ、タブ、お客様の声、アコーディオンなどが含まれています。

3. スタッカブル – Gutenbergブロック

Stackable – Gutenberg Blocks は、ウェブサイトで使用できる美しくデザインされたGutenbergブロックのコレクションです。コンテナ、投稿、フィーチャーグリッド、アコーディオン、画像ボックス、アイコンリスト、コールトゥアクションなどのブロックが含まれています。

その他のオプションについては、WordPress Gutenbergブロックプラグインのベストの完全なリストをご覧ください。

Gutenbergに関するFAQ – WordPressのブロックエディター

GutenbergがデフォルトのWordPressエディターになって以来、その使い方について多くの質問を受けています。ここでは、ブロックエディターに関する最もよくある質問とその回答をご紹介します。

1. ブロックエディターでの古い投稿やページはどうなりますか？まだ編集できますか？

ブロックエディターは、古い投稿やページには影響しません。それらを編集することは引き続き可能で、ブロックエディターはそれらをクラシックエディターを含むブロックとして自動的に開きます。

古いエディター内で編集することも、古い記事をブロックに変換してブロックエディターを使用することもできます。

2.古いエディターを使い続けることはできますか？

はい、古いエディターを引き続き使用できます。Classic Editor プラグインをインストールして有効化するだけです。

有効化すると、ブロックエディターが無効になり、クラシックエディターを引き続き使用できるようになります。

Classic Editorプラグインは、当面の間公式にサポートされます。しかし、WordPressでコンテンツを作成する最新の方法に慣れるために、今すぐブロックエディターの使用を開始することを強くお勧めします。

7. 使用中のプラグインやテーマでブロックエディターが機能しない場合はどうすればよいですか？

Project Gutenbergは開発に長い時間がかかったため、プラグインやテーマの作成者はコードの互換性テストに十分な時間をかけることができました。

ただし、一部のプラグインやテーマがブロックエディターとうまく連携しない可能性は依然としてあります。その場合は、Classic Editorプラグインをインストールするか、開発者にGutenbergサポートの追加を依頼するか、代替のプラグインまたはテーマを見つけることができます。

4. Gutenbergのヒントやコツについてもっと学ぶにはどうすればよいですか？

WPBeginnerは、WordPressのブロックエディタについて学ぶのに最適な場所です。私たちはインターネット上で最大のWordPressリソースサイトです。

ブロックエディターを使いこなすための新しい記事を公開し、古いリソースを更新していきます。

その間、ご不明な点がございましたら、コメントを残していただくか、ウェブサイトのお問い合わせフォームをご利用ください。

5. Gutenbergの問題に遭遇しましたか？

WordPressブロックエディターで問題が発生している場合は、ユーザーが遭遇する一般的なブロックエディターの問題とその解決方法をすべてリストアップした、簡単なトラブルシューティングガイドを作成しました。

動画チュートリアル

文章での説明よりも動画での説明がお好みであれば、こちらのビデオチュートリアルをご覧ください。

WPBeginnerを購読する

ボーナスリソース

ブロックエディターをより効率的に使用するのに役立つ追加リソースを以下に示します。

• WordPressブロックエディターとページビルダー：違いは何ですか？
• カスタム WordPress ブロックを簡単に作成する方法
• WordPress Gutenbergブロックのインポート/エクスポート方法（2つのステップ）
• WordPressウィジェットとブロックの違いとは？（解説）
• WordPressのフルサイト編集の完全初心者ガイド
• WordPressでのフルサイト編集に最適なブロックテーマ
• WordPress コンテンツエディターを使いこなすためのヒント

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。