WordPressのブロックエディタは、現在私たちがコンテンツを書いたりサイトを編集したりするのに使っているデフォルトのツールだ。2019年に発表され、「グーテンベルグ（Gutenberg）」という愛称で親しまれている。この新しいエディタは、その前に登場した古いクラシックエディタに取って代わるものだ。ブロックエディタは非常にシンプルで直感的に使え、コンテンツの作成やWordPressサイトの編集が可能だ。

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

ブロックエディタに入る前に、Gutenbergブロックエディタと旧来のクラシックエディタの違いを比較し、理解しよう：

ブロックエディタには、基本的な書式設定オプションを備えたテキストエディタボックスがあります。WordPressのブロックエディタを以下に示します：

ご覧のように、WordPressでコンテンツを作成するための2つのエディタはまったく異なるものです。旧来のクラシックエディターは、Microsoft Wordに似た書式設定ボタンを備えたテキストエディタです。新しいエディターは、「ブロック」と呼ばれる異なるアプローチを採用しています（これが「ブロックエディター」という名前の由来です）。

ブロックは、レイアウトを作成するために編集画面に追加できるコンテンツ要素です。投稿やページに追加される各アイテムがブロックです。例えば、段落、画像、動画、ギャラリー、音声、リストなどにブロックを追加することができます。一般的なコンテンツ要素にはすべてブロックがあり、WordPressプラグインによってさらに追加することができます。

WordPressのブロックエディタは、クラシックエディタに比べてどのような利点がありますか？

WordPressのブロックエディタは、投稿やページにさまざまなタイプのコンテンツを簡単に追加する方法を提供します。例えば、以前はクラシックエディターを使ってコンテンツにテーブルを追加したい場合、別のテーブルプラグインが必要でした。ブロックエディターでは、テーブルブロックを追加し、列と行を選択するだけで、コンテンツの追加を開始できます。

コンテンツ要素を上下に移動したり、個々のブロックとして編集したり、リッチメディアコンテンツを簡単に作成することができます。何より、WordPressのブロックエディタは使いやすく、習得しやすい。これは、最初のブログを始めたばかり、またはDIYでビジネスウェブサイトを構築しているすべてのWordPress初心者に大きな利点を提供します。

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

グーテンベルグを使う - WordPressブロックエディタ

ブロックエディターは直感的で柔軟な設計になっています。従来のWordPressエディタとは見た目が異なりますが、従来のエディタでできることはすべてできます。

ブロックエディターを使って新しいブログ記事やページを作成する

通常通り、新しいブログ記事やページの作成を開始します。のWordPress管理者をクリックするだけです。投稿 " 新しい投稿を追加メニューページを作成したい場合は、ページ「新規追加メニュー

これでブロックエディターが起動する。

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

各投稿やページの最初のブロックはタイトルです。マウスを使ってタイトルの下に移動するか、キーボードのTabキーを押してカーソルを下に移動し、書き始めることができます。

デフォルトでは、ユーザーが書き始められるように、次のブロックは段落ブロックになっています。しかし、他のタイプのコンテンツを追加したい場合は簡単です。エディターの左上にある「新しいブロックを追加」ボタン[+]をクリックするか、既存のブロックの下か右にあるこのボタンをクリックするだけで、新しいコンテンツのブロックを追加できます。

このボタンをクリックすると、「ブロックの追加」メニューが表示され、上部に検索バー、下部によく使われるブロックが表示されます。タブをクリックしてブロックのカテゴリーを参照したり、キーワードを入力して特定のブロックを素早く検索することができます。

マウスを使ってボタンをクリックしたくない場合は、キーボードショートカットを使うこともできる。まず / と入力してブロックを検索し、キーボードの Enter キーを押してブロックを挿入します。

新しいエディターでブロックを使う

各ブロックには独自のツールバーがあり、ブロックの上部に表示されます。ツールバーのボタンは、編集するブロックによって変わります。例えば、下のスクリーンショットでは、段落ブロックを開発しており、テキストの整列、太字、斜体、リンクの挿入などの基本的な書式設定ボタンが表示され、3点メニューの下にその他のオプションが用意されています。

ツールバーだけでなく、各ブロックは独自のブロック設定を持つことができ、編集画面の右カラムに表示される。これらの設定は、編集するブロックによって異なります。例えば、「段落」ブロックでは、テキスト、背景、リンクカラー、レイアウトを編集することができます。

ブロックを上下に移動したり、並べ替えたりすることができます。この操作を行いたい場合は、ドラッグ・アンド・ドロップをクリックするか、ブロック・ツールバーの上下ボタンをクリックしてください。

グループと列でブロックを整理する

ブロックエディターには、コンテンツレイアウトを管理・整理する便利なツールも用意されています。キーボードのShiftキーを押しながらブロックをクリックすると、複数のブロックを選択できます。

その後、ツールバーの「ブロックタイプ」ボタンをクリックして、選択したブロックをグループまたは列に変換します。その後、ブロックのグループ全体に、配置や間隔の変更などのスタイルを適用することができます。

