ブロックエディタ用プラグイン「般若ビルダーブロック」を使って、記事内にボックスを設置する方法です。
もくじ[]
1.【HB】ボックスを選択

「+」ボタンを押して、【HB】ボックスを選択します。
2.ボックス内にテキストを入力

ボックスの中に表示させるテキストを書きます。
3.タイトルを設定する

ボックスにタイトルを付けたい場合は、
- タイトル
- アイコン(Font Awesomeのクラス)
- ボックスのデザイン(タブ、楕円、ラベル、囲み)
を設定・選択します。
Font Awesomeのアイコンの設定方法
Font Awesomeというアイコンフォントを表示できます。
1.「Font Awesomeアイコンの一覧」をクリック

「Font Awesomeアイコンの一覧」リンクをクリックします。
2.フォントのテイストを選ぶ

3つのうちから選びます。もしくは、英語で検索してもよいです。
3.「Free」タブをクリック

Freeタブをクリックします。
使いたいアイコンをクリック

使いたいアイコンを選択します。
コードをコピー

コードをクリックしてコピーします。
「タイトル前に表示するアイコン」に貼り付け

「タイトル前に表示するアイコン」に貼り付けます。
余計なコードを削除

前後の余計なコードを削除(fa-solid fa-pooだけに)すると表示されます。
補足
「タブ」ボックスを選ぶと、タブとツールバーが被さってしまいます。被らないようにするには、(一時的に)「トップツールバー」に設定してください。

4.デザインを設定する

「デザインの設定」から、
- ボックスの枠線の太さ
- ボックスの角丸サイズ
を設定・変更できます。
5.カラーを設定する

- タイトル背景・枠線の色
- タイトル文字色
- ボックス背景色
- ボックス文字色
を設定できます。
6.再利用ブロックに追加する

再利用ブロックに追加しておくと、「ブロックパターン」の新規登録時や、他の記事でも同じ設定内容で使い回しができます。