【SANGOグーテンベルク】注意・メモボックスを作る

バビ
バビ

ごきげんよう。バビです。

個人的にSANGOのボックスのデザインてシンプルだけどちょっとおしゃれな感じでいいですよね。

[alert title="注意"]ここに文章[/alert]

とか

[memo title="MEMO"]ここに文章[/memo]

です。

クラシックエディタのときはショートコートでよく使っていたんですが、GutenbergのSANGOボックスだと、メモとか注意書きのアイコン付きボックスがないのが残念だなーと思ってたんですよね。

なので、作っちゃいました。

完成サンプル

完成サンプルはこんな感じです。

注意

テキスト

MEMO

テキスト

旧エディタのショートコードで作ったものとほぼ同じものができます。

SANGO GutenbergプラグインのSANGOカスタムブロック「タイトル付ボックス」

CSS

外観→テーマの編集→(子テーマの)「style.css」に貼り付けます。

注意書き

注意

テキスト

旧エディタの[alert title="注意"]ここに文章[/alert]のボックスです。

  • CSSクラス:sgb-alert
/*SANGOグーテンベルク注意ボックス [sgb-alert]*/
.sgb-alert .sgb-box-simple__title:before {
 font-family: "Font Awesome 5 Free";
 content: "\f12a";
 display: inline-block;
 width: 30px;
 height: 30px;
 line-height: 30px;
 margin: 0 7px 0 0;
 border-radius: 50%;
 background: #ff8376;
 color: #fff;
 font-size:17px;
 font-weight: 900;
 text-align: center;
 vertical-align: middle;
}
.sgb-alert .sgb-box-simple__title{
 font-size:1.2em;
}

メモ

MEMO

テキスト

旧エディタの[memo title="MEMO"]ここに文章[/memo]のボックスです。

  • CSSクラス:sgb-memo
/*SANGOグーテンベルクメモボックス [sgb-memo]*/
.sgb-memo .sgb-box-simple__title:before {
 font-family: "Font Awesome 5 Free";
 content: "\f303";
 display: inline-block;
 width: 30px;
 height: 30px;
 line-height: 30px;
 margin: 0 7px 0 0;
 border-radius: 50%;
 background: #ffb36b;
 color: #fff;
 font-size:17px;
 font-weight: 900;
 text-align: center;
 vertical-align: middle;
}
.sgb-memo .sgb-box-simple__title{
 font-size:1.2em;
}

ポイント

CSSをちょっといじるとこんなのも作れます。

POINT

テキスト

  • CSSクラス:sgb-point
/*SANGOグーテンベルクPOINTボックス [sgb-point]*/
.sgb-point .sgb-box-simple__title:before {
 font-family: "Font Awesome 5 Free";
 content: "\f0eb";
 display: inline-block;
 width: 30px;
 height: 30px;
 line-height: 30px;
 margin: 0 7px 0 0;
 border-radius: 50%;
 background: #ffc107;
 color: #fff;
 font-size:17px;
 font-weight: 900;
 text-align: center;
 vertical-align: middle;
}
.sgb-point .sgb-box-simple__title{
 font-size:1.2em;
}

ボックスの作り方

CSSを貼り付け

外観→テーマの編集→(子テーマ)の「style.css」に上のCSSを貼り付けます。

ボックスを作成

「SANGOカスタムブロック」「タイトル付ボックス」で元となるボックスを作成します。

注意ボックスの場合、タイトルカラーは「coral red」、ボックスカラーと背景カラーは「pale red」です。

CSSクラスを設定

作成したボックスを選択して、右側のサイドバーの「高度な設定」「追加CSSクラス」に、上のCSSの「CSSクラス」をコピペしてください。

バビ
バビ

再利用ブロックに登録しておくと便利です。

コメントを残す

メールアドレスが公開されることはありません。