ブロックエディターでは、空のグループブロックや列ブロックを追加することもできます。それらは後で他のブロックで埋めることができます。

各カラムには、必要に応じてあらゆるタイプのブロックを追加することができる。これにより、様々なカラムのレイアウトを作成することができます。

Gutenbergでのブロックの保存と再利用

ブロックを使う一番の利点は、保存して再利用できることだ。これは、投稿やページに特定のコンテンツを追加する必要のあるウェブサイト所有者やブロガーにとって特に便利です。各ブロックのツールバーの右上にあるメニューボタンをクリックするだけです。メニューから「パターンの作成」を選択します。

注目してほしい：また、グループや列全体を再利用可能なブロックとして保存することもできます。こうしてセクション全体を保存しておけば、後で必要になったときにすぐに使うことができます。再利用可能なブロックとして保存するには、関連するオプションをクリックするだけで、ウィンドウがポップアップします。このウィンドウで、ブロックに名前を付けて、後で使うときに簡単に見つけられるようにする必要があります。また、ブロックを保存するカテゴリーを選択することもできます。このようにして、再利用可能なブロックをより整理された方法で管理することができます。

次に、作成ボタンをクリックしてパターンを保存します。 WordPressはあなたのパターンとその中のすべてのブロックを保存します。パターンを再利用するには、追加したい投稿やページを編集するだけです。次に、[+] Add Blockボタンをクリックするか、/キーボードショートカットを使います。指定した名前を入力すると、パターンを見つけることができます。

パターン機能を使えば、ウェブサイトのオーナーは、キャッチーなバナーやソーシャルメディアの共有ボタン、バナー広告など、ページレイアウトに共通の要素を簡単に追加することができます。選択したWordPressテーマやプラグインにパターンが付属している場合もありますし、WordPressブロックパターンライブラリで他の人が共有しているパターンを見つけて、気に入ったものがあるかどうかを確認することもできます。

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

WordPressの投稿には、たくさんのメタデータが含まれています。これには、投稿日、カテゴリーやタグ、特徴的な画像などの情報が含まれます。これらのオプションはすべて、エディタ画面の右カラムにきちんと配置されています。

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

WordPressのプラグインは、Block Editor APIを使って編集画面に設定を統合することができます。人気のあるプラグインには、独自のブロックが付属しているものもあります。例えばWPFormsブロックを使ってコンテンツにフォームを追加できる最高のWordPressフォームビルダープラグインです。

他のWordPressプラグインもブロックエディター画面に設定を追加することができます。例えばWordPressのためのオールインワンSEOブロックエディタの下部でSEO設定を編集できるようにする方法：

同様に、オンラインショップを運営するためにWooCommerceを使用している場合、WooCommerceにも独自のブロックがあることに気づくでしょう。これらのブロックを使って、WordPressの投稿やページに商品を追加することができます。

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

基本的に、ブロックエディターは強力で、かつてのクラシックエディターが行っていた仕事を十分にこなすことができる。それだけでなく、このエディターを使うことで、あなたの作業はより速く、よりスムーズになります。さらに素晴らしいのは、コンテンツを簡単にデザインするための豊富なノーコードオプションを提供するなど、さらに多くの新機能が搭載されていることだ。ここでは、必要に応じて簡単に使用するための一般的なブロックをいくつか紹介します。

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

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

また、コンピュータから画像をドラッグ＆ドロップすると、エディタが自動的に画像ブロックを作成します。画像を追加すると、ブロック設定が表示され、代替テキスト、画像解像度サイズ、画像へのリンクなど、画像に関するメタデータを追加できます。

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

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

リンクは、MacではCommand + K、WindowsではCTRL + Kのキーボードショートカットを使っても挿入できます。

3.Gutenbergにフォトギャラリーを追加する

ギャラリーブロックはイメージブロックと同様に機能します。ギャラリーブロックを追加し、画像ファイルをアップロードするか選択してください。

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

クラシックエディターで使用されているすべてのショートコードは、ブロックエディターでも完全に機能します。段落ブロックに直接挿入することもできますし、この目的のために特別なショートコードブロックを使うこともできます。

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

Gutenbergエディタは、いくつかの新しいブロックを導入することで、WordPressの長年のユーザビリティの問題に対処することを約束する。

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

古いエディターでは、多くのユーザーがテキストの横に画像を配置することができませんでした。しかし現在では、メディアとテキストブロックを使ってこのステップを実行することができます。

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

2.ワードプレスの投稿やページにボタンを追加する

ブログの記事やページにボタンを追加するのは、以前のエディタでは本当に頭痛の種だった。ボタン用のショートコードを生成する特別なプラグインを探すか、HTMLモードに切り替えてコードを手動で書くしかなかったかもしれない。幸いなことに、Gutenbergエディターにはボタンブロックが組み込まれており、どんな投稿やページにも簡単に素早くボタンを追加することができるので、もう心配する必要はない！

ボタンにリンクを追加したり、色を変えたりすることができます。

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

