2023.01.08

Gutenbergのコンテンツブロックの使い方を簡単に解説！

みきてぃ東西線

WordPressのGutenberg(ブロックエディター)では、ブロックと呼ばれるコンテンツを編集することで、簡単にサイトやブログの記事を作ることができます。

今回は、Gutenbergのコンテンツブロックの使い方を、初心者でも分かりやすく解説していきます。

みきてぃ東西線

「Gutenberg(ブロックエディター)って何？」という方は、以下の記事を読んでね！

>>【WordPress】Gutenberg(ブロックエディター)の基本的な使い方

この記事の目次

Gutenbergのコンテンツブロックとは？
- Gutenbergのコンテンツブロック一覧
ブロックを繰り返し使う場合は？
- 再利用ブロックの使い方
まとめ

Gutenbergのコンテンツブロックとは？

Gutenberg(ブロックエディター)は、ブロックというコンテンツを使い、様々なコンテンツを組み合わせることができます。

これにより、HTMLが分からない方でも、簡単な操作だけでコンテンツを作ることができます。

WordPress5.5では、記事作成に便利なブロックパターンが追加され、ますます便利になっています。

Gutenbergのコンテンツブロック一覧

Gutenbergは、数多くのコンテンツブロックが用意されています。

さらに、テーマの変更やプラグインの追加で、コンテンツブロックを追加することもできます。

以下は2020年現在で、最初から用意されているコンテンツブロックの一覧となります。

一般ブロック

段落

文章を書くブロックです。

画像

画像を入れることができます。

見出し

見出しを付けます。

見出しのタブから見出しの大きさを変更できます。

ギャラリー

複数の画像を使ってギャラリーを作成します。

ギャラリータブから、画像の配置や差し替え、キャプションの編集などを行うこともできます。

リスト

箇条書きのリストを作ります。

引用

引用を示すブロックです。

音声

音声ファイルを入れます。

カバー

カバー(背景)に使用する画像を指定します。

ファイル

DL用ファイルを入れます。

動画

動画ファイルを入れます。

フォーマットブロック

コード

コードの埋め込みに使われます。

クラシック

旧エディタのブロックを作成します。

カスタムHTML

HTMLを編集する場合に使います。

プレビューで表示すると、以下の画像のようになります。

整形済みテキスト

特殊文字を使用する場合に使います。

プルクオート

引用を装飾して作ります。

テーブル

表を作ります。

詩

詩のようなコンテンツを作ることができます。

レイアウト要素

ボタン

シンプルなボタンを作ります。

カラム

カラムのコンテンツを編集します。

メディアと文章

様々なメディアとテキストをカラムで編集します。

続きを読む

記事抜粋の指定を行います。

ページ区切り

次のページに移動したいときに使われます。

区切り

文章と文章の間に区切りを入れます。

スペーサー

余白を作ります。

右サイドメニューのブロック設定で、最低20ピクセルから調節できます。

ウィジェット

ショートコード	WordPressのショートコードを入れます。
アーカイブ	サイトのアーカイブを表示します。
カテゴリー	カテゴリーを表示します。
最新のコメント	新しいコメントを表示できます。
最新の記事	新しい記事を表示できます。