ブロックエディターのカスタマイズ


ブロックエディターのカスタマイズを管理画面から行えます管理画面 > 編集画面 > ブロックエディタ設定 から行えます。

管理ページのブロックエディター設定画面で、ブロックエディタのメニューや、追加できるブロックをカスタマイズできます。
ブロックエディター設定画面

画像リサイズ

ブロックエディターで追加したメディア画像のリサイズサイズを指定します。ブロックエディターでは、全てのメディア画像がこのサイズにリサイズされます(指定サイズより小さい画像はリサイズされません)

画像リサイズの設定をピクセスで指定します。
画像リサイズ設定

ブロックメニュー

ブロックエディターで追加できるブロック項目を設定できます。

ブロックメニューを追加・削除できます。
ブロックメニュー設定画面
  • ブロック:ブロックの種類

  • ラベル:メニュー表示で表示されるテキスト

  • クラス:追加したブロック要素に付与されるクラス

  • グループ:メニュー表示するときのグループを指定します。空の場合、上で設定されているグループが設定されます。

追加ブロックのメニュー表示に反映されます。
追加ブロックのメニュー表示

メニュー設定

メニュー設定では、テキストを選択したときのメニュー項目の制御ができます。不要な要素があればチェックを外してください。

使いたいメニューにはチェックを入れ、不要なメニューはチェックをはずします。
テキストのメニュー設定画面
テキストを選択することで、メニューが表示されます。
テキストの装飾メニュー

カスタムクラス

カスタムクラスでは、選択したテキストを span で囲って任意のクラスを設定するときの、クラスを設定できます。

*「メニュー設定」で「カスタムクラス」にチェックが入っている必要があります。

ラベルとクラス名を好きな数だけ設定します。
カスタムクラス設定画面
選択したテキストに、カスタムクラスで「注意ラベル」を設定してる例です。
カスタムクラスのメニュー表示例

画像サイズ

メディア画像の表示サイズの選択肢を設定できます。値は % で設定します。

画像サイズの選択肢をラベルと値(%)で設定
画像サイズ設定画面
画像のポップアップメニューのサイズ選択肢に表示されます。
画像サイズのメニュー表示例

カラーパレット

ブロックエディター内で使用するカラパレットの選択肢を設定します。

16進数のカラコードで指定します。(例:#330000)
カラーパレット設定画面
色選択UIの下に、設定したカラーのリストが表示されます。
カラーパレットの表示例

文字サイズ

選択したテキストのフォントサイズを変更する時の、文字サイズの選択肢を設定します。

*「メニュー設定」で「文字サイズ」にチェックが入っている必要があります。

ラベルと値(px,em,rem)のセットで、選択肢を設定します。
文字サイズ設定画面
選択したテキストの文字サイズを、文字サイズ選択肢から選択したサイズに変更します。
文字サイズのメニュー表示例

フォント

選択したテキストのフォントを変更する時の、フォントの選択肢を設定します。

*「メニュー設定」で「フォント」にチェックが入っている必要があります。

ラベルとフォント名のセットで、選択肢を設定します。
フォント設定画面
選択したテキストのフォントを、フォント選択肢から選択したフォントに変更します。
フォントのメニュー表示例