![『青春18きっぷ』で乗れる観光列車「HIGH RAIL 1375」](https://mikit-tz.com/wp-content/uploads/2024/07/high-rail-1375-eyecatch.jpg)
Gutenbergのコンテンツブロックの使い方を簡単に解説!
![アイキャッチ画像](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-howto-eyecatching.png)
WordPressのGutenberg(ブロックエディター)では、ブロックと呼ばれるコンテンツを編集することで、簡単にサイトやブログの記事を作ることができます。
今回は、Gutenbergのコンテンツブロックの使い方を、初心者でも分かりやすく解説していきます。
![プロフィール用アイコン](https://mikit-tz.com/wp-content/uploads/2019/05/profile.png)
「Gutenberg(ブロックエディター)って何?」という方は、以下の記事を読んでね!
Gutenbergのコンテンツブロックとは?
Gutenberg(ブロックエディター)は、ブロックというコンテンツを使い、様々なコンテンツを組み合わせることができます。
これにより、HTMLが分からない方でも、簡単な操作だけでコンテンツを作ることができます。
WordPress5.5では、記事作成に便利なブロックパターンが追加され、ますます便利になっています。
![WordPress Gutenberg ブロックパターン](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img2-367x400.png)
Gutenbergのコンテンツブロック一覧
Gutenbergは、数多くのコンテンツブロックが用意されています。
![WordPress Gutenberg ブロックメニュー](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img1-218x400.png)
さらに、テーマの変更やプラグインの追加で、コンテンツブロックを追加することもできます。
次の項目からは、主なコンテンツブロックについて簡単にまとめます。
一般ブロック
段落
![WordPress Gutenberg(ブロックエディター)画面](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-howto-img3.png)
文章を書くブロックです。
画像
画像を入れることができます。
![WordPress Gutenberg 画像ブロック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img3.png)
![WordPress Gutenberg 画像ブロック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img4-400x364.png)
見出し
▼見出しを入れることができるブロックです。
![WordPress Gutenberg 見出しブロック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img5-364x400.png)
▼見出しを付けます。
![WordPress Gutenberg 見出しブロック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img6.png)
▼見出しのタブから見出しの大きさを変更できます。
![WordPress Gutenberg 見出しブロック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img7.png)
ギャラリー
複数の画像を使ってギャラリーを作成します。
![WordPress Gutenberg ギャラリーブロック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img8.png)
ギャラリータブから、画像の配置や差し替え、キャプションの編集などを行うこともできます。
![WordPress Gutenberg ギャラリーブロック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img9.png)
リスト
箇条書きのリストを作ります。
▼番号無しのリスト
![WordPress Gutenberg 箇条書きブロック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img10.png)
▼番号有りのリスト
![WordPress Gutenberg 箇条書きブロック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img11.png)
引用
引用を示すブロックです。
![WordPress Gutenberg 引用ブロック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img12.png)
音声
音声ファイルを入れます。
カバー
カバー(背景)に使用する画像を指定します。
ファイル
DL用ファイルを入れます。
動画
動画ファイルを入れます。
フォーマットブロック
コード
コードの埋め込みに使われます。
クラシック
旧エディタのブロックを作成します。
![WordPress Gutenberg クラシックブロック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img13.png)
カスタムHTML
HTMLを編集する場合に使います。
![WordPress Gutenberg カスタムHTMLブロック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img14.png)
プレビューで表示すると、以下の画像のようになります。
![WordPress Gutenberg カスタムHTMLブロック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img15.png)
整形済みテキスト
特殊文字を使用する場合に使います。
![WordPress Gutenberg 整形済みテキストブロック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img16.png)
プルクオート
引用を装飾して作ります。
テーブル
表を作ります。
![WordPress Gutenberg テーブルブロック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img17.png)
詩
詩のようなコンテンツを作ることができます。
レイアウト要素
ボタン
シンプルなボタンを作ります。
![WordPress Gutenberg ボタンブロック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img18.png)
カラム
カラムのコンテンツを編集します。
メディアと文章
様々なメディアとテキストをカラムで編集します。
続きを読む
記事抜粋の指定を行います。
ページ区切り
次のページに移動したいときに使われます。
区切り
文章と文章の間に区切りを入れます。
![WordPress Gutenberg 区切りブロック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img19.png)
スペーサー
余白を作ります。
![WordPress Gutenberg スペーサーブロック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img20.png)
右サイドメニューのブロック設定で、最低20ピクセルから調節できます。
![WordPress Gutenberg スペーサーブロック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img21.png)
ウィジェット(一部紹介)
ショートコード | WordPressのショートコードを入れます。 |
アーカイブ | サイトのアーカイブを表示します。 |
カテゴリー | カテゴリーを表示します。 |
最新のコメント | 新しいコメントを表示できます。 |
最新の記事 | 新しい記事を表示できます。 |
埋め込み(一部紹介)
埋め込み
指定のURLを入れて埋め込みます。
![WordPress Gutenberg 埋め込みブロック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img22.png)
ツイートを埋め込みます。
![WordPress Gutenberg Twitter埋め込みブロック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img23.png)
YouTube
YouTubeの動画を埋め込みます。
![WordPress Gutenberg YouTube埋め込みブロック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img26.png)
WordPress
WordPressのブログカードを作ります。
![WordPress Gutenberg WordPress埋め込みブロック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img27.png)
記事内では以下の画像のように表示されます。
![WordPress Gutenberg WordPress埋め込みブロック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img28-381x400.png)
ブロックを繰り返し使う場合は?
繰り返し使うブロックは、「再利用ブロック」に登録することができます。
再利用ブロックの使い方
ブロックを選択し、右端のボタンをクリックすると、メニューが表示されます。
![Wordpress Gutenberg ブロック編集メニューを開く](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img29.png)
そこに、「再利用ブロックに追加」をクリックすることで、再利用ブロックとして追加できます。
![Wordpress Gutenberg ブロック編集メニュー](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img30-243x400.png)
再利用ブロックの名前を入力し、「保存」をクリックします。
![Wordpress Gutenberg 再利用ブロック設定](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img31.png)
再利用ブロックが登録されました。
![Wordpress Gutenberg 再利用ブロック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img32.png)
「再利用ブロック」に登録されたブロックは、「再利用可能」ボックスに追加されます。
![Wordpress Gutenberg 再利用ブロック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img33.png)
また、再利用ブロックを編集することもできますが、再利用ブロックを編集した場合、他の記事でも編集後の再利用ブロックが反映されてしまいます。
他の記事でも使いたい場合は「通常のブロックへ変換」をクリックしてください。
![Wordpress Gutenberg ブロック編集メニュー](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img34-264x400.png)
「再利用ブロックから削除」をクリックすると、再利用ブロックの登録が解除されます。
![Wordpress Gutenberg ブロック編集メニュー](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img35-264x400.png)
なお、「すべての再利用ブロックを管理」をクリックすると、登録されている再利用ブロックの一覧が表示されます。
![Wordpress Gutenberg 再利用ブロック](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img36.png)
再利用ブロック管理メニューでは、再利用ブロックを編集したり、再利用ブロックをエクスポートしてダウンロードすることもできます。
![Wordpress Gutenberg 再利用ブロック管理メニュー](https://mikit-tz.com/wp-content/uploads/2020/08/wordpress-gutenberg-contentsblock-img37.png)
まとめ
というわけで、今回は「Gutenbergのコンテンツブロックの使い方」について解説しました。
コンテンツブロックは沢山あるため、慣れないうちは覚えるのが大変だと感じます。まずは、少しずつコンテンツブロックを試してみて、少しずつ覚えていくようにしましょう!