WordPressのGutenberg(ブロックエディター)では、ブロックと呼ばれるコンテンツを編集することで、簡単にサイトやブログの記事を作ることができます。
今回は、Gutenbergのコンテンツブロックの使い方を、初心者でも分かりやすく解説していきます。
Gutenbergのコンテンツブロックとは？
Gutenberg(ブロックエディター)は、ブロックというコンテンツを使い、様々なコンテンツを組み合わせることができます。
これにより、HTMLが分からない方でも、簡単な操作だけでコンテンツを作ることができます。
WordPress5.5では、記事作成に便利なブロックパターンが追加され、ますます便利になっています。
Gutenbergのコンテンツブロック一覧
Gutenbergは、数多くのコンテンツブロックが用意されています。
さらに、テーマの変更やプラグインの追加で、コンテンツブロックを追加することもできます。
以下は2020年現在で、最初から用意されているコンテンツブロックの一覧となります。
一般ブロック
段落
文章を書くブロックです。
画像
画像を入れることができます。
見出し
見出しを付けます。
見出しのタブから見出しの大きさを変更できます。
ギャラリー
複数の画像を使ってギャラリーを作成します。
ギャラリータブから、画像の配置や差し替え、キャプションの編集などを行うこともできます。
リスト
箇条書きのリストを作ります。
引用
引用を示すブロックです。
音声
音声ファイルを入れます。
カバー
カバー(背景)に使用する画像を指定します。
ファイル
DL用ファイルを入れます。
動画
動画ファイルを入れます。
フォーマットブロック
コード
コードの埋め込みに使われます。
クラシック
旧エディタのブロックを作成します。
カスタムHTML
HTMLを編集する場合に使います。
プレビューで表示すると、以下の画像のようになります。
整形済みテキスト
特殊文字を使用する場合に使います。
プルクオート
引用を装飾して作ります。
テーブル
表を作ります。
詩
詩のようなコンテンツを作ることができます。
レイアウト要素
ボタン
シンプルなボタンを作ります。
カラム
カラムのコンテンツを編集します。
メディアと文章
様々なメディアとテキストをカラムで編集します。
続きを読む
記事抜粋の指定を行います。
ページ区切り
次のページに移動したいときに使われます。
区切り
文章と文章の間に区切りを入れます。
スペーサー
余白を作ります。
右サイドメニューのブロック設定で、最低20ピクセルから調節できます。
ウィジェット
| ショートコード | WordPressのショートコードを入れます。 |
| アーカイブ | サイトのアーカイブを表示します。 |
| カテゴリー | カテゴリーを表示します。 |
| 最新のコメント | 新しいコメントを表示できます。 |
| 最新の記事 | 新しい記事を表示できます。 |
埋め込み(数が多いので、一部だけ紹介)
埋め込み
指定のURLを入れて埋め込みます。
ツイートを埋め込みます。
Facebookの投稿を埋め込みます。
Instagramの投稿を埋め込みます。
YouTube
YouTubeの動画を埋め込みます。
WordPress
WordPressのブログカードを作ります。記事内では以下の画像のように表示されます。
ブロックを繰り返し使う場合は？
繰り返し使うブロックは、「再利用ブロック」に登録することができます。
再利用ブロックの使い方
ブロックを選択し、右端のボタンをクリックすると、メニューが表示されます。
そこに、「再利用ブロックに追加」をクリックすることで、再利用ブロックとして追加できます。
再利用ブロックの名前を入力し、「保存」をクリックします。
再利用ブロックが登録されました。
「再利用ブロック」に登録されたブロックは、「再利用可能」ボックスに追加されます。
また、再利用ブロックを編集することもできますが、再利用ブロックを編集した場合、他の記事でも編集後の再利用ブロックが反映されてしまいます。
他の記事でも使いたい場合は「通常のブロックへ変換」をクリックしてください。
「再利用ブロックから削除」をクリックすると、再利用ブロックの登録が解除されます。
なお、「すべての再利用ブロックを管理」をクリックすると、登録されている再利用ブロックの一覧が表示されます。
再利用ブロック管理メニューでは、再利用ブロックを編集したり、再利用ブロックをエクスポートしてダウンロードすることもできます。
まとめ
というわけで、今回は「Gutenbergのコンテンツブロックの使い方」について解説しました。
コンテンツブロックは沢山あるため、慣れないうちは覚えるのが大変だと感じます。まずは、少しずつコンテンツブロックを試してみて、少しずつ覚えていくようにしましょう！
