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

ボックスの作り方

CSSを貼り付け

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

ボックスを作成

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

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

CSSクラスを設定

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

バビ
バビ

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

6 COMMENTS

あかみつ

手順通り試してみましたがうまくいきません。念の為style.css貼り付けではなくカスタマイズメニューの追加CSSからの追加でも試しましたがFont Awesome アイコンは表示されませんでした。

SANGOカスタムブロックの追加CSS記述も「カスタムブロック全体」
「ブロック内のテキスト部分」と試しましたが結果は変わらずです。

うまくいかない場合、どんな原因が考えられますか?

返信する
バビ

>あかみつ様

FontAwesomeのバージョンが4.7なのかもしれません。
カスタマイズ>詳細設定
の「FontAwesome4.7を使用する」のチェックを外して、「使用するFontAwesome5のバージョン番号」に任意の番号を入れてみてください。
(私は5.10.0にしてます。)

ただし、ほかのカスタマイズでFontAwesome4.7を使用している場合は、今度はそちらのアイコンが表示されなくなってしまいます。
また、FontAwesome5のほうが若干重くなるというデメリットもあります。

FontAwesome4.7を使用される場合は、「font-family: “Font Awesome 5 Free”;」を消して、
「content: “\f0eb”;」の” “内をFontAwesome4.7のユニコードに書き換える必要があります。

↓FontAwesome4.7
https://fontawesome.com/v4.7.0/icons/

返信する
あかみつ

FontAwesomeのバージョンは5.7.2です。
アドバイス通り5.10.0にもしてみましたが変化なしでした。

返信する
バビ

>あかみつ様

CSSコードの改行がよくなかったので修正してみました。
アイコン背景の丸も出ていないようならこれを貼り付ければ表示されるかもしれません。
FontAwesomeが×マークで表示されないようならあとはキャッシュを削除するくらいしか思いつきません
すみません。

返信する
あかみつ

解決しました。ありがとうございます!
sangoボックスでmemoを使いたくて不便してたのでとても助かりました。

返信する

コメントを残す

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