2023.05.15

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

みきてぃ

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

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

みきてぃ

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

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

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

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

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

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

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

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

次の項目からは、主なコンテンツブロックについて簡単にまとめます。

一般ブロック

段落

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

画像

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

見出し

▼見出しを入れることができるブロックです。

▼見出しを付けます。

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

ギャラリー

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

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

リスト

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

▼番号無しのリスト

▼番号有りのリスト

引用

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

音声

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

カバー

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

ファイル

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

動画

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

フォーマットブロック

コード

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

クラシック

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

カスタムHTML

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

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

整形済みテキスト

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

プルクオート

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

テーブル

表を作ります。

詩

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

レイアウト要素

ボタン

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

カラム

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

メディアと文章

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

続きを読む

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

ページ区切り

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

区切り

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

スペーサー

余白を作ります。

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

ウィジェット（一部紹介）

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