もう一つの素晴らしい機能はカバーブロックです。投稿やページにカバー画像や背景色を簡単に追加することができます。カバー画像は一般的に幅が広く、ページの新しい部分やストーリーの始まりの装飾としてよく使われます。特に見た目が美しく、目を引くコンテンツレイアウトを作るのにも役立ちます。

使い方は簡単で、カバーブロックを追加してお気に入りの画像をアップロードするだけ。また、表紙にオーバーレイカラーを追加したり、固定背景画像に設定するオプションもあるので、ページをスクロールする際に超クールな視差効果を作り出すこともできます。

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

WordPressの投稿にテーブルを追加するのは、従来のエディタでは簡単な作業ではなく、プラグインの助けを借りて作成するか、独自のCSSとHTMLコードを記述する必要がありました。ブロックエディターにはデフォルトのテーブルブロックが組み込まれており、投稿やページにテーブルを簡単に素早く追加することができます。このブロックを追加し、挿入したい列と行の数を選択するだけで完了です！

これで、テーブルの行にデータを追加し始めることができます。必要に応じて、いつでも行や列を追加することができます。

5.マルチコラム・コンテンツの作成

クラシック・エディタは、マルチカラムのコンテンツを作成することに関しては本当に強力ではなく、多くの人々に頭痛の種を与えている。ブロックエディターがカラムブロック機能を提供してくれるのは良いことで、簡単な追加で簡単に2カラムの段落ブロックを作ることができ、コンテンツの表現がより多様で柔軟なものになる。

このカラムブロックはとてもフレキシブルだ。最大6列まで追加でき、各列で他のブロックを使うこともできる。

Gutenbergをプロフェッショナルに使うためのヒント

ブロックエディターを使うと、ブロックを追加したり微調整したりするのに実際のコンテンツ作成よりも時間がかかるのではないかと心配になるかもしれません。実は、ブロックエディターは超高速なので、まったく心配いりません。少し慣れれば、何も考えずにあらゆるブロックを追加するのは簡単です。ブロックエディターを使うことで、ワークフローがより速くスムーズになることがすぐにわかると思います。

ここでは、WordPressブロックエディタをより早く使いこなすための、上級者向けのヒントをご紹介します。

1.ブロックツールバーを一番上に移動する

上のスクリーンショットで、各ブロックの上部にツールバーがあることに気づいたかもしれない。このツールバーはエディタの一番上に移動させることができます。画面右上の三点ボタンをクリックし、"Top Toolbar "オプションを選択してください。

2.キーボードショートカットを使う

Gutenbergには、ワークフローをより速く簡単にする便利なショートカットがいくつか用意されています。一つ目は「/」です。を入力し、入力を始めると、エディターがマッチするブロックを表示し、すぐに追加することができます。その他のショートカットについては、画面右上の三点メニューをクリックし、キーボードショートカットを選択してください。

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

3.メディアをドラッグ＆ドロップすると、メディアブロックが自動的に作成される

Gutenbergでは、画面上の任意の場所にファイルをドラッグ＆ドロップすると、自動的にブロックが作成されます。例えば、画像や動画ファイルを1つ置くだけでブロックを作成してくれます。また、複数の画像ファイルを削除してギャラリーブロックを作成することもできます。

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

ブロックエディターを使えば、サードパーティのコンテンツをWordPressのコンテンツに簡単に埋め込むことができます。人気のあるサードパーティ・サービスにはすべてブロックが用意されています。

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

デフォルトの埋め込みオプションは、FacebookとInstagramの埋め込みには適用されませんが、その回避策があります。

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

WordPressのブロックエディタ開発者は、独自のブロックを作成することができます。新しいエディターのためにブロックバンドルを提供する優れたWordPressプラグインがいくつかあります。

いくつか紹介しよう：

1.スペクトラ・ワードプレス・グーテンベルグ・ブロック

Spectra WordPress Gutenbergブロックは、コンテンツにデザイン要素を追加するための高度なブロックを多数含むブロックライブラリです。

人気のアストラWordPressのテーマでスペクトラは、コードを書かずに美しいデザインを作成できる開発者チームによって作られた。

2.PublishPressブロック

パブリッシュプレス・ブロックは、Gutenbergブロックエディタを拡張するための追加ブロックを備えた、もう一つの強力なブロックライブラリです。素敵なレイアウトオプション、スライダー、ボタン、アイコン、イメージギャラリー、マップ、タブ、レコメンド、アコーディオン（アコーディオン）などが含まれています。

3.積み重ね可能 - グーテンベルグ・ブロック

スタッキング可能 - Gutenbergブロックは、あなたのウェブサイトで使用するための美しいデザインのGutenbergブロックのコレクションです。コンテナ、投稿、機能グリッド、アコーディオン、画像ボックス、アイコンリスト、コールトゥアクションのフレーズなどのブロックが含まれています。

このGutenbergチュートリアルが、WordPressブロックエディタの使い方を学ぶ助けになれば幸いです。