Gutenberg完全対応のSANGO Gutenberg について

【SANGO メッセージボックスブロック】の使い方

この記事では、SANGO Gutenberg プラグインのオリジナルブロックである【SANGO メッセージボックスブロック】について解説していきます。

たとえば、ポイントとして伝えたい内容や注意書きなどにお使いいただくのが良いかと思います。

サンプル1

サンプルテキスト

サンプルテキスト

サンプル2

サンプルテキスト

サンプルテキスト

サンプル3

サンプルテキスト

サンプルテキスト

まずは、使い方をざっくりと掴んでいただけるように動画を用意しましたのでご覧ください。

SANGOメッセージボックスブロックの呼び出し方

まずはエディターを開き、ブロック追加ボタンをクリックします。

クリックすると、ブロック一覧が表示されるのでその中から「メッセージ」と書かれたブロックを選択します

各種設定項目

次に、メッセージボックスブロックの設定項目についてご紹介します。

基本のプリセット

よく使われる表現として「メモ」「アイデア」「注意」を用意しました。

基本のプリセットに好みのデザインがない場合は、アイコンや背景色などを変更しお好みでカスタマイズすることができます。

アイコン

先頭に表示されるアイコンを選択できます。FontAwesomeに登録されているアイコンの中からお好きなアイコンを選択いただけます。font-awesomeのアイコン名をご存知の場合は、クラス名で検索と書かれたフィールド内に、アイコン名を入力していただくことでアイコンを絞り込むことができます。

枠の表示のオプションについて

角丸の大きさの値を変更することで、以下のような四隅に丸みを帯びたメッセージボックスの枠になります。

サンプル

サンプル

サンプル

また、影の大きさの値を変更することでより目立たせることもできます。

サンプル

サンプル

サンプル

各種色設定

タイトルの文字色と背景色を変更できます。

コメントを残す

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。

HTMLやPHPのコードを掲載するときはHTMLエスケープツールで特殊文字を変換してから貼り付けてください。