ブロックエディタ用プラグイン「般若ビルダーブロック」を使って、記事内にボックスを設置する方法です。
もくじ[]
1.【HB】ボックスを選択
![](https://hannya-builder.com/guide/wp-content/uploads/2020/11/2020-11-24_20h53_30-1200x659.png)
「+」ボタンを押して、【HB】ボックスを選択します。
2.ボックス内にテキストを入力
![](https://hannya-builder.com/guide/wp-content/uploads/2020/07/2020-07-12_01h32_21.png)
ボックスの中に表示させるテキストを書きます。
3.タイトルを設定する
![](https://hannya-builder.com/guide/wp-content/uploads/2020/07/2020-07-12_01h34_45.png)
ボックスにタイトルを付けたい場合は、
- タイトル
- アイコン(Font Awesomeのクラス)
- ボックスのデザイン(タブ、楕円、ラベル、囲み)
を設定・選択します。
Font Awesomeのアイコンの設定方法
Font Awesomeというアイコンフォントを表示できます。
1.「Font Awesomeアイコンの一覧」をクリック
![](https://hannya-builder.com/guide/wp-content/uploads/2020/12/2020-12-03_02h10_24.png)
「Font Awesomeアイコンの一覧」リンクをクリックします。
2.フォントのテイストを選ぶ
![](https://hannya-builder.com/guide/wp-content/uploads/2023/05/2023-05-21_21h13_42.png)
3つのうちから選びます。もしくは、英語で検索してもよいです。
3.「Free」タブをクリック
![](https://hannya-builder.com/guide/wp-content/uploads/2023/05/2023-05-21_22h00_02.png)
Freeタブをクリックします。
使いたいアイコンをクリック
![](https://hannya-builder.com/guide/wp-content/uploads/2023/05/2023-05-21_22h02_10.png)
使いたいアイコンを選択します。
コードをコピー
![](https://hannya-builder.com/guide/wp-content/uploads/2023/05/2023-05-21_21h15_34.png)
コードをクリックしてコピーします。
「タイトル前に表示するアイコン」に貼り付け
![](https://hannya-builder.com/guide/wp-content/uploads/2023/05/2023-05-21_22h12_36.png)
「タイトル前に表示するアイコン」に貼り付けます。
余計なコードを削除
![](https://hannya-builder.com/guide/wp-content/uploads/2023/05/2023-05-21_22h14_30.png)
前後の余計なコードを削除(fa-solid fa-pooだけに)すると表示されます。
補足
「タブ」ボックスを選ぶと、タブとツールバーが被さってしまいます。被らないようにするには、(一時的に)「トップツールバー」に設定してください。
![](https://hannya-builder.com/guide/wp-content/uploads/2020/07/2020-07-18_06h42_40.png)
4.デザインを設定する
![](https://hannya-builder.com/guide/wp-content/uploads/2020/07/2020-07-12_01h49_07.png)
「デザインの設定」から、
- ボックスの枠線の太さ
- ボックスの角丸サイズ
を設定・変更できます。
5.カラーを設定する
![](https://hannya-builder.com/guide/wp-content/uploads/2020/07/2020-07-12_01h51_41.png)
- タイトル背景・枠線の色
- タイトル文字色
- ボックス背景色
- ボックス文字色
を設定できます。
6.再利用ブロックに追加する
![](https://hannya-builder.com/guide/wp-content/uploads/2020/11/2020-11-24_22h05_01.png)
再利用ブロックに追加しておくと、「ブロックパターン」の新規登録時や、他の記事でも同じ設定内容で使い回しができます。