【HB】ボックスブロック

ブロックエディタ用プラグイン「般若ビルダーブロック」を使って、記事内にボックスを設置する方法です。

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.再利用ブロックに追加する

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

般若ビルダーブロック一覧に戻る