アイキャッチ画像

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

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

プロフィール用アイコン
みきてぃ東西線

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

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

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

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

WordPress Gutenberg ブロックパターン

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

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

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

WordPress Gutenberg ブロックメニュー

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

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

一般ブロック

段落

WordPress Gutenberg(ブロックエディター)画面

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

画像

WordPress Gutenberg 画像ブロック
WordPress Gutenberg 画像ブロック

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

見出し

WordPress Gutenberg 見出しブロック
見出しのサンプル。

見出しを付けます。

WordPress Gutenberg 見出しブロック

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

WordPress Gutenberg 見出しブロック

ギャラリー

WordPress Gutenberg ギャラリーブロック

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

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

WordPress Gutenberg ギャラリーブロック

リスト

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

WordPress Gutenberg 箇条書きブロック
番号無しのリスト
WordPress Gutenberg 箇条書きブロック
番号有りのリスト

引用

WordPress Gutenberg 引用ブロック

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

音声

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

カバー

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

ファイル

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

動画

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

フォーマットブロック

コード

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

クラシック

WordPress Gutenberg クラシックブロック

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

カスタムHTML

WordPress Gutenberg カスタムHTMLブロック

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

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

WordPress Gutenberg カスタムHTMLブロック

整形済みテキスト

WordPress Gutenberg 整形済みテキストブロック

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

プルクオート

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

テーブル

WordPress Gutenberg テーブルブロック

表を作ります。

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

レイアウト要素

ボタン

WordPress Gutenberg ボタンブロック

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

カラム

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

メディアと文章

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

続きを読む

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

ページ区切り

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

区切り

WordPress Gutenberg 区切りブロック

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

スペーサー

WordPress Gutenberg スペーサーブロック

余白を作ります。

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

WordPress Gutenberg スペーサーブロック

ウィジェット

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

埋め込み(数が多いので、一部だけ紹介)

埋め込み

WordPress Gutenberg 埋め込みブロック

指定のURLを入れて埋め込みます。

Twitter

WordPress Gutenberg Twitter埋め込みブロック

ツイートを埋め込みます。

Facebook

WordPress Gutenberg Facebook埋め込みブロック

Facebookの投稿を埋め込みます。

Instagram

WordPress Gutenberg Instagram埋め込みブロック

Instagramの投稿を埋め込みます。

YouTube

WordPress Gutenberg YouTube埋め込みブロック

YouTubeの動画を埋め込みます。

WordPress

WordPress Gutenberg WordPress埋め込みブロック

WordPressのブログカードを作ります。記事内では以下の画像のように表示されます。

WordPress Gutenberg WordPress埋め込みブロック

ブロックを繰り返し使う場合は?

繰り返し使うブロックは、「再利用ブロック」に登録することができます。

再利用ブロックの使い方

ブロックを選択し、右端のボタンをクリックすると、メニューが表示されます。

Wordpress Gutenberg ブロック編集メニューを開く

そこに、「再利用ブロックに追加」をクリックすることで、再利用ブロックとして追加できます。

Wordpress Gutenberg ブロック編集メニュー

再利用ブロックの名前を入力し、「保存」をクリックします。

Wordpress Gutenberg 再利用ブロック設定

再利用ブロックが登録されました。

Wordpress Gutenberg 再利用ブロック

「再利用ブロック」に登録されたブロックは、「再利用可能」ボックスに追加されます。

Wordpress Gutenberg 再利用ブロック

また、再利用ブロックを編集することもできますが、再利用ブロックを編集した場合、他の記事でも編集後の再利用ブロックが反映されてしまいます。

他の記事でも使いたい場合は「通常のブロックへ変換」をクリックしてください。

Wordpress Gutenberg ブロック編集メニュー

「再利用ブロックから削除」をクリックすると、再利用ブロックの登録が解除されます。

Wordpress Gutenberg ブロック編集メニュー

なお、「すべての再利用ブロックを管理」をクリックすると、登録されている再利用ブロックの一覧が表示されます。

Wordpress Gutenberg 再利用ブロック

再利用ブロック管理メニューでは、再利用ブロックを編集したり、再利用ブロックをエクスポートしてダウンロードすることもできます。

Wordpress Gutenberg 再利用ブロック管理メニュー

まとめ

というわけで、今回は「Gutenbergのコンテンツブロックの使い方」について解説しました。

コンテンツブロックは沢山あるため、慣れないうちは覚えるのが大変だと感じます。まずは、少しずつコンテンツブロックを試してみて、少しずつ覚えていくようにしましょう!

スポンサーリンク