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

バビ

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

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

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

とか

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

です。

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

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

注意

FontAwesome5以上用のカスタマイズです。

FontAwesome4.7で利用したい場合は、「font-family: “Font Awesome 5 Free”;」の行を消して、「content: “　”」の” “の中にFontAwesome4.7のUnicodeを入れる必要があります。

完成サンプル

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

注意

テキスト

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;
}