Gutenbergエディターでよく使われるブロックタイプとその機能解説

グーテンベルク・エディターこれは、"塊土" (ブロック) を使用してウェブコンテンツとレイアウトを作成します。高い柔軟性とカスタマイズ性.シンプルなブログ記事の作成であれ、複雑なページレイアウトのデザインであれ、Gutenbergエディタはユーザーが簡単に目標を達成できるようサポートしてくれます。この記事では、Gutenbergエディタで様々なブロックを追加、使用、カスタマイズする方法と、利用可能なブロックの種類について詳しく説明します。

1.Gutenbergエディタでのブロックの追加

Gutenbergエディタでは、ブロックはページや投稿のコンテンツを作成するための基本要素です。各ブロックはコンテンツ要素を表します。段落や写真など、ボタンなどです。Gutenbergでブロックを追加する手順は以下の通りです：

投稿/ページエディターを開きます。

• WordPressのバックエンドにログインします。
• 左のメニューから "カード「またはウェブページ".
• クリック "新しい投稿を追加「またはコンパイラ"既存の投稿/ページ

ブロックの追加

• プラスアイコンの使用エディターのインターフェイスで、ページまたは投稿のコンテンツエリアの上部をクリックします。+"アイコンをクリックすると、ブロックインサーターパネルが表示され、さまざまな種類のブロックを参照・選択することができます。

• スラッシュコマンドの使用スラッシュ（"/")、ブロック名を入力すると、エディタに利用可能なブロックのクイックリストが表示されます。Enterキーを押すだけで、選択したブロックを素早く挿入できます。

ブロックの選択と挿入

• ブロックインサーターこれはブラウザブロックカテゴリーを選択するか、上部の検索語特定のブロックを直接検索します。ブロックをクリックすると、自動的にコンテンツエリアに挿入されます。

2.Gutenbergブロックのカスタマイズ方法

Gutenbergエディタでは、ブロックを挿入できるだけでなく、オンデマンドでブロックを挿入することもできます。カスタマイズThem.カスタム設定やオプションはブロックの種類によって異なりますが、ほとんどのブロックでは以下の調整が可能です：

ブロックツールバー

各ブロックを選択すると、コンテキストツールバーが表示されます。このツールバーはブロックの上にあり、一般的な設定オプションに素早くアクセスできます：

• アライメントオプションブ ロ ッ ク の配置 （左揃え、 中央揃え、 右揃え、 全幅） を設定 し ます。
• フォーマット例：太字、斜体、リンクの挿入など。
• 挿入オプションブロックとブロックの間に他のコンテンツを挿入することができます。埋め込みそしてショートコードその他

ブロック設定パネル

エディタの右側には、ブロックのカスタマイズオプションがあります。これらのオプションは2つのメインタブで区別されます：

• ブロックタブ選択したブロックに関連するカスタマイズオプションを表示します。例えばパッセージテキストの色、背景色、フォント、行間などを変更できます。

• ドキュメントタブ: ドキュメント全体（ページや投稿など）に適用され、カテゴリー、タグ、フィーチャー画像などの設定が含まれます。

再利用可能なブロック

同じブロックを何度も使う必要がある場合は、そのブロックを再利用可能なブロック.これにより、異なる投稿やページに同じコンテンツのブロックを簡単に挿入することができます：

