[WordPress] ブロックエディタ（Gutenberg）最初に覚えたい基本のブロックとその使い方

WordPressのブロックエディタで、使用頻度が高くなると思われるブロックの種類と使い方をご紹介します。

段落

通常の文章を書くためのブロックです。

見出し

見出しを書くためのブロックです。
ブロックツールで見出しの階層（H1～H6）を変更できます。

記事やページのタイトルにH1を使用することが多いので、H2からの使用が多くなると思われます。

リスト

箇条書きリストを追加できます。

リストの順序を入れ替えたり、インデントを付けて入れ子にすることもできます。

画像

画像を挿入できます。
画像ブロックを追加すると、以下の枠が表示されます。

・新たに画像をアップロードする場合：ファイルを枠内にドラッグもしくは「アップロード」をクリック
・すでにアップロード済のファイルを使用する場合：「メディアライブラリ」をクリック
・画像URLを直接指定する場合は「URLから挿入」をクリック

①設定サイドバーで以下を設定できます。
・角丸
・alt
・アスペクト比
・画像サイズ

②ブロックツールで以下を設定できます。
・配置（左揃え/中央揃え/右揃え）
・デュオトーンフィルターの適用
・リンク挿入
・切り抜き
・画像上にテキストを追加
・キャプションを追加
・置換

 

テーブル

表を挿入することができます。

①設定サイドバーでは、セル幅の固定、ヘッダーラベル、フッターラベルの表示を設定できます。
②ブロックツールでは、カラムの配置変更（左寄せ/中央配置/右寄せ）、表の編集（列・行の追加・削除）等を設定できます。

 

カラム

要素を横並びに配置することができます。
 
以下のパターンからカラムレイアウトを選択できます。

 
カラム内でもブロックを追加できます。

 

1カラムを選択した状態で、設定サイドバーより幅を5パターンの単位から設定できます。

 

カラムブロック全体を選択した状態で、設定サイドバーより後からカラムレイアウトパターンを変更できます。
「モバイルでは縦に並べる」がONになっていると、スマートフォンでは1カラムで縦に並びます。

 

メディアとテキスト

メディアとテキストを横並びに配置することができます。

①ブロックツールでは、メディアとテキストの左右の入れ替え、メディアに対してのテキストの垂直配置（上揃え/中央揃え/下揃え）などを設定できます。
②設定サイドバーでは、メディア幅の指定や、テキストの背景色、文字色、文字サイズ等を設定できます。

テキストエリア内で右下の「＋」（ブロック追加）をクリックすると、テキストエリア内に見出しやボタンなどのブロックを入れることが出来ます。

ボタン

ボタンを挿入することが出来ます。

①ブロックツールでは、配置変更（左寄せ/中央配置/右寄せ）、リンク先等を設定できます。
②設定サイドバーでは、ボタン幅、塗りつぶしorアウトライン、色、角丸 などを設定できます。

 

スペーサー

ブロック間に余白を作ることができます。

 
・スペーサーブロックなし

 
・高さ50pxのスペーサーブロックあり
情報の区切りを明確に伝えやすくなります。

 

 

ブロックエディタには、この記事で紹介したブロック以外にも沢山の便利なブロックがあります。
実際に使ってみて、魅力的なコンテンツ作りを目指しましょう。