この記事では、SANGO Gutenberg プラグインのオリジナルブロックである【SANGO メッセージボックスブロック】について解説していきます。
たとえば、ポイントとして伝えたい内容や注意書きなどにお使いいただくのが良いかと思います。
まずは、使い方をざっくりと掴んでいただけるように動画を用意しましたのでご覧ください。
目次 非表示
SANGOメッセージボックスブロックの呼び出し方
まずはエディターを開き、ブロック追加ボタンをクリックします。
![](https://saruwakakun.com/sango/wp-content/uploads/2021/05/1b96824b9df1ea2c6f072271d87e12e8.png)
クリックすると、ブロック一覧が表示されるのでその中から「メッセージ」と書かれたブロックを選択します
![](https://saruwakakun.com/sango/wp-content/uploads/2021/05/a33a038a5ecfcac0b77974a4915a531b.png)
各種設定項目
次に、メッセージボックスブロックの設定項目についてご紹介します。
よく使われる表現として「メモ」「アイデア」「注意」を用意しました。
基本のプリセットに好みのデザインがない場合は、アイコンや背景色などを変更しお好みでカスタマイズすることができます。
先頭に表示されるアイコンを選択できます。FontAwesomeに登録されているアイコンの中からお好きなアイコンを選択いただけます。font-awesomeのアイコン名をご存知の場合は、クラス名で検索と書かれたフィールド内に、アイコン名を入力していただくことでアイコンを絞り込むことができます。
![](https://saruwakakun.com/sango/wp-content/uploads/2021/05/580eea98eb5fec0c4c6d80a618a92f9f.png)
![](https://saruwakakun.com/sango/wp-content/uploads/2021/05/afddfdac9560ebb667eff7766b64545b.png)
角丸の大きさの値を変更することで、以下のような四隅に丸みを帯びたメッセージボックスの枠になります。
また、影の大きさの値を変更することでより目立たせることもできます。
![](https://saruwakakun.com/sango/wp-content/uploads/2021/05/8df9dfe07a67ec1a293c34e85128d193.png)
タイトルの文字色と背景色を変更できます。
![](https://saruwakakun.com/sango/wp-content/uploads/2021/05/6c2234d2fed701d8092d8123a337588f.png)
![](https://saruwakakun.com/sango/wp-content/uploads/2021/05/6223ea711c157cebc09c55b503d7d756.png)
コメントを残す