• 希望のブロックを選択しこっかいツールバーの3点メニュー(より多くのオプション）。
• 選択 "再利用可能ブロックに追加「オプション

• ブロックに名前を付け、将来の識別と使用のために保存します。

3.Gutenbergエディターのブロックタイプ

Gutenbergエディタは以下を提供します。複数種類のブロックブロックの種類と機能は次のとおりです。ここでは、一般的なブロックの種類とその機能について説明します：

共通ブロック

• 通路太字、斜体、リンクの追加など、基本的なテキスト編集機能をサポートしています。
• キャプション: ページや記事にタイトルを追加できます。マルチレベルヘッダー(H1、H2、H3など）。
• イメージ画像を挿入し、配置、サイズ、キャプションを設定します。
• リスティング順序付きリストや順序なしリストの作成に使用します。
• 引用通常、文章や段落を引用する際に使用します。

書式ブロック

• コーディングに対して表示コードスニペットは、通常、コードの書式を維持し、等幅フォントを適用します。
• フォーマットに対してフォーマット済みテキストの挿入空白と改行をテキストに入れます。
• 引用を使用します。様式化された引用や重要なコンテンツを表示する方法です。
• ひょうけいしきに対してフォームの作成行と列の数はカスタマイズできます。

レイアウト要素

• ボタンリンク可能なカスタマイズボタンこれは通常、ユーザーをアクションに誘導するために使用されます（例： "今すぐ購入","お問い合わせ「など）。
• 列を作成するために使用されます。マルチカラムレイアウト複数のブロックを異なる列に配置することができます。
• フォームの変換に使用します。複数ブロックの組み合わせ製品の管理も手配も簡単です。
• 間隔ブロック間で使用スペーシングの追加コンテンツの視覚的な分離が適切に行われるようにします。

ウィジェット

• ショートコード挿入用ショートコード動的なコンテンツや機能を埋め込むことができます。
• アーカイブス月別、年別などのアーカイブが表示されます。
• フォーム: サイトの投稿カテゴリーのリストを表示し、訪問者が特定のトピックに関するコンテンツを簡単に閲覧できるようにします。
• 最新の投稿最新の投稿を表示します。

埋め込みブロック

Gutenbergエディタには、投稿やページに外部コンテンツを埋め込むための様々な埋め込みブロックも用意されています：

• ユーチューブYouTubeの動画を埋め込むと、ページ上で直接再生することができます。
• ツイッター: ツイッターのつぶやきを埋め込み、つぶやきの内容やインタラクションを表示します。
• インスタグラムInstagramの投稿を埋め込んで、画像や動画を表示できます。
• スポティファイSpotifyの楽曲やプレイリストを埋め込むことができます。

4.高度なカスタマイズと拡張機能

より高度なカスタマイズを必要とするユーザーのために、Gutenbergエディタはカスタムブロック、ブロックモード、サードパーティプラグインの使用など、さらなるカスタマイズ機能をサポートしています。

カスタムブロック

開発者は ワードプレスブロック エーピーアイ カスタムブロックの作成これは ジャバスクリプト(反応) を使ってブロックの機能とスタイルを定義します。カスタムブロックはプラグインとしてパッケージ化し、他のユーザーと共有することで、Gutenbergエディタの機能をさらに強化することができます。

ブロックモデル

ブロックパターンは、複雑なデザインに素早く挿入できる、定義済みのブロックレイアウトです。これらのパターンをカスタマイズして保存し、他のページや投稿で再利用することができます。

サードパーティプラグイン

多くのサードパーティプラグインが、Gutenbergエディタの機能をさらに拡張する新しいブロックや機能を提供しています。人気のプラグインは以下の通りです：

• 高度なGutenbergブロックお客様の声、価格表などの共通ブロックを追加しました。
• コ・ブロック高度にカスタマイズ可能なコンテンツレイアウトを作成するための豊富なブロックセットを提供します。
• ケイデンス・ブロック複雑なレイアウトやデザインを簡単に作成できるように、高度なブロックがいくつか用意されています。

カスタムCSS

CSSに詳しい方なら、GutenbergエディタはカスタムCSS クラスを追加しました。これにより、ユーザーは必要に応じてブロックのスタイルを微調整し、ページのデザインによりフィットさせることができます。

5.まとめ

Gutenbergエディタは、シンプルなブログ記事から複雑なウェブデザインまで、あらゆるものに対応するパワフルで柔軟なツールです。様々なビルトインブロックとカスタマイズオプションにより、ウェブコンテンツの作成、微調整、最適化を簡単に行うことができます。開発者のために、Gutenbergはカスタムブロックを作成する機能も提供し、その機能をさらに拡張します。