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

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

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

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

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

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

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

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

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

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

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

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

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

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

これでブロックエディターが起動(dòng)します。

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

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

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

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

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

新しいエディタでのブロックの使用

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

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

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

グループと列によるブロックの整理

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

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

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

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

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

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

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

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

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

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

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

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

WordPressのプラグインは、ブロックエディタAPIを使って編集畫面に設(shè)定を統(tǒng)合することができます。人気のあるプラグインには獨(dú)自のブロックが付屬しているものもあります。例えばWPFormsブロックを使ってコンテンツにフォームを追加できる最高の WordPress フォームビルダー プラグインです。

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

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

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

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

1.WordPressブロックエディタへの畫像の追加

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

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

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

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

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

3.Gutenbergへのフォトギャラリーの追加

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

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

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

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

Gutenbergエディタは、いくつかの新しいブロックを?qū)毪工毪长趣?、WordPressの長(zhǎng)年のユーザビリティの問題に対処することを約束します。

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

古いエディターでは、多くのユーザーがテキストの橫に畫像を配置することができませんでした。しかし現(xiàn)在では、メディアとテキストブロックを使ってこのステップを?qū)g行することができます。

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

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

ブログの記事やページにボタンを追加するのは、以前のエディタでは本當(dāng)に頭痛の種でした。ボタン用のショートコードを生成するための特別なプラグインを見つけるか、HTMLモードに切り替えてコードを手動(dòng)で書かなければならないかもしれません。幸いなことに、Gutenbergエディタにはボタンブロックが組み込まれており、どんな投稿やページにも簡(jiǎn)単かつ素早くボタンを追加することができます！

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

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

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

使い方は簡(jiǎn)単で、カバーブロックを追加してお?dú)荬巳毪辘萎嬒瘠颔ⅴ氓抓愆`ドするだけです。また、表紙にオーバーレイカラーを追加したり、固定背景畫像に設(shè)定するオプションもあるので、ページをスクロールする際に超クールな視差効果を作り出すこともできます。

4.記事のテーブルの作成

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

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

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

クラシックエディタは、マルチカラムコンテンツを作成することに関しては本當(dāng)に強(qiáng)力ではありません。ブロックエディタがカラムブロック機(jī)能を提供してくれるのは良いことで、簡(jiǎn)単な追加で簡(jiǎn)単に2カラムの段落ブロックを作ることができ、コンテンツの表示をより多様で柔軟なものにします。

この列ブロックはとても柔軟です。最大6列まで追加でき、各列に他のブロックを使用することもできます。

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

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

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

1.ブロックツールバーを上部に移動(dòng)

上のスクリーンショットで、各ブロックの上部にツールバーがあることにお?dú)荬扭猡筏欷蓼护?。このツールバーはエディタの一番上に移動(dòng)させることができます。畫面右上の三點(diǎn)ボタンをクリックし、"Top Toolbar "オプションを選択してください。

2.キーボードショートカットの使用

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

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

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

Gutenbergでは、畫面上の任意の場(chǎng)所にファイルをドラッグ＆ドロップすると、自動(dòng)的にブロックが作成されます。例えば、1つの畫像や動(dòng)畫ファイルを配置すると、ブロックを作成してくれます。また、複數(shù)の畫像ファイルを削除してギャラリーブロックを作成することもできます。

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

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

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

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

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

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

いくつかご紹介しましょう：

1.Spectra WordPress Gutenbergブロック

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

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

2.PublishPressブロック

パブリッシュプレスブロックは、Gutenbergブロックエディタを拡張するための追加ブロックを備えた、もう一つの強(qiáng)力なブロックライブラリです。素?cái)长圣欹ぅⅴΕ去抓伐绁蟆ⅴ攻楗ぅ扩`、ボタン、アイコン、イメージギャラリー、マップ、タブ、レコメンド、アコーディオン（アコーディオン）などが含まれています。

3.スタッキング可能 - Gutenbergブロック

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

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

お問い合わせ
チュートリアルが読めない？無料でお答えします！個(gè)人サイト、中小企業(yè)サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨詢：1025174874
三 Eメール：info@361sale.com
④ 勤務(wù)時(shí)間: 月～金、9:30～18:30、祝日休み